如何在Express不同路由获取Socket.emit数据？实时投票系统开发疑问

Hey there! Let's walk through everything you need to build that real-time voting system you're aiming for—no gaps, just clear, actionable steps based on your original issue and the reference functionality.

1. 先搞定服务器端的Socket.IO核心逻辑 #

First up, your server needs to handle real-time connections, track vote counts, and broadcast updates to all connected clients. Here's how to set it up properly:

• Start by installing dependencies if you haven't already:

  npm install express socket.io
  

• Then write your server code (let's call it server.js):

  const express = require('express');
  const http = require('http');
  const { Server } = require('socket.io');
  
  const app = express();
  const server = http.createServer(app);
  // Configure CORS for development (lock this down to your domain in production!)
  const io = new Server(server, { cors: { origin: "*" } });
  
  // Track vote counts globally (use a database in production to persist data)
  let voteData = { optionA: 0, optionB: 0 };
  // Prevent duplicate votes from the same client
  let votedClients = new Set();
  
  io.on('connection', (socket) => {
    // Send current vote data to new clients immediately on connect
    socket.emit('voteUpdate', voteData);
  
    // Listen for vote submissions from clients
    socket.on('castVote', (selectedOption) => {
      // Only count votes from first-time voters
      if (!votedClients.has(socket.id) && voteData.hasOwnProperty(selectedOption)) {
        voteData[selectedOption]++;
        votedClients.add(socket.id);
        // Broadcast updated counts to EVERY connected client
        io.emit('voteUpdate', voteData);
      }
    });
  });
  
  // Serve your static HTML files
  app.use(express.static('public'));
  
  server.listen(3000, () => console.log('Server running on http://localhost:3000'));
  

• The key here is using io.emit() instead of just socket.emit()—this sends updates to all connected clients, not just the one that voted.

2. 投票页（index.html）的客户端逻辑 #

Your voting page needs to connect to the server and send votes when buttons are clicked. Put this in a public folder (since our server serves static files from there):

<!DOCTYPE html>
<html>
<head>
  <title>Cast Your Vote</title>
</head>
<body>
  <h1>Vote for Your Favorite Option</h1>
  <button id="voteA">Option A</button>
  <button id="voteB">Option B</button>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io('http://localhost:3000');

    // Bind vote buttons to send events to the server
    document.getElementById('voteA').addEventListener('click', () => {
      socket.emit('castVote', 'optionA');
      alert('Your vote has been counted!');
    });

    document.getElementById('voteB').addEventListener('click', () => {
      socket.emit('castVote', 'optionB');
      alert('Your vote has been counted!');
    });
  </script>
</body>
</html>

3. 结果页（result.html）的实时更新（这是你之前遗漏的部分！） #

The big mistake you likely made was not setting up the result page to listen for updates from the server. Here's how to fix that—also put this in the public folder:

<!DOCTYPE html>
<html>
<head>
  <title>Real-Time Vote Results</title>
</head>
<body>
  <h1>Current Vote Results</h1>
  <div>
    <h2>Option A: <span id="countA">0</span> votes</h2>
    <h2>Option B: <span id="countB">0</span> votes</h2>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io('http://localhost:3000');

    // Listen for vote updates from the server and refresh the UI
    socket.on('voteUpdate', (updatedVotes) => {
      document.getElementById('countA').textContent = updatedVotes.optionA;
      document.getElementById('countB').textContent = updatedVotes.optionB;
    });
  </script>
</body>
</html>

• This page connects to the server and subscribes to the voteUpdate event. Every time the server broadcasts new vote counts, the page automatically updates the displayed numbers—no manual refresh needed.

4. 额外的生产环境与体验优化 #

• Persist vote data: Use a database like MongoDB or PostgreSQL instead of in-memory storage, so votes don't disappear when the server restarts.
• Lock down CORS: Replace origin: "*" with your actual frontend domain (e.g., https://your-vote-app.com) to prevent unauthorized connections.
• Add vote validation: Check that the selected option is valid on both client and server sides.
• Handle disconnections: Add client-side logic to show a "reconnecting" message if the server goes down:

  socket.on('disconnect', () => {
    document.body.innerHTML += '<p style="color: red;">Lost connection to server. Reconnecting...</p>';
  });
  

内容的提问来源于stack exchange，提问作者esilik