| 1 | <!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>
|