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

Я пытаюсь повторно отобразить свой шаблон мопса через 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);

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.

Сервер.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)
            });

person NomNomNom    schedule 09.02.2017    source источник
comment
Вам не нужно обновлять index.pug, а достаточно обновить страницу с данными, отправленными клиенту через socket.io   -  person mk12ok    schedule 10.02.2017
comment
Под обновлением страницы вы имеете в виду, что я обновляю index.pug? Я не совсем понимаю, что делать с данными, которые поступают на страницу через socket.on(), console.log(data) печатает это нормально, но я не знаю, как передать эти данные в переменную pug . р = данные   -  person NomNomNom    schedule 10.02.2017
comment
Я имею в виду, что вы можете обновить страницу с помощью манипуляций с DOM с помощью простого javascript или jquery. Насколько я понимаю, вы будете отправлять массивы с результатами mysql-запросов. Вы можете легко отобразить данные на странице несколькими способами. Пожалуйста, покажите html-код вашей страницы, и мы сможем над этим поработать.   -  person mk12ok    schedule 10.02.2017


Ответы (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;
      });
person mk12ok    schedule 10.02.2017