최근에는 웹 개발에서 실시간 통신이 많이 사용되고 있습니다. 이는 사용자들이 웹 애플리케이션을 사용하는 동안 다른 사용자와의 실시간 채팅이 가능하도록 해줍니다. 이번에는 자바스크립트를 사용하여 실시간 채팅 기능을 구현하는 방법에 대해 알아보겠습니다.

웹 소켓(Web Socket)

실시간 채팅을 구현하기 위해서는 웹 소켓을 사용할 수 있습니다. 웹 소켓은 서버와 클라이언트 간의 양방향 통신을 제공하는 프로토콜입니다. 이를 이용하면 서버에서 클라이언트로 데이터를 즉시 전송할 수 있고, 클라이언트도 서버로부터 즉시 데이터를 받을 수 있습니다.

클라이언트 구현

가장 먼저 클라이언트 측에서 웹 소켓을 사용하여 서버와 연결해야 합니다. 이를 위해 JavaScript WebSocket API를 사용할 수 있습니다.

const socket = new WebSocket("ws://localhost:8080");  # 자신의 서버 주소로 변경해야 합니다.

socket.onopen = function() {
  console.log("웹 소켓이 열렸습니다.");
};

socket.onmessage = function(event) {
  const message = event.data;
  console.log("받은 메시지:", message);
};

socket.onclose = function(event) {
  console.log("웹 소켓이 닫혔습니다.");
};

위의 코드에서는 WebSocket 객체를 생성하고, onopen, onmessage, onclose 이벤트 핸들러를 정의합니다. onopen 이벤트 발생 시 웹 소켓이 열렸다는 메시지를 출력하고, onmessage 이벤트 발생 시 받은 메시지를 출력합니다.

서버 구현

웹 소켓 서버는 Node.js와 같은 백엔드 플랫폼을 사용하여 구현할 수 있습니다. 이번 예제에서는 Node.js와 ws 패키지를 사용하여 간단한 웹 소켓 서버를 구현해보겠습니다.

const WebSocket = require("ws");

// 웹 소켓 서버 생성
const wss = new WebSocket.Server({ port: 8080 });

// 클라이언트와 연결되었을 때
wss.on("connection", function(ws) {
  console.log("클라이언트가 연결되었습니다.");

  // 클라이언트로부터 메시지를 받았을 때
  ws.on("message", function(message) {
    console.log("클라이언트로부터 받은 메시지:", message);

    // 모든 클라이언트에게 메시지 전송
    wss.clients.forEach(function(client) {
      client.send(message);
    });
  });

  // 클라이언트와 연결이 끊어졌을 때
  ws.on("close", function() {
    console.log("클라이언트와 연결이 끊어졌습니다.");
  });
});

위의 코드에서는 WebSocket.Server를 사용하여 웹 소켓 서버를 생성하고, connection, message, close 이벤트 핸들러를 정의합니다. connection 이벤트 발생 시 클라이언트가 연결되었다는 메시지를 출력하고, message 이벤트 발생 시 받은 메시지를 출력하고 모든 클라이언트에게 전송합니다.

결과 확인

위의 클라이언트와 서버 코드를 각각 실행한 뒤 브라우저에서 페이지에 접속하면 실시간으로 채팅이 가능한 환경이 구성됩니다. 클라이언트로 메시지를 입력하면 서버로 전송되고, 서버로부터 메시지를 받아 화면에 출력됩니다.

마무리

이번 포스트에서는 자바스크립트를 이용하여 브라우저의 실시간 채팅을 구현하는 방법에 대해 알아보았습니다. 웹 소켓을 이용하여 클라이언트와 서버 간의 양방향 통신을 구현하고, 실시간으로 메시지를 주고 받을 수 있습니다. 이를 활용하면 다양한 실시간 기능을 구현할 수 있을 겁니다.

더 자세한 내용은 WebSocket API 문서를 참고해주세요.