[javascript] 자바스크립트 웹 소켓을 이용한 실시간 투표 시스템

15 Dec 2023

javascript

인터넷에서 실시간으로 투표를 할 수 있는 웹 애플리케이션을 개발하려면 웹 소켓을 사용하면 효율적인 방법이 될 것입니다. 웹 소켓은 클라이언트와 서버 간 양방향 통신을 가능케 하는 프로토콜로, 실시간 데이터 전송에 특히 유용합니다. 이번 글에서는 자바스크립트와 웹 소켓을 활용하여 실시간 투표 시스템을 구축하는 방법에 대해 알아보겠습니다.

목표

우리의 목표는 웹 소켓을 사용하여 사용자가 투표를 하면 실시간으로 결과를 반영하는 투표 시스템을 만드는 것입니다.

기술 스택

Frontend: HTML, CSS, JavaScript
Backend: Node.js, WebSocket (ws 라이브러리 사용)

구현

1. 서버 셋업

먼저 Node.js로 간단한 웹 서버를 설정합니다. 여기서는 Express 프레임워크를 사용하여 간단히 구현했습니다.

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

2. 투표 기능 구현

우리의 투표 시스템은 간단하게 ‘예’ 또는 ‘아니요’에 대한 투표를 받는 것으로 가정합니다. 사용자가 ‘예’ 또는 ‘아니요’를 선택하면, 해당 선택지에 대한 투표가 증가하고 이를 다른 사용자들에게 실시간으로 반영해야 합니다.

let yesVotes = 0;
let noVotes = 0;

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    if (message === 'yes') {
      yesVotes++;
    } else if (message === 'no') {
      noVotes++;
    }
    // 실시간으로 투표 결과를 모든 클라이언트에 전송
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify({ yesVotes, noVotes }));
      }
    });
  });
});

3. 클라이언트 셋업

클라이언트에서는 간단한 HTML과 JavaScript를 사용하여 투표 기능을 구현합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 투표 시스템</title>
</head>
<body>
  <h1>실시간 투표 시스템</h1>
  <button id="yesButton">예</button>
  <button id="noButton">아니요</button>
  
  <script>
    const ws = new WebSocket('ws://localhost:8080');
    
    ws.onmessage = function(event) {
      const data = JSON.parse(event.data);
      // 받은 데이터를 화면에 업데이트
      console.log('받은 투표 결과:', data);
    };
    
    document.getElementById('yesButton').addEventListener('click', function() {
      ws.send('yes');
    });
    
    document.getElementById('noButton').addEventListener('click', function() {
      ws.send('no');
    });
  </script>
</body>
</html>

위의 코드는 웹 소켓을 사용하여 실시간으로 투표 결과를 업데이트하는 간단한 예시입니다. 클라이언트에서 ‘예’ 또는 ‘아니요’ 버튼을 클릭하면 해당 정보가 서버로 전송되고, 서버에서는 모든 클라이언트들에게 투표 결과를 실시간으로 전송합니다.

이제, 단순화된 예제를 확장하여 실제로 사용 가능한 실시간 투표 시스템을 만들 수 있을 것입니다.

결론

웹 소켓을 이용하여 실시간으로 데이터를 전송하는 방법을 알아보았습니다. 이를 통해 실시간으로 업데이트되는 투표 시스템을 구축할 수 있으며, 실시간으로 데이터를 주고받아야 하는 다른 유스케이스에도 응용할 수 있습니다.