我试图通过setInterval（）重新渲染我的帕格模板。 这可能吗？
我试图通过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)
更新：这是更改。 谢谢你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) });
而不是重新渲染帕格文件，你可以试试这个：
你的服务器（非常相同的代码）：
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; });