Я пытаюсь повторно отобразить свой шаблон мопса через 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)
});
index.pug
, а достаточно обновить страницу с данными, отправленными клиенту черезsocket.io
- person mk12ok   schedule 10.02.2017