| 1 |
3a515b92
|
cagy
|
<!DOCTYPE html>
|
| 2 |
|
|
<html>
|
| 3 |
|
|
<head>
|
| 4 |
|
|
<style>
|
| 5 |
|
|
.col {
|
| 6 |
|
|
float:left;
|
| 7 |
|
|
width:50%;
|
| 8 |
|
|
left:50%;
|
| 9 |
|
|
}
|
| 10 |
|
|
</style>
|
| 11 |
|
|
</head>
|
| 12 |
|
|
|
| 13 |
|
|
<body>
|
| 14 |
|
|
<div class=col>
|
| 15 |
|
|
<h2>EventSource</h2>
|
| 16 |
|
|
<ul id=es-messages>
|
| 17 |
|
|
</ul>
|
| 18 |
|
|
</div>
|
| 19 |
|
|
|
| 20 |
|
|
<div class=col>
|
| 21 |
|
|
<h2>EventSourcePolyfill</h2>
|
| 22 |
|
|
<ul id=es-polyfill-messages>
|
| 23 |
|
|
</ul>
|
| 24 |
|
|
</div>
|
| 25 |
|
|
|
| 26 |
|
|
<script src=/eventsource-polyfill.js></script>
|
| 27 |
|
|
|
| 28 |
|
|
<script>
|
| 29 |
|
|
function subscribe(es, ul) {
|
| 30 |
|
|
es.addEventListener('server-time', function (e) {
|
| 31 |
|
|
var li = document.createElement("LI");
|
| 32 |
|
|
li.appendChild(document.createTextNode(e.data));
|
| 33 |
|
|
ul.appendChild(li);
|
| 34 |
|
|
});
|
| 35 |
|
|
}
|
| 36 |
|
|
|
| 37 |
|
|
subscribe(new EventSource('/sse'), document.getElementById('es-messages'));
|
| 38 |
|
|
subscribe(new EventSourcePolyfill('/sse'), document.getElementById('es-polyfill-messages'));
|
| 39 |
|
|
</script>
|
| 40 |
|
|
</body>
|