代码之家 › 专栏 › 技术社区 › Ras

如何在不必手动刷新浏览器的情况下,将随机数据从服务器持续更新到web客户端?

real-time socket.io express node.js javascript

Ras · 技术社区 · 7 年前

我有来自服务器的随机数据,希望在不刷新浏览器的情况下将其发送到web客户端。我使用web framework express。js和模板引擎pug。js,插座。io和jquery。

代码如下:

应用程序。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;

路由器/索引。js公司

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

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

module.exports = router;

视图/布局。帕格犬

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

视图/索引。帕格犬

extends layout

block content
  #random1
  #random2

对于上面的所有代码,如果我运行express server,那么变量randomNum会自动生成随机数,并使用套接字发送它。发射到视图/布局。并将其传递给html div。它工作得很好,但在那之后一切都没有改变。

现在我尝试在应用程序中使用setInterval 5秒。js公司

// app.js
...

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

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

...

如果我运行express server并导航到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);

...

1 回复 | 直到 7 年前

Jaromanda X 7 年前

您不能只更改另一个名为 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;