Node.js 를 배워보자/7. 웹 소켓

실시간 채팅 애플리케이션 구현

_Blue_Sky_ 2024. 10. 1. 09:19
728x90
728x90

Node.js로 실시간 채팅 애플리케이션 구현하기: 상세 가이드

소개

Node.js는 비동기 I/O 모델을 기반으로 하여 실시간 애플리케이션 개발에 매우 적합한 환경을 제공합니다. 이 글에서는 Node.js를 이용하여 실시간 채팅 애플리케이션을 구현하는 방법을 상세하게 설명하고, 각 단계별로 필요한 기술과 코드 예시를 제공합니다.

1. Node.js 설치 및 프로젝트 설정

  • Node.js 설치: 공식 웹사이트([유효하지 않은 URL 삭제됨] Node.js를 다운로드하여 설치합니다.
  • 프로젝트 생성: 터미널을 열고 새로운 디렉토리를 생성하고 npm init -y 명령어를 실행하여 package.json 파일을 생성합니다.

2. 필요한 패키지 설치

  • Express: 웹 서버 프레임워크
  • Socket.IO: 실시간 양방향 통신 라이브러리
npm install express socket.io
 
728x90

3. 서버 구축

const express = require('express');
const app = express();
const http = require('http');
const { Server } = require('socket.io');

const server = http.createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
    console.log('a user connected');

    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('a user disconnected');
    });
});

server.listen(3000, () => {
    console.log('listening on *:3000');
});
 
  • Express 설정: express를 이용하여 기본적인 웹 서버를 설정합니다.
  • Socket.IO 설정: http.createServer를 이용하여 HTTP 서버를 생성하고, io 객체를 생성하여 Socket.IO 서버를 초기화합니다.
  • 연결 이벤트: connection 이벤트는 클라이언트가 연결될 때 발생하며, disconnect 이벤트는 클라이언트가 연결을 끊을 때 발생합니다.
  • 메시지 전송: chat message 이벤트는 클라이언트에서 메시지를 보낼 때 발생하며, io.emit을 이용하여 모든 연결된 클라이언트에게 메시지를 전송합니다.

4. 클라이언트 구축

<!DOCTYPE html>
<html>
<head>
    <title>채팅</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <input type="text" id="message">
    <button>Send</button>
    <ul id="messages"></ul>
    <script>
        const socket = io();

        const messageInput = document.getElementById('message');
        const messages = document.getElementById('messages');

        messageInput.addEventListener('keyup', (event) => {
            if (event.keyCode === 13) {
                socket.emit('chat message', messageInput.value);
                messageInput.value = '';
            }
        });

        socket.on('chat message', (msg) => {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
        });
    </script>
</body>
</html>
 
  • Socket.IO 연결: socket.io.js 파일을 포함하고 io() 함수를 이용하여 서버에 연결합니다.
  • 메시지 전송: emit 메소드를 이용하여 서버로 메시지를 전송합니다.
  • 메시지 수신: on 메소드를 이용하여 서버에서 보내는 메시지를 수신하고 화면에 출력합니다.

5. 추가 기능 구현

  • 채팅방 나누기: namespace를 이용하여 여러 개의 채팅방을 만들 수 있습니다.
  • 개인 메시지: socket.id를 이용하여 특정 클라이언트에게만 메시지를 전송할 수 있습니다.
  • 오프라인 메시지: 데이터베이스를 이용하여 오프라인 상태일 때 보낸 메시지를 저장하고, 다시 온라인 상태가 될 때 전달할 수 있습니다.
  • 사용자 인증: 토큰이나 세션을 이용하여 사용자를 인증하고, 각 사용자별로 다른 정보를 관리할 수 있습니다.

결론

Node.js와 Socket.IO를 이용하여 간단한 실시간 채팅 애플리케이션을 구현하는 방법을 살펴보았습니다. 이를 기반으로 더욱 다양하고 복잡한 기능을 추가하여 완성도 높은 채팅 애플리케이션을 개발할 수 있습니다.

 

728x90
728x90