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