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