Question

我想使用socket.io将随机数据从服务器发送到Web浏览器，成功发送随机数据，它看起来效果很好。但问题是，如果我尝试刷新浏览器，我会在setInterval上设置发送随机数据1秒钟。所以随机数据每秒产生1个数组，但是如果我刷新浏览器，随机数据会在1秒内产生更多。

我使用Jaromanda X代码从here

解决了以前的问题

app.js

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);
        console.log(data);
    };
    sendRandomData();
    setInterval(sendRandomData, 1000);  
});

module.exports = app;

视图/ layout.pug

doctype html
html
  head
    title= title
    script(src='js/socket.io.js')
  body
    block content
    script(type='text/javascript').
      $(document).ready(function() {
        var socket = io();
        socket.on('connect');

        socket.on('random', function(data) {
          // do something
        });
      });

运行上面的代码时会出现这种结果：

// normal result without refresh
// generate 3 arrays in 3 seconds (1 array per second)    
[ { random1: 0.3470581717757999, random2: 0.3556736679398742 } ]
[ { random1: 0.06514301754146756, random2: 0.31503780514784774 } ]
[ { random1: 0.23783576682568897, random2: 0.6365470660777426 } ]    

// first browser refresh
// generate 6 arrays in 3 seconds (2 array per second)
[ { random1: 0.45233879122186105, random2: 0.5948030171052519 } ]
[ { random1: 0.5712814090228653, random2: 0.21284004439815907 } ]
[ { random1: 0.12810844234492702, random2: 0.33407477504351646 } ]
[ { random1: 0.15589486794947982, random2: 0.9546592980292927 } ]
[ { random1: 0.7473454659432477, random2: 0.6056724392777655 } ]
[ { random1: 0.711512433048445, random2: 0.13648116937632548 } ]

如果我进行第二次刷新，阵列比第一次刷新生成得快，我无法计算每秒有多少数组。

如果刷新浏览器，数组仍然每秒生成1个数组？

更新

app.js

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

var clients = {};
io.on('connection', socket => {
    clients[socket.id] = socket;
    console.log('connected : ' + socket.id);

    socket.on('disconnect', (data) => {
        delete clients[socket.id]; 
        clearInterval(interval);
        console.log('disconnected : ' + socket.id);
    });

  const sendRandomData = () => {
      const random1 = Math.random();
      const random2 = Math.random();

      const data = [{random1,random2}];
      socket.emit('random', data);
      console.log(data);
  };
  sendRandomData();
  const interval = setInterval(sendRandomData, 1000);  
});

module.exports = app;

视图/ layout.pug

doctype html
html
  head
    title= title
    script(src='js/socket.io.js')
  body
    block content
    script(type='text/javascript').
      $(document).ready(function() {
        var socket = io();
        socket.on('connect');

        socket.on('disconnect', function () {
          socket.disconnect();
          console.log("client disconnected");
        });

        socket.on('random', function(data) {
          // do something
        });
      });

感谢Luca更新代码，我尝试将setInterval分配给变量并在断开连接后取消间隔并且它可以工作，但是如果我同时打开另一个选项卡或浏览器并尝试刷新它，随机数据在1秒内再次生成更多数组。

任何人都可以帮助我？

Javascript - Socket.io - 如果浏览器刷新，随机数据会产生更多

0 个答案: