실시간 채팅 시스템 구현: JavaScript와 WebSocket 활용

2025. 1. 19. 14:18

실시간 채팅 기능은 현대 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. 특히 고객 지원, 커뮤니케이션 플랫폼, 게임 내 채팅 등 다양한 서비스에서 활용되고 있습니다. 이번 블로그에서는 JavaScript와 WebSocket을 사용하여 간단한 실시간 채팅 시스템을 구현하는 방법을 소개합니다.

1. 실시간 채팅의 기본 원리

실시간 채팅은 클라이언트와 서버 간의 양방향 통신이 핵심입니다. 일반적으로 HTTP는 요청-응답 방식으로 동작하여 실시간 통신이 어렵습니다. 그러나 WebSocket을 사용하면 지속적인 연결을 유지할 수 있어 클라이언트와 서버 간에 데이터를 실시간으로 주고받을 수 있습니다.

2. 구현 목표

서버와 클라이언트 간 양방향 통신 구현.
사용자가 메시지를 입력하면 다른 사용자들에게 실시간으로 전송.
간단한 HTML, CSS, JavaScript를 사용해 기본 UI 구현.

3. 구현 환경

Backend: Node.js와 WebSocket 라이브러리(ws).
Frontend: HTML, CSS, JavaScript.
실행 도구: Visual Studio Code 또는 터미널 환경.

4. 프로젝트 구조

realtime-chat/
├── server.js       // WebSocket 서버 코드
├── public/
│   ├── index.html  // 클라이언트 UI
│   ├── styles.css  // 스타일 시트
│   ├── script.js   // 클라이언트 스크립트
└── package.json    // 프로젝트 설정 파일

5. 서버 코드 작성

server.js 파일은 WebSocket 서버를 구현합니다.

WebSocket 서버 코드

// server.js
const WebSocket = require('ws'); // WebSocket 라이브러리
const PORT = 8080; // WebSocket 서버 포트

// WebSocket 서버 생성
const server = new WebSocket.Server({ port: PORT });

// 클라이언트 연결 관리
const clients = new Set();

server.on('connection', (socket) => {
    console.log('클라이언트가 연결되었습니다.');

    // 새 클라이언트 추가
    clients.add(socket);

    // 메시지 수신 처리
    socket.on('message', (message) => {
        console.log(`수신한 메시지: ${message}`);

        // 연결된 모든 클라이언트에 메시지 전송
        for (const client of clients) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        }
    });

    // 클라이언트 연결 종료 처리
    socket.on('close', () => {
        console.log('클라이언트 연결이 종료되었습니다.');
        clients.delete(socket);
    });
});

console.log(`WebSocket 서버가 ${PORT} 포트에서 실행 중입니다.`);

설명:

WebSocket.Server: WebSocket 서버를 생성합니다.
connection 이벤트: 클라이언트가 서버에 연결될 때 발생합니다.
message 이벤트: 클라이언트에서 메시지를 수신할 때 호출됩니다.
연결된 클라이언트들에게 브로드캐스트 방식으로 메시지를 전송합니다.

6. 클라이언트 코드 작성

HTML 파일

public/index.html 파일:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실시간 채팅</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="chat-container">
        <div id="chat-box"></div>
        <div id="input-area">
            <input type="text" id="message-input" placeholder="메시지를 입력하세요...">
            <button id="send-button">전송</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

설명:

chat-container: 채팅 화면 전체를 감싸는 요소.
chat-box: 채팅 메시지를 표시하는 영역.
input-area: 메시지 입력 필드와 전송 버튼.

CSS 파일

public/styles.css 파일:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}

#chat-container {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
    border: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 500px;
}

#chat-box {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
}

#input-area {
    display: flex;
    padding: 10px;
}

#message-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#send-button {
    padding: 10px 20px;
    margin-left: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#send-button:hover {
    background-color: #0056b3;
}

설명:

chat-box: 메시지를 표시하며, 스크롤 가능하도록 설정.
input-area: 입력 필드와 버튼을 한 줄에 정렬.

JavaScript 파일

public/script.js 파일:

// script.js

const chatBox = document.getElementById('chat-box');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// WebSocket 연결 생성
const socket = new WebSocket('ws://localhost:8080');

// 서버로부터 메시지 수신
socket.onmessage = (event) => {
    const message = event.data;
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight; // 최신 메시지로 스크롤
};

// 메시지 전송
sendButton.addEventListener('click', () => {
    const message = messageInput.value;

    if (message.trim() !== '') {
        socket.send(message); // 서버로 메시지 전송
        messageInput.value = ''; // 입력 필드 초기화
    }
});

// Enter 키로 메시지 전송
messageInput.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
        sendButton.click();
    }
});

설명:

WebSocket('ws://localhost:8080'): WebSocket 서버와 연결을 생성합니다.
onmessage: 서버로부터 수신한 메시지를 화면에 표시합니다.
sendButton.addEventListener: 사용자가 입력한 메시지를 서버로 전송합니다.

7. 프로젝트 실행

Node.js 설치:
- Node.js가 설치되어 있어야 합니다. Node.js 다운로드

프로젝트 초기화:

mkdir realtime-chat
cd realtime-chat
npm init -y
npm install ws

서버 실행:
```
node server.js
```
HTML 파일 실행:
- index.html 파일을 브라우저에서 열어 사용자가 채팅에 참여할 수 있습니다.

8. 확장 아이디어

사용자 이름 추가:
- 메시지 전송 시 사용자 이름을 포함하도록 기능 추가.
메시지 시간 표시:
- 각 메시지에 타임스탬프 추가.
방 관리:
- 특정 방(Room)을 생성해 사용자가 해당 방에서만 대화하도록 구현.
파일 전송:
- 메시지 외에 이미지나 파일을 전송하는 기능 추가.

9. 결론

이번 블로그에서는 WebSocket을 활용해 간단한 실시간 채팅 애플리케이션을 구현해 보았습니다. WebSocket은 실시간 통신을 구현하는 데 매우 유용하며, 간단한 설정으로 강력한 기능을 제공합니다. 이를 바탕으로 실시간 애플리케이션의 다양한 기능을 개발해보세요!

저작자표시

'개발 > Javascript' 카테고리의 다른 글

FusionCharts로 다양한 차트 그리기: 예제와 상세 설명 (0)	2025.01.20
jQuery로 차트 그리기: 다양한 차트 유형과 예제 (0)	2025.01.20
스크롤 방향에 따라 상단 메뉴를 동적으로 표시하는 방법 (0)	2025.01.19
스크립트를 사용해 일정 시간마다 체크하고 알림을 띄우는 방법 (1)	2025.01.18
웹 저장소 기술: SessionStorage, LocalStorage, 쿠키의 비교 및 사용법 (0)	2025.01.14

subinto의 개발노트