¿Cómo actualizar continuamente los datos aleatorios del servidor al cliente web sin necesidad de actualizar manualmente el navegador?

Tengo datos aleatorios del servidor y deseo enviarlos al cliente web sin actualizar el navegador. Utilizo web framework express.js con el motor de plantillas pug.js, socket.io y jquery.

Este es el código:

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; 

vistas / 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(`
random1: ${data[keys].random1}
`); $('#random2').html(`
random2: ${data[keys].random2}
`); } }); });

vistas / index.pug

 extends layout block content #random1 #random2 

Con todo el código anterior, si ejecuto Express Server, la variable randomNum genera automáticamente un número aleatorio y lo envía usando socket.emit a views / layout.pug y lo pasa a html div. Funciona bien pero después de eso nada cambió.

Ahora trato de usar setInterval 5 segundos en app.js

 // app.js ... setInterval(() => { var randomNum = Math.random(); var randomNum2 = Math.random(); var data = [ { random1: randomNum, random2: randomNum2 } ] }, 5000); ... 

Si ejecuto Express Server y navego al navegador web, el número aleatorio se genera automáticamente por primera vez y después de eso espero casi 20 segundos y nada cambia. Debo actualizar manualmente el navegador para obtener el cambio de valor.

¿Hay algo mal con setInterval o lo puse en el lugar equivocado?

¿Puede alguien ayudarme a hacer que el número cambie automáticamente sin actualizar el navegador?

Muchas gracias.

Editado

 // 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); ... 

no puede simplemente cambiar una variable diferente llamada data (scope diferente) y esperar que una función que está en la callback se ejecute como si javascript simplemente “sabe lo que quiere hacer”

Sin embargo, tu código está cerca.

Creo que quieres algo como esto

 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; 

bueno, eso es un código sucky … a menos que quieras que todos obtengan los mismos primeros datos aleatorios

 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; 
    Intereting Posts