Source

ssebin / home.html

Full commit
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>SSEBin</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script>
    $(
      function() {
        var source = new EventSource('/events/');
        source.addEventListener('message', function(e) {
          $('#counter').text(e.data);
        });
      }
    );
  </script>
</head>
<body>
  <h1>SSEBin</h1>
  <p>If your browser supports Server-Sent-Events, you should see a counter updating once every
    2 seconds.</p>
  <div id="counter">Sorry, your browser does not support Server Sent Events. :(</div>
  <p>Though neglected by many as Websockets' halfwit cousin, Server Sent Events have a few
     awesome properties:
     
     <ol>
     <li>Parsing is built right into the browser.
     <li>Reconnects are handled automatically by the browser.
     <li>With the exception of IE, browser support is <a href="http://caniuse.com/#feat=eventsource">really good</a>.
     <li>They're served over plain old http, so there's no need to open a
       separate port and/or run a separate server.  (At the time of writing
       Heroku apps can't use Websockets, for example, but they can use SSEs
       just fine.) It's highly recommended, however, that you use a server that
       can hold open a lot of simultaneous connections.  <a
         href="https://bitbucket.org/btubbs/ssebin">This app</a> uses <a
         href="http://www.gevent.org/">Gevent</a>.
     <ol>
</body>
</html>