How to change the page I am serving in node.js
Ok so I have server.js
var express = require("express"),
app = express(),
bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/'));
app.post('/message', function(req, res) {
var jsonData = req.body;
if (jsonData.hasOwnProperty('phone1')) {
console.log("Phone 1 is connected to", jsonData.phone1.connection,
"and has a downlink speed of", jsonData.phone1.dl, "Mbps");
} else
if (jsonData.hasOwnProperty('phone2')) {
console.log("Phone 2 is connected to", jsonData.phone2.connection,
"and has a downlink speed of", jsonData.phone2.dl, "Mbps");
}
});
var port = 1337;
app.listen(port);
console.log("Running at Port " + port);
and as you can see I want to do something when the server receives something in a message / message. I can console.log things yes, but I want to change things on the webpage served by this server. POST requests come from a different server. This server only presents them.
How can I do this without refreshing the page?
I am also using AngularJS on the client side, so any client side way of collecting JSON data would be nice.
I hope to present data in my Highcharts and Charts, but a simple text update on a page element (for example <p id="example">
) will do a great job answering this question.
I know I can get jquery for node, but I am still missing the window element to control the presented data. NW.js might do exactly what I want, but I haven't tried it yet, but I suspect there might be another solution to this problem.
source to share
Since I only need to send data from the server to the client, I ended up with Server Sent Events (SSE) and my code looks like this on the server side:
var mypage;
app.get('/connect', function(req, res){
res.writeHead(200, {
'Connection': 'keep-alive',
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache'
});
mypage = res;
});
app.post('/message', function(req, res) {
if (mypage !== undefined) {
mypage.write('data: '+ JSON.stringify( req.body ) +'\n\n');
}
});
and on the client side:
$(function () {
var server = new EventSource('/connect'),
point1 = $("#gauge1").highcharts().series[0].points[0],
point2 = $("#gauge2").highcharts().series[0].points[0];
server.onmessage = function(e) {
var jsonData = JSON.parse(e.data);
if (jsonData.hasOwnProperty('phone1')) {
point1.update(parseInt(jsonData.phone1.dl));
if (jsonData.phone1.connection === "3G") {
/* extra functionality */
} else {
/* extra functionality */
}
} else
if (jsonData.hasOwnProperty('phone2')) {
point2.update(parseInt(jsonData.phone2.dl));
if (jsonData.phone2.connection === "3G") {
/* extra functionality */
} else {
/* extra functionality */
}
}
};
});
I got more help from my other question regarding SSE data formatting
Node Webkit was not the answer to my problem as it won't launch in the browser.
I still have problems receiving many messages. I generate every 0.5s of a message, but I keep getting 5 messages, then nothing for 2 minutes, and then 5 messages. I don't know why this is happening, but this is not part of the problem, so I'll post another question.
source to share
If you want to push new content to the client (opposite the stream for the client requesting data from the server), WebSockets is an option (see http://socket.io/ for the shared library).
Alternatively, you can set up a long polling on the client side. It is using JavaScript to periodically "poll" the server for information using setInterval
or a similar approach.
source to share