Monday 23 September 2013

Server Sent Events with Rails 4 and AngularJS

It is a common requirement in modern web applications to have the client view responding to server events. By doing so, end users can be notified in real-time of any relevant state or data update. Supporting push notifications in your web applications is a way of making them more interactive, respond better to server events, and ultimately deliver an improved user experience.

Pushing notifications to the browser can easily be achieved by streaming JSON data to the client. An HTTP connection is kept open between the server and the browser and on reception of events, the web page is updated to reflect the change.

Streaming JSON data has become easier than ever using Rails 4 and its ActionController::Live. Coupling that with AngularJS ability to react to events, you get a very simple way of handling Server Sent Events in your web application.

Lets say we want to display a subset of the share market prices updated periodically where new values will be "pushed" by the server to the browser in a JSON format. Using a push mechanism is this scenario will keep the user informed as soon as market prices are updated.



In this example, we will simulate data update by generating new market values every 5 seconds, storing them in a database and streaming the new data to the client.
1. Generate a Rails controller including ActionController:Live and returning event-stream content type
2. Use the method response.stream.write to push data to the client
3. Generate new market prices and a price variation indicator (up or down) in JSON format

For reference, the model looks like
4. On the client side we now use AngularJS to open a stream with the server and process events.
HTML Markup: AngularJS Controller
On page load, the EventSource object opens a stream with the server and on each message received, AngularJS is notified to apply those changes to the model and view.

The next version of Rails (4.1) will provide a ActionController::Live::SSE which would reduce even more the amount of effort needed to stream events.

Example source code on Github

5 comments:

  1. Thats cool mr bruno ! Linked-in sent me here

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi Bruno,

    I don't understand the following piece of code:
    shareModule.factory('Shares', function() {
    return {};
    });

    What does exactly it do? It seems to me that it does nothing.

    Thanks

    ReplyDelete
  4. Thanks for this wonderful rail article post. I have read all the things very carefully it’s really a helpful and effective post for me and my projects. kindly update some more article regarding ror.

    Hire Ruby on Rail Developers

    ReplyDelete
  5. Great, It is really great to work on Server PUSH Architecture. It is very helpful for my upcoming application.

    Angularjs Training in Chennai

    ReplyDelete