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

27 Nov 2023

javascript

Socket.io는 실시간 웹 응용 프로그램을 만들기 위한 JavaScript 라이브러리입니다. 이를 사용하여 실시간 댓글 시스템을 구현하는 방법을 알아보겠습니다.

먼저, Node.js 및 Express.js 서버를 설정해야 합니다. package.json 파일에서 의존성에 “socket.io”를 추가하고, npm install 명령어를 사용하여 의존성을 설치하세요.

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'));

io.on('connection', (socket) => {
  console.log('댓글 시스템에 접속하였습니다.');

  // 새로운 댓글을 받았을 때 동작할 이벤트 리스너
  socket.on('newComment', (comment) => {
    // 댓글을 저장하고, 저장된 댓글을 포함하여 모든 클라이언트에게 브로드캐스팅
    // 예를 들어, 데이터베이스에 댓글을 저장하는 코드를 작성할 수 있습니다.
    io.emit('commentBroadcast', comment);
  });

  // 클라이언트가 연결을 끊었을 때 동작할 이벤트 리스너
  socket.on('disconnect', () => {
    console.log('댓글 시스템 접속이 끊어졌습니다.');
  });
});

http.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위의 코드는 Express.js를 사용하여 정적 파일을 제공하고, Socket.io를 설정하는 기본적인 서버 코드입니다. connection 이벤트 리스너에서는 클라이언트의 접속과 연결을 처리하고, newComment 이벤트 리스너에서는 새로운 댓글을 받아서 저장하고 클라이언트에게 브로드캐스팅합니다. disconnect 이벤트 리스너에서는 클라이언트의 연결이 끊길 때 처리합니다.

이제 클라이언트 측의 코드를 작성해야 합니다. HTML 파일에서 Socket.io 클라이언트 라이브러리를 가져온 다음, JavaScript 파일에서 Socket.io에 연결하고 newComment 이벤트를 발생시키는 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 댓글 시스템</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>실시간 댓글</h1>
  <input id="commentInput" type="text">
  <button onclick="sendComment()">댓글 작성</button>

  <div id="commentContainer"></div>

  <script src="main.js"></script>
</body>
</html>

const socket = io();

function sendComment() {
  const comment = document.getElementById('commentInput').value;
  // 새로운 댓글을 서버로 전송
  socket.emit('newComment', comment);

  document.getElementById('commentInput').value = '';
}

socket.on('commentBroadcast', (comment) => {
  // 새로운 댓글이 왔을 때 처리할 동작
  const commentElement = document.createElement('p');
  commentElement.textContent = comment;
  document.getElementById('commentContainer').appendChild(commentElement);
});

위의 코드는 댓글을 입력하는 input 요소와 댓글을 출력할 div 요소를 가지는 간단한 HTML 파일입니다. main.js 파일에서는 Socket.io 클라이언트를 초기화하고, sendComment 함수에서 newComment 이벤트를 발생시켜서 서버로 새로운 댓글을 전송합니다. commentBroadcast 이벤트를 수신받으면 화면에 새로운 댓글을 추가합니다.

이제 서버와 클라이언트 코드를 작성했으므로, 서버를 실행하고 웹 브라우저에서 클라이언트를 실행하여 실시간 댓글 시스템을 사용할 수 있습니다.

위의 코드는 단순한 예제일 뿐이며, 실제로는 데이터베이스와의 연동, 인증과 권한 설정 등을 추가로 구현해야 합니다. Socket.io의 기능을 활용하여 실시간 댓글 시스템을 보다 강력하게 구현할 수 있습니다.