Recently I have been looking into Server-sent events, also known as SSE or eventsource.

The idea of server-sent events is to push notification to the browser, in a way it could be seen as a read-only web-socket (from the browser's view).

Implementing SSE is fairly easy code-wise, this article from html5rocks pretty much covers all the basics, but the principle is:

  • Add a little javascript to make your page connect to a specific URL on your server
  • Add a little more javascript to your page to react upon messages sent by the server



Server-side, things are also fairly easy but also need a little consideration:

  • You need to create basically a streaming server, broadcasting messages as they occurs or whenever you want.
  • The format is fairly simple: data: <your data> \n\n
  • You cannot run this server behind apache. The reason is simple, the browser keeps the connection open which means apache will keep the worker process running. So after opening a few pages, apache will reach its maximum number of worker processes running, thus ending up in a situation where it is waiting forever for an available worker process (ie: your apache server is not responding anymore).

So after running into the third point listed above, I moved the SSE server out of my flask application and into its own application, based on trollius (which is a backport of asyncio to python2), but any other async libraries would do (such as twisted or gevent).

After splitting the code out and testing it some more, I found that there is a limitation on the number of permanent connection a browser can make to the same domain. I found a couple of pages mentioning this issue, but the most useful resource for me was this old blog post from 2008: Roundup on Parallel Connections, which also provides the solution on how to go around this limitation: the limit is per domain, so if you set-up a bunch of CNAME sub-domain redirecting to the main domain, it will work for as many connection as you like :-) (note: this is also what github and facebook are using to implement web-socket support on as many tabs as you want).

The final step in this work is to not forget to set the HTTP Cross-Origin access control (CORS) policy in the response sent by your SSE server to control cross-site HTTP requests (which are known security risks).



So in the end, I went for the following architecture:

SSE_layout3.png

Two users are viewing the same page. One of them edits it (ie: sends a POST requests to the flask application), the web-application (here flask) processes the request as usual (changes something, updates the database...) and also queue a message in Redis information about the changes (and depending on what you want to do, specifying what has changed).

The SSE server is listening to redis, picks up the message and sends it to the browser of the two users. The javascript in the page displayed picks up the message, processes it and updates the page with the change.

This way, the first user updated the page and the second user had the changes displayed automatically and without having to reload the page.



Note: asyncio has a redis connector via asyncio-redis and trollius via trollius-redis.