index.html 741 B

12345678910111213141516171819202122232425262728293031323334353637383940
  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. <body>
  13. <div class=col>
  14. <h2>EventSource</h2>
  15. <ul id=es-messages>
  16. </ul>
  17. </div>
  18. <div class=col>
  19. <h2>EventSourcePolyfill</h2>
  20. <ul id=es-polyfill-messages>
  21. </ul>
  22. </div>
  23. <script src=/eventsource-polyfill.js></script>
  24. <script>
  25. function subscribe(es, ul) {
  26. es.addEventListener('server-time', function (e) {
  27. var li = document.createElement("LI");
  28. li.appendChild(document.createTextNode(e.data));
  29. ul.appendChild(li);
  30. });
  31. }
  32. subscribe(new EventSource('/sse'), document.getElementById('es-messages'));
  33. subscribe(new EventSourcePolyfill('/sse'), document.getElementById('es-polyfill-messages'));
  34. </script>
  35. </body>