← 목록

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

작성: 2024년 03월 29일읽기: 약 4분
GPTLLMWebSocket

웹 소켓을 활용해 실시간으로 메시지를 주고받는 채팅 애플리케이션을 만들어 보는 것은 어떨까요? 이 글에서는 복잡한 용어를 최대한 배제하고, 쉽게 따라 할 수 있는 방법을 소개하겠습니다. 실시간 채팅 애플리케이션은 웹 개발의 매력적인 프로젝트 중 하나이며, 웹 소켓을 이해하고 활용하는 데 큰 도움이 됩니다.

시작하기 전에

웹 소켓이란, 클라이언트(브라우저)와 서버가 실시간으로 데이터를 주고받을 수 있게 해주는 기술입니다. 이를 통해 사용자가 페이지를 새로고침하지 않아도 서버로부터 새로운 데이터를 받을 수 있습니다.

기본 설정

웹 소켓을 사용하기 위해서는 서버와 클라이언트 모두 설정이 필요합니다. 여기서는 Node.js를 사용한 서버 설정과 HTML, JavaScript를 사용한 클라이언트 설정 방법을 소개하겠습니다.

서버 설정 (Node.js)

  1. 먼저, Node.js가 설치되어 있어야 합니다. 설치되어 있지 않다면, Node.js 공식 웹사이트에서 설치할 수 있습니다.
  2. 프로젝트 폴더를 생성하고, 그 안에서 다음 명령어를 실행하여 package.json 파일을 생성합니다.
npm init -y
  1. 웹 소켓을 사용하기 위한 라이브러리인 ws를 설치합니다.
npm install ws
  1. 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 !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.send('웹 소켓 연결 성공!');
});

클라이언트 설정 (HTML & JavaScript)

  1. 프로젝트 폴더 내에 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 src="app.js"></script>
</body>
</html>
  1. 같은 폴더 내에 app.js 파일을 생성하고, 다음 코드를 작성합니다.
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function() {
    console.log('서버와 연결됨');
};

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 = '';
}

이제 서버를 실행하고, 웹 브라우저에서 index.html을 열면 실시간 채팅 애플리케이션을 사용할 수 있습니다. 메시지를 입력하고 '보내기' 버튼을 클릭하면, 연결된 모든 클라이언트에게 메시지가 전송됩니다.

웹 소켓을 활용한 실시간 채팅 애플리케이션 구축은 여기서 끝이 아닙니다. 사용자 인증, 메시지 암호화, 데이터베이스 연동 등 다양한 기능을 추가하여 더욱 풍부한 애플리케이션을 만들 수 있습니다. 이 기초적인 예제를 시작으로 웹 소켓의 매력적인 세계를 탐험해 보세요!