[javascript] Socket.io를 사용하여 실시간 책 독서 플랫폼을 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

Socket.io는 Node.js 기반의 실시간 웹 애플리케이션 개발을 위한 라이브러리입니다. 이를 사용하여 실시간 책 독서 플랫폼을 구현할 수 있습니다. 이 플랫폼은 여러 사용자가 동시에 독서를 하고 페이지를 공유하며 소통할 수 있는 기능을 제공합니다. 아래는 Socket.io를 사용하여 실시간 책 독서 플랫폼을 구현하는 간단한 예제 코드입니다.

먼저, Node.js와 Express를 사용하여 웹 서버를 설정합니다.

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

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('A user connected');
  
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
  
  socket.on('pageChange', (pageNumber) => {
    console.log('Page changed to ' + pageNumber);
    // 해당 페이지를 다른 사용자에게 전달
    socket.broadcast.emit('pageChange', pageNumber);
  });
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

위 코드는 웹 서버를 설정하고 Socket.io를 초기화합니다. 사용자가 페이지를 변경할 때마다 pageChange 이벤트가 발생하며, 해당 이벤트를 다른 모든 소켓에게 전송하여 페이지 변경을 동기화합니다.

이제 클라이언트 측에서 해당 이벤트를 처리해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 책 독서 플랫폼</title>
</head>
<body>
  <h1>책 독서 플랫폼</h1>
  
  <div id="page"></div>
  
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    
    socket.on('connect', () => {
      console.log('Connected to server');
    });
    
    socket.on('disconnect', () => {
      console.log('Disconnected from server');
    });
    
    socket.on('pageChange', (pageNumber) => {
      console.log('Page changed to ' + pageNumber);
      // 페이지를 동적으로 업데이트
      document.getElementById('page').innerText = '현재 페이지: ' + pageNumber;
    });
  </script>
</body>
</html>

클라이언트 측 코드는 Socket.io 클라이언트 라이브러리를 가져와 소켓에 연결하고, pageChange 이벤트를 처리하는 코드를 포함합니다. 이벤트가 발생할 때마다 페이지를 동적으로 업데이트하여 사용자에게 실시간 페이지 변경을 보여줍니다.

이제 서버를 실행하고 웹 브라우저에서 해당 페이지에 접속하면, 여러 사용자가 동시에 페이지를 변경하고 실시간으로 업데이트되는 책 독서 플랫폼을 확인할 수 있습니다.

이 예제는 Socket.io를 사용하여 실시간 책 독서 플랫폼을 구현하는 간단한 방법을 보여줍니다. 더 복잡한 기능을 구현하려면 추가적인 로직을 구현해야 할 수도 있습니다. Socket.io의 공식 문서와 예제를 확인하면 좀 더 심화적인 사용법을 익힐 수 있습니다.