← 목록

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

작성: 2024년 06월 04일읽기: 약 3분
GPTLLM웹소켓

웹 소켓(WebSocket)은 실시간으로 정보를 주고받을 수 있는 기술입니다. 이를 활용해 우리는 실시간으로 메시지를 주고받을 수 있는 채팅 애플리케이션을 만들 수 있습니다. 오늘은 그 과정을 간단하게 알아보겠습니다.

기본 개념

웹 소켓은 클라이언트(사용자의 웹 브라우저)와 서버가 연결된 상태를 유지하면서 양방향 통신을 가능하게 합니다. 이는 전통적인 HTTP 요청과는 달리, 서버로부터 데이터를 받기 위해 클라이언트가 요청을 보낼 필요가 없습니다. 대신, 연결이 활성화된 상태에서 데이터를 실시간으로 교환할 수 있습니다.

실습: 간단한 채팅 애플리케이션 만들기

1. 서버 설정하기

Node.js와 ws 라이브러리를 사용하여 웹 소켓 서버를 설정합니다. 먼저, ws 라이브러리를 설치해야 합니다.

npm install ws

다음으로, 서버를 설정하는 코드를 작성합니다.

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 !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

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

2. 클라이언트 설정하기

HTML과 JavaScript를 사용하여 간단한 클라이언트 페이지를 만듭니다. 이 페이지는 사용자가 메시지를 입력하고 전송할 수 있게 해줍니다.

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

    <script>
        var ws = new WebSocket('ws://localhost:8080');
        
        ws.onmessage = function(event) {
            var messages = document.getElementById('messages');
            var message = document.createElement('li');
            message.textContent = event.data;
            messages.appendChild(message);
        };

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

이제 서버를 실행하고 브라우저에서 클라이언트 페이지를 열면, 여러분은 실시간으로 메시지를 주고받을 수 있는 채팅 애플리케이션을 경험할 수 있습니다.

마무리

웹 소켓을 활용한 실시간 채팅 애플리케이션 만들기는 그리 어렵지 않습니다. 오늘 배운 내용을 바탕으로 여러분만의 기능을 추가해 보세요. 예를 들어, 사용자 인증, 메시지 암호화, 또는 다양한 채팅방 기능 등을 구현해 볼 수 있습니다. 웹 개발의 세계는 무궁무진한 가능성으로 가득 차 있습니다. 창의력을 발휘해 보세요!