| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .col { |
| float:left; |
| width:50%; |
| left:50%; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class=col> |
| <h2>EventSource</h2> |
| <ul id=es-messages> |
| </ul> |
| </div> |
| |
| <div class=col> |
| <h2>EventSourcePolyfill</h2> |
| <ul id=es-polyfill-messages> |
| </ul> |
| </div> |
| |
| <script src=/eventsource-polyfill.js></script> |
| |
| <script> |
| function subscribe(es, ul) { |
| es.addEventListener('server-time', function (e) { |
| var li = document.createElement("LI"); |
| li.appendChild(document.createTextNode(e.data)); |
| ul.appendChild(li); |
| }); |
| } |
| |
| subscribe(new EventSource('/sse'), document.getElementById('es-messages')); |
| subscribe(new EventSourcePolyfill('/sse'), document.getElementById('es-polyfill-messages')); |
| </script> |
| </body> |
