Comet Programming Play SSE with Ruby on Rails

Comet is a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it. Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins.

 

1. Implementations

 

Streaming An application using streaming Comet opens a single persistent connection from the client browser to the server for all Comet events. These events are incrementally handled and interpreted on the client side every time the server sends a new event, with neither side closing the connection.

 

2. XML Http Request

 

The XMLHttpRequest (XHR) object, the main tool used by Ajax applications for browser and server communication, can also be pressed into service for server–browser Comet messaging, in a few different ways.

 

3. Ajax With Long Polling

 

The browser makes an Ajax-style request to the server, which is kept open until the server has new data to send to the browser, which is sent to the browser in a complete response. The browser initiates a new long polling request in order to obtain subsequent events.

 

4. SSE HTTP Web Traffic


vFfKj2iALYFVOe5bsc0IU1CTGE0HNrQXk_ULxwMFTYu9oy7gramao3rH7d7wXoXXPDPVKUA8lrL_iPoPNSScbWoRm-cTIF7uWOeIr_MmP0q4-fPS0ndkwnj7wIhI
  1. A client requests a webpage from a server using regular http

  2. The requested webpage executes javascript which opens a connection to the server.

  3. The server sends an event to the client when there's new information available. - real-time traffic from server to client, mostly that's what you'll need - you'll want to use a server that has an event loop, don't use apache - not possible to connect with a server from another domain

 

5. Browsers Support


Screenshot from 2013-09-27 16:29:47

 

6. Using Server-sent Events

 

Developing a web application that uses server-sent events is quite easy. You'll need a bit of code on the server to stream the events to the web application, but the web application side of things works nearly identically to handling any other type of events.

 

7. Receive Server-Sent Event

 

 

The EventSource object is used to receive server-sent event notifications :

 

[code language="ruby"]
	var source=new EventSource("url/demo/sse") source.onmessage=function(event)
		{ alert(event.data) }
[/code]

 

Example explained :

 

  • Create a new EventSource object, and specify the URL of the page sending the updates (in this example "demo_sse.php")

  • Each time an update is received, the onmessage event occurs

  • When an onmessage event occurs, put the received data into the element with id="result"


8. Example

 

http://github.com/tenderlove/reloader by Aaron Patterson

 

9. SSE Processing Model

 

For HTTP connections, the Accept header may be included; if included, it must contain only formats of event framing that are supported by the user agent (one of which must be text/event-stream, as described below).

User agents should use the Cache-Control: no-cache header in requests to bypass any caches for requests of event sources. (This header is not a custom request header, so the user agent will still use the CORS simple cross-origin request mechanism.) User agents should ignore HTTP cache headers in the response, never caching event sources.

 

10. EventSource Event Handler


Screenshot from 2013-09-27 16:36:07

 

11. SSE Fields Value

 

The following field names are defined by the specification :

Event : The event's type. If this is specified, an event will be dispatched on the browser to the listener for the specified event name; the web site would useaddEventListener() to listen for named events. the onmessage handler is called if no event name is specified for a message.

 

Data : The data field for the message. When the EventSource receives multiple lines that begin with "data:", it will concatenate them, inserting a newline character between each one. Trailing newlines are removed. [verify]

 

Id : The event ID to set the EventSource object's last event ID value to.

 

Retry : The reconnection time to use when attempting to send the event. [What code handles this?] This must be an integer, specifying the reconnection time in milliseconds. If a non-integer value is specified, the field is ignored.

 

All other field names are ignored.

 

12. SSE or Web Socket ?

 

Advantages of SSE over Websockets

 
  1. Transported over simple HTTP instead of a custom protocol.

  2. Can be poly-filled with javascript to "backport" SSE to browsers that do not support it yet.

  3. Built in support for re-connection and event-id.

  4. Simpler protocol.


Advantages of Websockets Over SSE


  1. Real time, two directional communication.

  2. Native suport in more browers.


Ideal use cases of SSE


  1. Stock ticker streaming

  2. twitter feed updating

  3. Notifications to browser


References


  1. http://en.wikipedia.org/wiki/Server-sent_events

  2. http://tenderlovemaking.com/2012/07/30/is-it-live.html

  3. http://www.w3.org/TR/eventsource/

  4. http://ngauthier.com/2013/02/rails-4-sse-notify-listen.html

  5. http://en.wikipedia.org/wiki/Comet_(programming)

  6. http://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet

  7. https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events

  8. http://html5doctor.com/server-sent-events/#api

  9. http://www.html5rocks.com/en/tutorials/eventsource/basics/

  10. http://jaxenter.com/tutorial-jsf-2-and-html5-server-sent-events-42932.html

  11. https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events

 



Ruby On Rails Blog and Web Development | 41studio

By Admin on September 27, 2013