웹 소켓을 활용한 실시간 채팅 애플리케이션 만들기 💬

작성: 2025년 10월 01일읽기: 약 4분

웹 개발에 관심이 많은 여러분, 오늘은 실시간으로 메시지를 주고받을 수 있는 채팅 애플리케이션을 만드는 방법을 알아보겠습니다. 이 과정에서 우리는 웹 소켓이라는 기술을 사용할 건데요, 복잡해 보일 수도 있지만 걱정하지 마세요! 단계별로 쉽게 설명해 드리겠습니다.

웹 소켓을 사용하면 서버와 클라이언트(즉, 사용자의 웹 브라우저) 간에 실시간으로 데이터를 주고받을 수 있습니다. 이는 채팅 애플리케이션에 이상적인 기술입니다.

1단계: 기본 설정

먼저, 당신의 프로젝트에 필요한 라이브러리를 설치해야 합니다. Node.js와 npm이 설치되어 있다고 가정하고, 터미널을 열어 다음 명령어를 실행해주세요:

npm init -y
npm install ws express

여기서 ws는 웹 소켓을 위한 라이브러리이고, express는 웹 서버를 쉽게 구축할 수 있게 해주는 라이브러리입니다.

2단계: 서버 설정

이제 웹 소켓 서버를 설정할 차례입니다. 프로젝트 폴더 안에 server.js 파일을 생성하고, 다음 코드를 입력해주세요:

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

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('서버에 연결되었습니다!');
});

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

이 코드는 3000번 포트에서 서버를 시작하고, 새로운 연결이 생길 때마다 클라이언트로부터 메시지를 받아 다른 모든 클라이언트에게 그 메시지를 전송합니다.

3단계: 클라이언트 설정

서버가 준비되었으니, 이제 사용자 인터페이스를 만들 차례입니다. 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:3000');

        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 파일은 사용자로부터 메시지를 입력받아 서버로 전송하는 간단한 인터페이스를 제공합니다. 서버로부터 메시지를 받으면, 그 메시지를 화면에 표시합니다.

마무리

이제 node server.js를 실행하여 서버를 시작하고, 웹 브라우저에서 index.html 파일을 열어보세요. 여러분이 만든 실시간 채팅 애플리케이션을 통해 메시지를 주고받을 수 있습니다!

웹 소켓을 사용한 실시간 채팅 애플리케이션 만들기는 여기서 끝이 아닙니다. 여러분은 이 기초를 바탕으로 더 많은 기능을 추가하고, 사용자 인터페이스를 개선하여 나만의 멋진 애플리케이션을 완성할 수 있습니다. 웹 개발 여정에서 이 정보가 도움이 되길 바랍니다!