[javascript] 웹 소켓을 활용한 실시간 탁구 경기 스코어 표시

15 Dec 2023

javascript

탁구 경기의 실시간 스코어를 표시할 수 있는 간단한 예제를 웹 소켓을 활용하여 구현해 보겠습니다. 웹 소켓을 사용하면 서버와 클라이언트 간의 양방향 통신이 가능하며, 데이터를 실시간으로 주고받을 수 있습니다.

서버 측 구현

서버 측에서는 Node.js와 ws 모듈을 사용하여 간단한 웹 소켓 서버를 설정할 수 있습니다. 아래는 간단한 예제 코드입니다.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

클라이언트 측 구현

클라이언트 측에서는 웹 소켓을 통해 서버와 연결하고, 스코어를 실시간으로 업데이트하는 기능을 구현할 수 있습니다.

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function () {
  console.log('Connected to the server');
};

ws.onmessage = function (event) {
  const score = JSON.parse(event.data);
  updateScore(score);
};

function updateScore(score) {
  // 스코어 업데이트 로직 구현
}

위의 예제 코드에서 updateScore 함수는 서버로부터 받은 스코어를 이용하여 화면에 표시하는 로직을 구현할 수 있습니다.

이제, 이러한 구현으로 실시간 탁구 경기의 스코어를 표시할 수 있는 솔루션을 개발할 수 있게 되었습니다.

서버 측 구현

클라이언트 측 구현

참고 자료