Я пытаюсь переделать шаблон мопса через setInterval(). Это возможно?

Question

Я пытаюсь переделать шаблон мопса через setInterval().

Я пытаюсь показать данные на живом экране страницы с сервера MySQL. Я могу получить данные на странице, но я не знаю, как обновлять данные, не обновляя всю страницу.

Я попытался реализовать AJAX, а также попытался сделать это через socket.io, но не смог отправить данные в шаблон мопса для обеих попыток.

Server.js

var express = require('express'); 
var app = express(); 
var http = require('http'); 
var server = http.createServer(app); 
var pug = require('pug'); 
var io = require('socket.io').listen(server); 
var clients = []; 
var outsideData = require('./public/data.js'); 

app.set('views', __dirname + '/views'); 
app.set('view engine', 'pug'); 
app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res) { 
    res.render('index.pug', { 
     data: outsideData.getData() 
    }); 
}); 

io.sockets.on('connect', function() { 
    clients.push(io.sockets); 
    console.log("connected"); 
}); 

//Recompile Pug Template 
function recompile() { 
    var pug = require('pug'); 
    var template = require('fs').readFileSync('./views/index.pug', 'utf8'); 
    var pugFn = pug.compile(template, { 
     filename: './views/index.pug', 
     pretty: true 
    }); 
    var renderedTemplate = pugFn({ 
     data: outsideData.getData() 
    }); 
} 

//Send data every second. 
setInterval(function() { 
    for (i = 0; i < clients.length; i++) { 
     recompile(); 
     clients[i].emit('data', outsideData.getData()); 
    } 
}, 30000); 

//Handle diconnected clients. 
io.sockets.on('disconnect', function() { 
    var index = clients.indexOf(io.socket); 
    if (index != -1) { 
     clients.splice(index, 1); 
    } 
}); 

server.listen(3001); 

index.pug

doctype html 
html 
    head 
     title Socket Communication 
     script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js') 
     script(src="/socket.io/socket.io.js") 
     //script(src="client.js") 
     var socket = io.connect(); 
     socket.on('data', function(data) { 
      var myData = $('myData'); 
      console.log(data) 
     }); 
    body 
     h1= "Help me..." 
     p= JSON.stringify(data) 

Update: Вот изменения, которые работает. Спасибо, mk12ok.

Server.js

var express = require('express'); 
var app = express(); 
var http = require('http'); 
var server = http.createServer(app); 
var pug = require('pug'); 
var io = require('socket.io').listen(server); 
var clients = []; 
var outsideData = require('./public/data.js'); 

app.set('views', __dirname + '/views'); 
app.set('view engine', 'pug'); 
app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res) { 
    res.render('index.pug'); 
}); 

io.sockets.on('connect', function() { 
    clients.push(io.sockets); 
    console.log("connected"); 
}); 

//Send data every second. 
setInterval(function() { 
    for (i = 0; i < clients.length; i++) { 
     clients[i].emit('data', outsideData.getData()); 
    } 
}, 1000); 

//Handle diconnected clients. 
io.sockets.on('disconnect', function() { 
    var index = clients.indexOf(io.socket); 
    if (index != -1) { 
     clients.splice(index, 1); 
    } 
}); 

server.listen(3001); 

index.pug

doctype html 
html 
    head 
     title Socket Communication 
     script(src="/socket.io/socket.io.js") 
     //script(src="client.js") 
    body 
     h1= "Help me..." 
     p(id="data") 
     script. 
      var socket = io.connect(); 
      socket.on('data', function(data) { 
       //Replace JSON.stringify(data) with JSON.stringify(data.tag) to retrieve a specific value stored in your JSON data. 
       document.getElementById("data").innerHTML = "Received" + JSON.stringify(data); 
       console.log(data) 
      }); 

Answer 1

Вместо повторного рендеринга мопс файл, который вы можете попробовать это:

сервера (очень тот же код) :

const express = require('express'); 
const app = express(); 
const http = require('http').Server(app); 
const io = require('socket.io')(http); 
const pug = require('pug'); 

app.set('views', __dirname + '/views'); 
app.set('view engine', 'pug'); 
app.get('/', function(req, res) { 
    res.render('index.pug'); 
}); 

setInterval(function() { 
    io.emit('data', 'random number: ' + Math.random().toString()); 
}, 1000); 

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

http.listen(3001, function(){ 
    console.log('listening on *:3001'); 
}); 

и пример из index.pug:

doctype html 
html 
    head 
    title Testing socket.io 
    body 
    h1 Testing socket.io 
    br 
    h3(id="status") not connected 
    br 
    p(id="data") 
    script(src="/socket.io/socket.io.js") 
    script. 
     var socket = io(); 

     socket.on('connect', function() { 
     document.getElementById("status").innerHTML = "connected"; 
     }); 

     socket.on('data', function(data) { 
     document.getElementById("data").innerHTML = "Received " + data; 
     });