자바스크립트 웹 소켓을 활용한 실시간 채팅 앱 개발

10 Sep 2023

javascript

최근에는 실시간으로 정보를 전달하는 애플리케이션의 필요성이 높아지고 있습니다. 이를 위해 웹 소켓(WebSocket)을 사용하여 실시간 채팅 앱을 개발할 수 있습니다. 웹 소켓은 서버와 클라이언트 간 양방향 통신을 제공하며, 소켓 연결이 유지되는 동안 실시간 데이터를 주고받을 수 있습니다.

이 블로그 포스트에서는 자바스크립트를 사용하여 웹 소켓을 활용한 실시간 채팅 애플리케이션을 개발하는 방법을 알아보겠습니다.

1. 웹 소켓 서버 설정하기

먼저, 웹 소켓 서버를 설정해야 합니다. 여기서는 Node.js와 Express 프레임워크를 사용하여 웹 소켓 서버를 구현하겠습니다.

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  // 웹 소켓 연결 시 처리할 로직 작성
});

server.listen(3000, () => {
  console.log('웹 소켓 서버가 3000번 포트에서 실행 중입니다.');
});

위의 코드에서 wss.on('connection', ...) 부분에는 웹 소켓 연결이 생성되었을 때 처리할 로직을 작성하면 됩니다.

2. 웹 소켓 클라이언트 구현하기

웹 소켓 클라이언트를 구현하기 위해 JavaScript의 WebSocket 객체를 사용할 수 있습니다. 클라이언트 측에서 웹 소켓을 사용하여 서버와 연결하고, 데이터를 주고받을 수 있습니다.

const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {
  // 웹 소켓 연결이 성공하였을 때 처리할 로직 작성
};

socket.onmessage = (event) => {
  // 서버로부터 메시지를 받았을 때 처리할 로직 작성
};

socket.onclose = () => {
  // 웹 소켓 연결이 종료되었을 때 처리할 로직 작성
};

function sendMessage(message) {
  socket.send(message); // 서버로 메시지를 보냄
}

위의 코드에서 socket.onopen, socket.onmessage, socket.onclose 등의 이벤트 핸들러를 정의하여 웹 소켓 연결 상태 및 서버로부터 받은 메시지를 처리할 수 있습니다. sendMessage() 함수를 통해 서버로 메시지를 보낼 수 있습니다.

3. 실시간 채팅 애플리케이션 개발하기

이제 실시간 채팅 애플리케이션을 개발할 차례입니다. 웹 소켓을 통해 서버와 클라이언트 간 메시지를 주고받아 채팅 기능을 구현할 수 있습니다.

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 클라이언트로부터 메시지를 받았을 때 처리할 로직 작성
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message); // 모든 클라이언트에게 메시지를 보냄
      }
    });
  });
});

server.listen(3000, () => {
  console.log('웹 소켓 서버가 3000번 포트에서 실행 중입니다.');
});

위의 코드에서 ws.on('message', ...) 부분에는 클라이언트로부터 메시지를 받았을 때 처리할 로직을 작성하면 됩니다. 해당 메시지를 모든 클라이언트에게 전송하는 방식으로 실시간 채팅을 구현할 수 있습니다.

결론

이렇게 자바스크립트 웹 소켓을 활용하여 실시간 채팅 애플리케이션을 개발할 수 있습니다. 웹 소켓을 사용하면 서버와 클라이언트 간의 실시간 양방향 통신을 쉽게 구현할 수 있으며, 이를 활용하여 다양한 실시간 애플리케이션을 개발할 수 있습니다.