javascript - 我正在尝试通过 setInterval() 重新呈现我的哈巴狗模板。这可能吗？

Question

我正在尝试通过 setInterval() 重新渲染我的哈巴狗模板。

我正在尝试让一个页面显示来自 MySQL 服务器的实时数据。我可以将数据获取到页面，但我不知道如何在不刷新整个页面的情况下更新显示的数据。

我尝试过实现 AJAX，也尝试通过 socket.io 来实现，但两次尝试都未能将数据发送到 pug 模板。

服务器.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);

索引.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。

服务器.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);

索引.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

你可以试试这个，而不是重新渲染 pug 文件:

你的服务器(非常相似的代码):

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