CodePen

HTML

            
              %script(src="https://raw.github.com/Yaffle/EventSource/master/eventsource.js")
%script(src="http://code.jquery.com/jquery-1.9.1.min.js")

.start-help
  Start <a target="_blank" href="https://github.com/rs/pushd">pushd</a> on your local host using the following command:
  %pre $ redis-server &
  %pre $ npm start

.push-help
  You're ready to push event using the following command:
  %pre
    $ curl -d 'msg=Hello world' http://localhost/event/test1 

%ul(id="events")
            
          
!

CSS

            
              body
  margin: 40px
  background-color: red
  color: white

  a
    color: white

  .push-help
    display: none

  &.connected
    background-color: green

    .start-help
      display: none

    .push-help
      display: block
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              es = new EventSource('http://localhost/subscribe?events=test1+test2+test3+test4')

es.addEventListener 'open', (e) ->
  $('body').addClass 'connected'

es.addEventListener 'error', (e) ->
  $('body').removeClass 'connected'
  
es.addEventListener 'message', (e) ->
  data = JSON.parse e.data;
  $('#events').append "<li>#{data.event}: #{data.message.default}"

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................