[javascript] jQuery를 사용하여 실시간 채팅 및 메신저 구현하기

01 Dec 2023

javascript

실시간 채팅 및 메신저는 웹 개발에서 매우 중요한 기능 중 하나입니다. jQuery는 간편한 문법과 다양한 기능을 제공하여 웹 애플리케이션의 개발을 용이하게 해줍니다. 이번 블로그 게시물에서는 jQuery를 사용하여 실시간 채팅 및 메신저를 구현하는 방법에 대해 다루겠습니다.

1. HTML 구조 설계

<div id="chat-container">
  <div id="messages">
    <!-- 채팅 메시지들이 나타날 공간 -->
  </div>
  <div id="input-container">
    <input type="text" id="message-input" placeholder="메시지 입력" />
    <button id="send-button">전송</button>
  </div>
</div>

위의 HTML 코드는 기본적인 채팅 UI를 구성하는 코드입니다. chat-container는 채팅창의 전체적인 영역을 감싸는 컨테이너입니다. messages는 채팅 메시지들이 표시될 영역이며, input-container는 사용자가 메시지를 입력할 수 있는 입력창과 전송 버튼을 포함합니다.

2. jQuery를 이용한 실시간 채팅 구현

$(function() {
  var socket = io(); // 실시간 통신을 위한 Socket.io 객체 생성

  // 전송 버튼 클릭 시 메시지 전송
  $('#send-button').click(function() {
    var message = $('#message-input').val(); // 입력된 메시지 가져오기
    socket.emit('chat message', message); // 서버로 메시지 전송
    $('#message-input').val(''); // 입력창 비우기
  });

  // 메시지 수신 시 화면에 출력
  socket.on('chat message', function(message) {
    $('#messages').append($('<div>').text(message));
  });
});

위의 JavaScript 코드는 jQuery를 사용하여 실시간 채팅을 구현하는 코드입니다. 먼저, $(function() { ... }) 내부의 코드는 DOM이 로드되었을 때 실행됩니다. 그리고 io() 함수를 사용하여 실시간 통신을 위한 Socket.io 객체를 생성합니다.

전송 버튼을 클릭했을 때, 입력된 메시지를 가져와서 서버로 메시지를 전송하도록 설정합니다. 이 때, socket.emit() 함수를 사용합니다. 전송 후에는 입력창을 비워줍니다.

또한, 서버로부터 메시지가 수신되었을 때 화면에 출력하기 위해 socket.on() 함수를 사용합니다. 수신된 메시지는 $('#messages').append($('<div>').text(message));를 통해 화면에 추가됩니다.

3. 서버 측 코드

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

io.on('connection', function(socket) {
  console.log('a user connected');

  socket.on('chat message', function(message) {
    console.log('message: ' + message);
    io.emit('chat message', message); // 모든 클라이언트에게 메시지 전송
  });

  socket.on('disconnect', function() {
    console.log('user disconnected');
  });
});

http.listen(3000, function() {
  console.log('listening on *:3000');
});

위의 서버 측 코드는 Node.js와 Socket.io를 이용하여 실시간 채팅 기능을 구현하는 코드입니다. 먼저, Express와 http 모듈, Socket.io를 로드한 후 서버 인스턴스를 생성합니다.

io.on('connection', ...)으로 클라이언트가 접속했을 때의 이벤트를 처리합니다. 클라이언트가 접속하면 "a user connected" 메시지가 출력됩니다. 그리고 "chat message" 이벤트를 처리하여 클라이언트로부터 전송된 메시지를 모든 클라이언트에게 전송합니다.

마지막으로, 서버를 3000 포트에서 실행하도록 설정하고 "listening on *:3000" 메시지가 출력됩니다.

이제 위의 코드를 실행하면 실시간 채팅이 가능한 메신저를 만들 수 있습니다.

1. HTML 구조 설계

2. jQuery를 이용한 실시간 채팅 구현

3. 서버 측 코드

참고 자료