Colin's Blog
[javascript] Socket.io를 사용하여 실시간 투표 시스템을 어떻게 구현할 수 있나요?

Socket.io는 JavaScript를 사용하여 웹 소켓 통신을 구현하는 라이브러리입니다. 이를 사용하면 실시간으로 데이터를 주고받을 수 있으며, 실시간으로 업데이트되는 투표 시스템을 구현할 수 있습니다.

다음은 Socket.io를 사용하여 실시간 투표 시스템을 구현하는 간단한 예제 코드입니다:

  1. 서버 측 코드: ```javascript const app = require(‘express’)(); const http = require(‘http’).Server(app); const io = require(‘socket.io’)(http);

// 사용자들의 투표 결과를 저장할 객체 let votes = {};

io.on(‘connection’, (socket) => { console.log(‘새로운 사용자가 연결되었습니다.’);

// 클라이언트가 투표를 요청했을 때 socket.on(‘vote’, (option) => { votes[socket.id] = option; // 투표를 저장 io.emit(‘updateVotes’, votes); // 모든 클라이언트에게 투표 결과 업데이트 알림 });

// 클라이언트가 연결을 끊었을 때 socket.on(‘disconnect’, () => { delete votes[socket.id]; // 투표 정보 삭제 io.emit(‘updateVotes’, votes); // 모든 클라이언트에게 투표 결과 업데이트 알림 console.log(‘사용자가 연결을 끊었습니다.’); }); });

http.listen(3000, () => { console.log(‘서버가 시작되었습니다.’); });


2. 클라이언트 측 코드:
```javascript
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  // 투표 이벤트 핸들러
  function vote(option) {
    socket.emit('vote', option); // 서버에 투표 정보 전송
  }

  // 투표 결과 업데이트 이벤트 핸들러
  socket.on('updateVotes', (votes) => {
    // 투표 결과를 화면에 업데이트
    // 예시: document.getElementById('result').innerText = JSON.stringify(votes);
  });
</script>

위의 코드는 클라이언트가 투표를 하면 서버가 투표 정보를 받아서 저장하고, 다른 모든 클라이언트에 투표 결과를 알리는 간단한 실시간 투표 시스템을 구현한 예제입니다.

이 예제 코드를 사용하여 Socket.io를 통해 실시간 투표 시스템을 구현할 수 있습니다. 참고로, 예제 코드는 간단한 형태로 작성되었으므로 실제 프로덕션 환경에서 적용할 때는 보안 이슈를 고려하고 적절한 에러 처리를 신경써야 합니다.

참고문서:

© 2018 Colin. All rights reserved.