← 목록

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

작성: 2024년 11월 07일읽기: 약 4분
GPTLLM

웹 개발에 관심이 많은 여러분, 실시간으로 소통할 수 있는 채팅 애플리케이션을 만들어보고 싶지 않으신가요? 오늘은 바로 그런 프로젝트를 함께 시작해보려고 합니다. 우리의 비밀 무기는 바로 WebSockets입니다! 복잡하게 들릴 수 있지만, 걱정하지 마세요. 저희가 함께 하나씩 차근차근 알아볼 거예요.

WebSockets란?

간단히 말해서, WebSockets는 웹 페이지와 서버 간에 실시간 양방향 통신을 가능하게 하는 기술입니다. 즉, 서버나 클라이언트가 서로에게 메시지를 즉시 보낼 수 있어요. 이는 채팅 애플리케이션 같은 실시간 기능을 구현할 때 매우 유용합니다.

기본 셋업

채팅 애플리케이션을 만들기 위해서는 먼저 기본적인 웹 서버와 HTML 페이지가 필요합니다. 여기서는 Node.js를 사용하여 간단한 서버를 구축하고, WebSockets를 활용할 거예요.

1단계: Node.js 설치

Node.js가 아직 설치되지 않았다면, Node.js 공식 웹사이트에서 설치하세요.

2단계: 프로젝트 디렉토리 생성

프로젝트를 위한 폴더를 만들고, 그 안에서 터미널을 열어 다음 명령어를 실행합니다:

npm init -y
npm install express ws

이 명령어는 우리의 웹 서버를 위한 Express와 WebSockets를 위한 ws 라이브러리를 설치합니다.

3단계: 서버 설정

server.js 파일을 생성하고 다음 코드를 입력하세요:

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

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

app.use(express.static('public'));

server.listen(3000, function() {
  console.log('Listening on http://localhost:3000');
});

이 코드는 3000번 포트에서 실행되는 간단한 웹 서버를 설정합니다. 또한, WebSockets 서버를 초기화하고, 클라이언트 간 메시지를 중계하는 기능을 추가합니다.

4단계: 클라이언트 측 설정

public 폴더를 생성하고 그 안에 index.html 파일을 만든 후, 다음과 같이 입력하세요:

<!DOCTYPE html>
<html>
<head>
    <title>실시간 채팅 애플리케이션</title>
</head>
<body>
    <input id="messageInput" type="text" placeholder="메시지를 입력하세요" />
    <button id="sendButton">보내기</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);
        };

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

이 HTML 파일은 사용자로부터 메시지를 입력받고, ws://localhost:3000 주소로 연결된 WebSockets 서버에 메시지를 보내는 기능을 구현합니다. 서버로부터 메시지를 받으면, 화면에 표시됩니다.

마무리

여기까지 따라오셨다면, 기본적인 실시간 채팅 애플리케이션을 만드는 데 성공하셨습니다! 이제 node server.js를 실행하고, 브라우저에서 http://localhost:3000으로 접속해보세요. 여러분이 만든 채팅 애플리케이션에서 실시간으로 메시지를 주고받는 모습을 볼 수 있을 거예요.

이 프로젝트를 통해 WebSockets의 기본적인 사용 방법을 이해하셨기를 바랍니다. 이제 여러분도 WebSockets를 활용하여 다양한 실시간 웹 애플리케이션을 만들 수 있게 되었어요. 창의적인 아이디어로 멋진 프로젝트를 만들어보세요!