-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
131 lines (123 loc) · 4.93 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
const http = require('http');
const port = process.env.PORT || 5000;
require('./src/http-app');
require('./src/hapi-app');
const server = http.createServer(dispatchHomePage);
server.listen(port);
server.on('listening', () => {
console.log(`[UI App] Listening on http://localhost:${port}`);
});
function dispatchHomePage(req, res) {
res.writeHead(200, {
'Content-Type': 'text/html',
'Access-Control-Allow-Origin': '*'
});
res.end(`
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NJS: Sever Sent Events(SSE) - Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.7/rxjs.umd.min.js" integrity="sha512-0/2ebe9lI6BcinFBXFjbBkquDfccT2wP+E48pecciFuGMXPRNdInXZawHiM2NUUVJ4/aKAzyebbvh+CkvRhwTA==" crossorigin="anonymous"></script>
<style>
.content {
padding:5px;
}
thead,
tfoot {
background-color: #3f87a6;
color: #fff;
text-align: center;
}
tbody {
background-color: #e4f0f5;
}
caption {
padding: 10px;
caption-side: bottom;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<p style="text-align:center;"><u><b>Nodejs - Sever Sent Events(SSE) - Demo</b></u></p>
<table border='1'>
<thead>
<tr>
<td>
HTTP with RxJs Observable
</td>
<td>
HAPI JS
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top;padding:5px;">
<div id="log"></div>
</td>
<td style="vertical-align:top;padding:5px;">
<div id="log1"></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
/*** Http Event Source Listener ***/
const { Observable, Subject, fromEvent, operators } = rxjs;
const HttpAppEventSource = new EventSource('http://localhost:3000/events');
const element = document.querySelector('#log');
fromEvent(HttpAppEventSource, 'message').subscribe(event => {
element.innerHTML += '<u>' + event.type.toUpperCase() + '</u>' + ': '+ event.data +'<br><br>';
});
fromEvent(HttpAppEventSource, 'update')
.pipe(
operators.take(10),
operators.tap(event => console.log(event)),
//operators.debounceTime(1000)
)
.subscribe(HttpAppEventSource => {
document.querySelector('#liveUpdate').innerHTML = event.lastEventId;
element.innerHTML += '<u>' + event.type.toUpperCase() + '</u>' + ': Event' + '<br>Last Event ID: ' + event.lastEventId + "<br>DATA: " + event.data +'<br><br>';
});
fromEvent(HttpAppEventSource, 'close').subscribe(event => {
element.innerHTML += '<u>' + event.type.toUpperCase() + '</u>' + ': '+ event.data +'<br><br>';
HttpAppEventSource.close();
});
fromEvent(HttpAppEventSource, 'error').subscribe(event => {
element.innerHTML += '<u>' + 'Error:' + '</u>' + 'Event, Server closes the connection.';
HttpAppEventSource.close();
});
/*** Hapijs Event Source Listener ***/
var HapiJsAppEventSource = new EventSource('http://localhost:4000/events');
const element1 = document.querySelector('#log1');
HapiJsAppEventSource.onmessage = function(event) {
element1.innerHTML += '<u>' + event.type.toUpperCase() + '</u>' + ': '+ event.data +'<br><br>';
};
HapiJsAppEventSource.addEventListener("update", function(event) {
document.querySelector('#liveUpdate1').innerHTML = event.lastEventId;
element1.innerHTML += '<u>' + event.type.toUpperCase() + '</u>' + ': Event' + '<br>Last Event ID: ' + event.lastEventId + "<br>DATA: " + event.data +'<br><br>';
});
HapiJsAppEventSource.addEventListener("close", function(e) {
element1.innerHTML += '<u>' + event.type.toUpperCase() + '</u>' + ': '+ event.data +'<br><br>';
HapiJsAppEventSource.close();
});
HapiJsAppEventSource.onerror = (event) => {
element1.innerHTML += '<u>' + 'Error:' + '</u>' + 'Event, Server closes the connection.';
HapiJsAppEventSource.close();
}
</script>
</html>
`);
}