← 목록

WebSockets를 활용한 실시간 채팅 애플리케이션 만들기 💬

작성: 2024년 05월 14일읽기: 약 4분
GPTLLMWebsocket

웹 개발에 관심 있는 주니어 개발자 여러분, 실시간 채팅 애플리케이션을 만들어보고 싶으신가요? 오늘은 WebSockets를 사용하여 간단하게 실시간으로 메시지를 주고받을 수 있는 채팅 애플리케이션을 만드는 방법을 알려드리겠습니다. 복잡한 기술 용어는 최대한 피하면서, 쉽게 따라 할 수 있도록 설명해드리겠습니다.

시작하기 전에

WebSockets는 웹 페이지와 서버 간에 실시간 양방향 통신을 가능하게 하는 기술입니다. 이를 통해 사용자가 서버에 요청을 보내지 않아도 서버로부터 데이터를 실시간으로 받을 수 있습니다. 채팅 애플리케이션 같은 실시간 기능을 구현할 때 매우 유용합니다.

기본 셋업

먼저, Node.js가 설치되어 있어야 합니다. Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해주는 환경입니다. 설치되어 있지 않다면, Node.js 공식 웹사이트에서 설치할 수 있습니다.

프로젝트 생성

  1. 새 폴더를 만들고, 해당 폴더에서 터미널을 엽니다.
  2. npm init -y 명령어를 통해 새 Node.js 프로젝트를 생성합니다.
  3. WebSocket 라이브러리를 설치하기 위해 npm install ws 명령어를 실행합니다.

서버 코드 작성

server.js 파일을 생성하고, 다음 코드를 입력합니다.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);

    // 모든 클라이언트에 메시지 전송
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.send('환영합니다! 실시간 채팅에 연결되었습니다.');
});

이 코드는 8080 포트에서 WebSocket 서버를 실행하고, 클라이언트로부터 메시지를 받으면 콘솔에 출력한 후, 모든 클라이언트에게 그 메시지를 전송합니다.

클라이언트 코드 작성

간단한 HTML 페이지를 만들어 WebSocket 클라이언트를 구현해봅시다. index.html 파일을 생성하고 다음 코드를 입력합니다.

<!DOCTYPE html>
<html>
<head>
    <title>실시간 채팅 애플리케이션</title>
</head>
<body>
    <input id="messageInput" type="text" placeholder="메시지를 입력하세요" />
    <button onclick="sendMessage()">전송</button>
    <ul id="messages"></ul>

    <script>
        const ws = new WebSocket('ws://localhost:8080');

        ws.onmessage = function(event) {
            const messages = document.getElementById('messages');
            const message = document.createElement('li');
            message.textContent = event.data;
            messages.appendChild(message);
        };

        function sendMessage() {
            const input = document.getElementById('messageInput');
            ws.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

이 HTML 페이지는 사용자로부터 메시지를 입력받아 WebSocket 서버로 전송하고, 서버로부터 메시지를 받으면 화면에 표시합니다.

실행하기

  1. 터미널에서 node server.js를 실행하여 서버를 시작합니다.
  2. index.html 파일을 웹 브라우저에서 열어 클라이언트를 실행합니다.
  3. 메시지를 입력하고 전송 버튼을 클릭해보세요. 다른 브라우저 창을 열어 똑같이 실행하면, 실시간으로 메시지가 전송되는 것을 볼 수 있습니다.

이제 여러분은 WebSockets를 사용하여 간단한 실시간 채팅 애플리케이션을 만드는 방법을 배웠습니다. 이 기술을 활용하여 다양한 실시간 웹 애플리케이션을 만들어보세요!