[javascript] Socket.io를 사용하여 실시간 타임라인을 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

Socket.io는 실시간 양방향 통신을 제공하는 JavaScript 라이브러리입니다. 이를 활용하여 실시간으로 업데이트되는 타임라인을 구현할 수 있습니다.

Socket.io 설치하기 먼저, 프로젝트 폴더에서 다음 명령어를 사용하여 Socket.io를 설치합니다.
```
npm install socket.io
```
서버 측 코드 구현하기 타임라인 데이터 업데이트를 처리할 서버 측 코드를 작성합니다. 예를 들어, Express.js와 함께 사용하는 경우 다음과 같이 구현할 수 있습니다.

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

// 클라이언트 연결 시 처리
io.on('connection', (socket) => {

  // 타임라인 데이터 업데이트 시 처리
  socket.on('updateTimeline', (data) => {
    // 업데이트된 데이터 처리 로직 작성
    // 타임라인 데이터를 클라이언트에게 전송
    socket.broadcast.emit('timelineUpdated', newData);
  });

});

// 서버 기동
server.listen(3000, () => {
  console.log('Server running on port 3000');
});

이 예제에서는 클라이언트와 서버 간에 소켓 연결이 수립되면 connection 이벤트가 발생하고, 클라이언트에서 updateTimeline 이벤트를 수신하면 해당 데이터를 다른 클라이언트에게 timelineUpdated 이벤트로 전송합니다.

클라이언트 측 코드 구현하기 클라이언트 측에서도 Socket.io를 사용하여 서버와의 실시간 통신을 처리해야합니다. 다음은 클라이언트에서 코드를 구현하는 방법입니다.

<!DOCTYPE html>
<html>

<head>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 서버와 소켓 연결
    const socket = io();

    // 타임라인 업데이트 이벤트 수신
    socket.on('timelineUpdated', (data) => {
      // 업데이트된 데이터를 처리하는 로직 작성
      console.log('Timeline updated:', data);
    });

    // 타임라인 업데이트 함수
    function updateTimeline(data) {
      socket.emit('updateTimeline', data);
    }
  </script>
</head>

<body>
  <!-- 타임라인 내용 표시 -->
</body>

</html>

클라이언트에서는 socket.io.js를 로드하고, io() 함수를 호출하여 서버와 소켓 연결을 수행합니다. 그리고 timelineUpdated 이벤트를 수신하여 업데이트된 데이터를 처리할 수 있습니다. 타임라인을 업데이트할 때는 updateTimeline 함수를 호출하여 서버에 업데이트된 데이터를 전송합니다.

이제 Socket.io를 사용하여 실시간 타임라인을 구현하는 방법을 알았습니다. 실시간으로 업데이트되는 타임라인을 구현하기 위해 서버와 클라이언트 간에 Socket.io를 사용하는 프로젝트를 시작해보세요!