Socket.io를 사용하여 실시간 스포츠 스코어 보드 구현하기

실시간 스포츠 스코어 보드를 구현하기 위해 Socket.io를 사용할 수 있습니다. Socket.io는 실시간 양방향 통신을 가능하게 해주는 JavaScript 라이브러리입니다.

Socket.io 설치하기

먼저, 프로젝트 폴더에서 다음 명령어를 사용하여 Socket.io를 설치하세요.

$ npm install socket.io

서버 구현하기

서버 측에서 Socket.io를 사용하여 실시간 스코어를 업데이트할 수 있습니다. 다음은 서버 구현의 예시입니다.

const http = require('http');
const socketIo = require('socket.io');

const server = http.createServer();
const io = socketIo(server);

let currentScore = 0;

io.on('connection', (socket) => {
  console.log('새로운 클라이언트 연결됨');

  // 클라이언트로부터 스코어 업데이트 요청을 받았을 경우
  socket.on('update score', (score) => {
    currentScore = score;

    // 업데이트된 스코어를 모든 클라이언트에게 전송
    io.emit('score updated', currentScore);
  });

  // 클라이언트 연결이 끊겼을 경우
  socket.on('disconnect', () => {
    console.log('클라이언트 연결 해제됨');
  });
});

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

위 예제에서는 클라이언트로부터 update score 이벤트로 스코어 업데이트 요청을 받고, 업데이트된 스코어를 score updated 이벤트로 모든 클라이언트에게 전송합니다.

클라이언트 구현하기

클라이언트 측에서도 Socket.io를 사용하여 서버로부터 스코어 업데이트를 실시간으로 받아올 수 있습니다. 다음은 클라이언트 구현의 예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
  </head>
  <body>
    <h1>스포츠 스코어 보드</h1>
    <div id="score-container">
      현재 스코어: <span id="current-score">0</span>
    </div>

    <script>
      const socket = io();

      // 서버로부터 스코어 업데이트를 받았을 경우
      socket.on('score updated', (score) => {
        document.getElementById('current-score').textContent = score;
      });
    </script>
  </body>
</html>

위 예제에서는 Socket.io 클라이언트 스크립트를 HTML 파일에 포함시키고, 서버로부터 받은 업데이트된 스코어를 화면에 출력합니다.

실행하기

서버 파일과 클라이언트 HTML 파일을 준비한 뒤, 다음 순서로 실행해보세요.

터미널에서 서버 파일이 있는 디렉토리로 이동하여 $ node server.js 명령어를 실행합니다.
웹 브라우저에서 클라이언트 HTML 파일을 엽니다.
서버와 클라이언트의 연결이 성공하면, 스코어를 업데이트하고 변경된 스코어가 실시간으로 클라이언트에 반영됩니다.

이제 Socket.io를 사용하여 실시간 스포츠 스코어 보드를 구현할 수 있습니다!

Socket.io를 사용하여 실시간 스포츠 스코어 보드 구현하기

Socket.io 설치하기

서버 구현하기

클라이언트 구현하기

실행하기

참고 자료