如何在不手动刷新浏览器的情况下连续更新从服务器到 Web 客户端的随机数据？

Question

我有来自服务器的随机数据，想在不刷新浏览器的情况下将其发送到 Web 客户端。我将 Web 框架 express.js 与模板引擎 pug.js、socket.io 和 jquery.

一起使用

这是代码：

app.js

var express = require('express');
var socket_io = require('socket.io');
var app = express();
var io = socket_io();
app.io = io;

var randomNum = Math.random();
var randomNum2 = Math.random();

var data = [
   {
      random1: randomNum,
      random2: randomNum2
   }
]

io.on('connection', (socket) => {
   socket.emit('random', data);
});

module.exports = app;

routers/index.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('index');
});

module.exports = router;

views/layout.哈巴狗

doctype html
html
  head
    title= title
    script(src="//code.jquery.com/jquery-1.11.2.min.js")
    script(src="//code.jquery.com/jquery-migrate-1.2.1.min.js")
    script(src='js/socket.io.js')
  body
    block content
    script(type='text/javascript').
      $(document).ready(function() {
        var socket = io();

        socket.on('connect', onConnect);
        function onConnect() {
            console.log('socket connected');
        }

        socket.on('random', function(data) {
          for(var keys in data) {
            $('#random1').html(`<div>random1: ${data[keys].random1}</div>`);
            $('#random2').html(`<div>random2: ${data[keys].random2}</div>`);
          }
        });
      });

views/index.哈巴狗

extends layout

block content
  #random1
  #random2

对于上面的所有代码，如果我运行表示服务器然后变量 randomNum 自动生成随机数并使用 socket.emit 将其发送到 views/layout.pug 并将其传递给 html div。它工作正常，但之后没有任何改变。

现在我尝试在 app.js

中使用 setInterval 5 秒

// app.js
...

setInterval(() => {
   var randomNum = Math.random();
   var randomNum2 = Math.random();

   var data = [
      {
         random1: randomNum,
         random2: randomNum2
      }
   ]
}, 5000);  

...

如果我运行表达服务器并导航到网络浏览器，随机数第一次自动生成，然后我等待了将近 20 秒，没有任何变化。我必须手动刷新浏览器才能更改值。

是setInterval有问题还是我放错地方了？

谁能帮我在不刷新浏览器的情况下自动更改号码？

非常感谢。

已编辑

// app.js
...

setInterval(() => {
  var randomNum = Math.random();
  var randomNum2 = Math.random();

  var data = [
      {
          random1: randomNum,
          random2: randomNum2
      }
  ]

  io.on('connection', (socket) => {
      socket.emit('random', data);
  });
}, 5000);

...

Answer 1

你不能只更改一个名为 data 的不同变量（不同范围）并期望回调中的函数像 javascript 一样执行 "knows what you want to do"

不过，您的代码很接近

我想你想要这样的东西

var express = require('express');
var socket_io = require('socket.io');
var app = express();
var io = socket_io();
app.io = io;

var randomNum = Math.random();
var randomNum2 = Math.random();

var data = [
   {
      random1: randomNum,
      random2: randomNum2
   }
]

io.on('connection', (socket) => {
   socket.emit('random', data); // on connection, everyone gets exactly the same global one-time random data
   setInterval(() => { // every 5 seconds, each client gets different random data
       var randomNum = Math.random();
       var randomNum2 = Math.random();

       var data = [
          {
             random1: randomNum,
             random2: randomNum2
          }
       ]
       socket.emit('random', data);
    }, 5000);  
});
module.exports = app;

好吧，这肯定是糟糕的代码......除非你希望每个人都获得相同的第一个随机数据

const express = require('express');
const socket_io = require('socket.io');
const app = express();
const io = socket_io();
app.io = io;

io.on('connection', socket => {
    const sendRandomData = () => {
        const random1 = Math.random();
        const random2 = Math.random();

        const data = [{random1,random2}];
        socket.emit('random', data);
    };
   sendRandomData();
   setInterval(sendRandomData, 5000);  
});
module.exports = app;

如何在不手动刷新浏览器的情况下连续更新从服务器到 Web 客户端的随机数据？

How to continuously update random data from server to web client without must manually refresh browser?

javascript

real-time

node.js

express

socket.io