125 lines
3.0 KiB
HTML
125 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SSE demo</title>
|
|
<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
<style>
|
|
body {
|
|
margin: 4px;
|
|
font: sans-serif;
|
|
}
|
|
|
|
.layout {
|
|
margin: 0 auto;
|
|
/* max-width: 90%; */
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
flex-flow: row;
|
|
}
|
|
|
|
.channel {
|
|
flex: 0 0 98%;
|
|
margin: 10px;
|
|
}
|
|
|
|
.eventlog {
|
|
border: 1px solid #777;
|
|
overflow: scroll;
|
|
max-height: 600px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<!-- <script src="./eventsource.min.js"></script> -->
|
|
</head>
|
|
|
|
<body class='online'>
|
|
<div class="layout">
|
|
|
|
<h1>SSE pubsub for nodeJS</h1>
|
|
|
|
<p>This page connects to two SSE streams, and outputs the events to the log containers below as they are received.</p>
|
|
|
|
<section>
|
|
<div class='channel'>
|
|
<h2>Channel 1</h2>
|
|
<div id="el" class='eventlog' data-channel='ch1'></div>
|
|
</div>
|
|
<!-- <div class='channel'>
|
|
<h2>Channel 2</h2>
|
|
<div class='eventlog' data-channel='ch2'></div>
|
|
</div> -->
|
|
</section>
|
|
<button onclick="postTrack()">Post Subcribe</button>
|
|
</body>
|
|
<!-- <script src='moment.js'></script> -->
|
|
<script>
|
|
var sseId;
|
|
|
|
function postTrack() {
|
|
if (!sseId) return;
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", '/track/trackOn', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
var date = new Date();
|
|
var sub = {
|
|
sId: sseId,
|
|
vt: []
|
|
};
|
|
for (let i = 0; i < 10; i++) {
|
|
sub.vt.push({ v: (i + 1) + '', gdt: date });
|
|
}
|
|
xhr.send(JSON.stringify(sub));
|
|
console.log('Sent tracking request.');
|
|
}
|
|
|
|
var reconnectSecs = 3;
|
|
var es;
|
|
|
|
// Putting these functions in extra variables is just for the sake of readability
|
|
var waitFunc = function () { return reconnectSecs * 1000 };
|
|
var tryToSetupFunc = function () {
|
|
setUpEV();
|
|
// reconnectSecs *= 2;
|
|
// if (reconnectSecs >= 64) {
|
|
// reconnectSecs = 64;
|
|
// }
|
|
};
|
|
|
|
var reconnectFunc = function () { setTimeout(tryToSetupFunc, waitFunc()) };
|
|
|
|
function setUpEV() {
|
|
var token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI1YTFkNmMwNWZmYjk0ZTc4NzVjNjhkZDkiLCJ1dCI6MSwiaWF0IjoxNTg2OTc2Mjk1LCJleHAiOjE1ODY5ODM0OTV9.KL2iiaP96LrOaRbzmmSsLLsPyqtL9SQ4ofEZCEKLu1g';
|
|
es = new EventSource('/track/stream/?token=' + token);
|
|
var el = document.getElementById('el');
|
|
["message", "login", "d"].forEach(event => {
|
|
es.addEventListener(event, ev => {
|
|
var data = (typeof ev.data === 'object' ? JSON.parse(ev.data) : ev.data) || '';
|
|
if (event === "login") {
|
|
sseId = data;
|
|
postTrack();
|
|
}
|
|
var logLine = document.createElement('div');
|
|
// logLine.innerHTML = moment().format('HH:mm:ss.SSS Z') + ': ' + data;
|
|
logLine.innerHTML = data;
|
|
el.appendChild(logLine);
|
|
el.scrollTop = 9999999;
|
|
}, false);
|
|
});
|
|
es.addEventListener('open', e => { console.log('Opened'); });
|
|
es.addEventListener('error', e => {
|
|
console.log('Error:' + JSON.stringify(e, null, 4));
|
|
es.close();
|
|
reconnectFunc();
|
|
});
|
|
}
|
|
setUpEV();
|
|
|
|
</script>
|
|
|
|
</html> |