Question

我有三个名为index.html，result.html和app.js的文件。我可以点击按钮发出数据并打印在服务器上，但我无法获得result.html上的值。我在这里缺少什么？

更新：我正在努力做这件事：recordit.co/peXqfcU7pi。由于@jfriend00澄清了原始问题的过程。我现在问我在实时投票系统中需要什么，就像在录制的屏幕上一样？

UPDATE-2 我想制作实时投票系统。当用户投票时，结果页面将同时更新。从@jfriend00的描述我得到了这个想法，我想我需要使用SPA。但是，我正在寻找最佳实践。

index.html

var socket = io();
    new Vue({
      el: "#points",
      data: {
        points: [0, 1, 2, 3, 4, 5, 6, 7, 8]
      },
      methods: {
        sendPoint(point) {
          socket.emit('clientEvent', point)
        }
      }
    });

app.js中的

    app.get('/result', function(req, res) {
    res.sendFile(__dirname + '/result.html');
});

io.on('connection', function(socket) {

    socket.on('clientEvent', function(data){
        console.log(data);
        socket.emit('clientEvent', data)
    });

    socket.on('disconnect', function() {
        console.log('A user disconnected');
    });
});

result.html

var socket = io();
socket.on('clientEvent', function (data){
      console.log(data);

Answer 1

从逻辑上思考这个问题。

您的浏览器加载index.html。
您点击按钮。
index.html中的代码执行socket.emit('clientEvent', point)将数据发送到服务器。
服务器接收clientEvent和point数据。
服务器将clientEvent和point数据发送回同一个socket.io连接。
消息返回index.html中的socket.io连接。

此类型的消息始终未发送到result.html页面。当该页面加载到浏览器中时，它将是一个全新的socket.io连接，并且没有数据从服务器发送到该连接。

由于您在向服务器发送数据时加载的页面为index.html，因此在result.html为result.html时，您不清楚您期望发生什么，或者您要解决的问题是什么？加载一段时间后。通过对实际预期结果的更多描述，我们可以更具体地帮助，但上面的描述解释了为什么没有数据发送到newTotal。

修改后的问题的信息。

这是基本过程：

处理来电投票或ajax电话（您选择如何投票）。
添加到基于服务器的总计。
使用io.emit('newTotal', data)通过socket.io向所有连接的客户端广播newTotal消息更新。
在result.html页面（或任何希望显示当前投票总数的页面）中，收听results.html消息，当您收到该消息时，请在页面的HTML中更新显示的总计
当请求{{1}}页面时，请在发送HTML之前填写当前总数（模板引擎可以轻松实现）。

如何在快速的'不同路径中获取套接字发出的数据？

1 个答案: