Socket.io를 사용하여 실시간 익명 채팅 앱 구현하기

이번 튜토리얼에서는 Socket.io를 사용하여 실시간 익명 채팅 앱을 구현하는 방법에 대해 알아보겠습니다. Socket.io는 웹 소켓을 기반으로 하여 실시간 양방향 통신을 가능하게 해주는 라이브러리입니다.

1. 프로젝트 셋업

먼저, 프로젝트를 생성하고 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성합니다:

mkdir chat-app
cd chat-app
npm init -y

그리고 다음 명령어를 통해 Socket.io를 설치합니다:

npm install socket.io

2. 서버 셋업

이제 서버를 설정해보겠습니다. app.js 파일을 생성하고 다음 코드를 작성합니다:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

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

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

    socket.on('chat message', (message) => {
        console.log('Received message:', message);
        io.emit('chat message', message); // 모든 클라이언트에게 메시지 전송
    });
});

http.listen(3000, () => {
    console.log('Server listening on port 3000');
});

위 코드에서는 Express.js를 사용하여 정적 파일을 서비스하고, Socket.io를 초기화하여 클라이언트와의 실시간 통신을 처리합니다. io.on('connection') 이벤트 핸들러에서 클라이언트 접속 및 연결 해제 이벤트를 처리하고, socket.on('chat message') 이벤트 핸들러에서 채팅 메시지를 받아서 모든 클라이언트에게 전송합니다.

3. 클라이언트 셋업

이제 프론트엔드를 설정해보겠습니다. public/index.html 파일을 생성하고 다음 코드를 작성합니다:

<!DOCTYPE html>
<html>
<head>
    <title>실시간 익명 채팅</title>
</head>
<body>
    <h1>실시간 익명 채팅</h1>

    <ul id="messages"></ul>

    <form id="chat-form">
        <input id="chat-input" autocomplete="off" />
        <button type="submit">전송</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        const chatForm = document.getElementById('chat-form');
        const chatInput = document.getElementById('chat-input');
        const messages = document.getElementById('messages');

        chatForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const message = chatInput.value;
            chatInput.value = '';
            socket.emit('chat message', message);
        });

        socket.on('chat message', (message) => {
            const li = document.createElement('li');
            li.textContent = message;
            messages.appendChild(li);
        });
    </script>
</body>
</html>

위 코드에서는 Socket.io 클라이언트를 초기화하고, 채팅 입력폼의 submit 이벤트를 처리하여 서버로 메시지를 전송하고, 서버로부터 수신된 메시지를 화면에 출력합니다.

4. 앱 실행

이제 앱을 실행해보겠습니다. 다음 명령어를 사용하여 서버를 실행합니다:

node app.js

웹 브라우저에서 http://localhost:3000을 열어서 실시간 익명 채팅 앱을 사용할 수 있습니다. 여러 클라이언트를 열어서 테스트해보세요.

이제 Socket.io를 사용하여 실시간 익명 채팅 앱을 구현하는 방법에 대해 알아보았습니다. Socket.io는 간편하게 실시간 통신 기능을 구현할 수 있어 많은 개발자들에게 사랑받고 있는 라이브러리입니다.