javascript - 如何不断地将随机数据从服务器更新到Web客户端而无需手动刷新浏览器？

Question

我有来自服务器的随机数据，希望将其发送到 Web 客户端而不刷新浏览器。 我使用带有模板引擎 pug.js、socket.io 和 jquery 的 Web 框架express.js。

这是代码:

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;

路由器/index.js

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

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

module.exports = router;

View /layout.pug

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>`);
          }
        });
      });

View /index.pug

extends layout

block content
  #random1
  #random2

对于上面的所有代码，如果我运行express服务器，那么变量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);  

...

如果我运行 Express 服务器并导航到 Web 浏览器，则会第一次自动生成随机数，之后我等待了近 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只是“知道你想做什么”

尽管如此，您的代码很接近

我想你想要这样的东西

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;