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 the ability of AngularJS to react to events, you get a very simple way of handling Server Sent Events in your web application.

Let’s 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 in this scenario will keep the user informed as soon as market prices are updated.

screenshot-stockprices}/2014/03/screenshot-stockprices.png?=300&h=74 300w, 100w, 451w” sizes=”(max-width: 451px) 100vw, 451px” width=”451” height=”112”}

In this example, we will simulate a 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 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 will further reduce the amount of effort needed to stream events.

Example source code on Github

This article Server Sent Events with Rails 4 and AngularJS was originally published on my Blog here.