You create a normal express server.
one route to display the html
one route to stream data from the server. (push on custom event)
exemple to push event from the server
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.sendFile(__dirname+'/index.html');
})
app.get('/stream', function (req, res) {
res.writeHead(200, {
'Content-Type': 'application/octet-stream'
});
var i = setInterval(() => res.write('salut'), 1000);
setTimeout(() => {
clearInterval(i);
res.end();
}, 5000)
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
exemple to read events from the browser
<!doctype html>
<html>
<head>
<title>Exemple</title>
</head>
<body>
<p>Open console to see data</p>
</body>
<script>
var xhr = new XMLHttpRequest(),
method = 'GET',
url = 'http://localhost:3000/stream';
xhr.open(method, url, true);
xhr.onprogress = function (event) {
console.log(event.loaded + " / " + event.total);
};
xhr.seenBytes = 0;
xhr.onreadystatechange = function () {
console.log("state change.. state: " + xhr.readyState);
if (xhr.readyState == 3) {
var newData = xhr.response.substr(xhr.seenBytes);
console.log("newData: " + newData + "");
document.body.innerHTML += "New data: " + newData + "<br />";
xhr.seenBytes = xhr.responseText.length;
console.log("seenBytes: " + xhr.seenBytes);
}
};
xhr.send();
</script>
</html>