[javascript] Socket.io를 사용하여 실시간 게시판 시스템을 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

다음은 Socket.io를 사용하여 실시간 게시판 시스템을 구현하는 예제 코드입니다.

먼저 Node.js와 Express를 설치하고, 프로젝트 디렉토리에서 다음 명령을 실행하여 필요한 패키지를 설치합니다:

npm install express socket.io

서버 파일(server.js)을 생성하고 다음 코드를 작성합니다:

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

// 게시판에 저장될 메시지 배열
const messages = [];

// 정적 파일 서비스
app.use(express.static(__dirname + '/public'));

// 클라이언트가 연결될 때마다 실행되는 이벤트 리스너
io.on('connection', (socket) => {
  console.log('클라이언트가 연결되었습니다.');

  // 클라이언트로부터 새로운 메시지를 받았을 때 실행되는 이벤트 리스너
  socket.on('new_message', (data) => {
    console.log(`새로운 메시지: ${data}`);
    
    // 새로운 메시지를 배열에 추가
    messages.push(data);
    
    // 모든 클라이언트에게 새로운 메시지를 전달
    io.emit('new_message', data);
  });

  // 클라이언트가 연결을 끊었을 때 실행되는 이벤트 리스너
  socket.on('disconnect', () => {
    console.log('클라이언트가 연결을 끊었습니다.');
  });
});

// 서버를 시작하고 지정된 포트에서 연결을 수락
const port = 3000;
http.listen(port, () => {
  console.log(`서버가 http://localhost:${port}에서 실행중입니다.`);
});

클라이언트 파일(public/index.html)을 생성하고 다음 코드를 작성합니다:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>실시간 게시판</title>
  <style>
    ul {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <h1>실시간 게시판</h1>
  
  <ul id="messages"></ul>
  
  <form id="message-form">
    <input type="text" id="message-input" placeholder="메시지를 입력하세요">
    <button type="submit">전송</button>
  </form>
  
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const messageForm = document.getElementById('message-form');
    const messageInput = document.getElementById('message-input');
    const messagesList = document.getElementById('messages');
    
    // 새로운 메시지를 받았을 때 실행되는 이벤트 리스너
    socket.on('new_message', (data) => {
      const li = document.createElement('li');
      li.textContent = data;
      messagesList.appendChild(li);
    });
    
    // 메시지 전송 form의 submit 이벤트 핸들러
    messageForm.addEventListener('submit', (e) => {
      e.preventDefault(); // 폼의 기본 동작 방지
      
      const message = messageInput.value;
      socket.emit('new_message', message); // 서버로 새로운 메시지 전송
      
      messageInput.value = ''; // 입력 필드 비우기
    });
  </script>
</body>
</html>

위의 코드는 서버와 클라이언트를 동시에 실행하여 실시간으로 메시지를 주고받을 수 있는 게시판 시스템을 구현합니다. 클라이언트는 새로운 메시지를 입력하고 전송할 수 있으며, 서버는 새로운 메시지를 받아서 모든 클라이언트에게 전달합니다.

추가로, Express를 사용하여 정적 파일을 서비스하고, Socket.io를 사용하여 클라이언트와 서버 간의 실시간 통신을 구현합니다.

위의 코드를 실행하기 위해서는 Node.js와 Express가 설치되어 있어야 합니다. Node.js를 설치한 후에 프로젝트 디렉토리로 이동하여 node server.js 명령을 실행하면 서버가 실행됩니다. 그리고 웹 브라우저에서 http://localhost:3000으로 접속하여 게시판을 사용할 수 있습니다.

이 예제를 기반으로 원하는 기능을 추가하거나 UI를 개선할 수 있습니다. Socket.io의 다양한 이벤트와 메서드를 참조하여 필요한 기능을 구현해 보세요.

참고 자료:

Socket.io 공식 문서