Server-Sent Events in Action


Published on

A talk I've done during a Fronteers meet-up ( hosted by eBuddy on the subject of server-sent events, a recent HTML5 connectivity API.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Server-Sent Events in Action

  1. 1. Server Sent EventsIn ActionAndrei RusuMay 30th, 2013
  2. 2. Who is eBuddy?• Web and mobile messaging foreveryone, everywhere!• Two main messaging products:eBuddy Chat and XMS• XMS is a real-time messaging appfor smartphones
  3. 3. +
  4. 4. • Companion web app• User needs to register on theirmobile client• Supports several authenticationmechanisms• Designed to bring additionalfeatures
  5. 5. • HTML5 draft specification for implementingreal-time HTTP streaming• Enables a web browser to receive push-likenotifications from a server• New EventSource Javascript API• Implemented in Web XMS - web.xms.meServer ... what?
  6. 6. Implementation goals• Improve the scalability of theapplication in terms of concurrentusers• Speedy communication with thebackend service• Improve the connection handling andstability• HTML5 makes us look cool
  7. 7. Real-time communicationsThe dark days:• Polling (short / long lived HTTP requests)• Comet and reverse ajax• Never-ending IFRAME(s) / script tags• Flash sockets (since ActionScript 3)
  8. 8. HTML5 to the rescue!• New connectivity APIs for scalable client-server messaging• XHR2, WebSockets, Server-Sent Events• No more iframe or script tag hacks
  9. 9. XMLHttpRequest Level 2• Removes cross-domain http restrictions - Cross-Origin Resource Sharing(CORS)• can directly connect to• Destination server must add some response headers:Access-Control-Allow-Origin: http://an.example.orgAccess-Control-Request-Method: GET, POSTAccess-Control-Request-Headers: X-Requested-WithHost:• More event handlers for tracking the progress of the request
  10. 10. WebSockets• Full-duplex, bi-directional communication channel• Client connects to socket server and sends and receives messages real-time• “Upgrades” an HTTP connection to a WebSocket connection over thesame TCP/IP channel• Works over firewalls and gateways
  11. 11. Server-sent Events• One-way message streaming over traditional HTTP• Client subscribes to server and waits (long-lived HTTP channel)• When there’s data, server generates event and pushes the datato client• No special server protocol implementation• New EventSource HTML5 api
  12. 12. EventStream FormatHTTP/1.1 200 OKContent-Type: text/event-streamdata: This is the first message.event: notificationdata: This is the second message, itdata: has two 12345data: This is the third message with an id
  13. 13. • var source = new EventSource(“https://{backend_server}/subscribe?access_token=XYZ&client_id=123”);source.addEventListener(“open”, function(e) {// connected});source.addEventListener(“error”, function(e) {switch (this.readyState) {case EventSource.CONNECTING:// trying to reconnect ...break;case EventSource.CLOSE:// connection closedbreak;}});source.addEventListener(“message”, function(e) {// message received});source.addEventListener(“bind_result”, function(e) {var session = JSON.parse(;});• No HTTP overhead - one single subscribe request• Updates are streamed real-time• Publish is done via regular XHR with CORS supportEventSource
  14. 14. Current ArchitectureBackendGET /poll HTTP/1.1Browser10sHTTP/1.1 200 OK: {empty}55sHTTP/1.1 200 OK: {message: “Hello there!”, seq=99}55sGET /poll HTTP/1.1HTTP/1.1 200 OK: {empty}GET /poll HTTP/1.1
  15. 15. Current Web XMS SetupClientnginxproxyPOLLAuthServiceLoadbalancerNode.jsserviceLOGINApplicationserver 1Applicationserver 2Applicationserver NCassandra1. authorize2. loadbalance3. get_client_settings4. etc.POLL {server_address}access_tokenserver_addresssettingsaccess_token
  16. 16. • No direct connections - polls have to go through the proxy• HTTP Overhead: TCP handshakes, headers, cookies etc.• Scaling is difficultProblems with polling
  17. 17. Server-Sent Events ArchitectureBackendnew EventSource(‘/subscribe?access_token=XYZ&client_id=ABC)Browserclose()id: 1event: bind_resultdata: {session_id: “12143-333-31314124”}id: 2event: message_receiveddata: {message: “Hello there!”, seq=99}HTTP/1.1 200 OK text/event-streamHTTP/1.1 200 OK text/event-stream
  18. 18. New SetupClientAuthServiceLoadbalancerNode.jsserviceLOGINApplicationserver 1Applicationserver 2Applicationserver NCassandra1. authorize2. loadbalance3. get_client_settings4. etc.EventSource {server_address}access_tokenserver_addresssettings
  19. 19. • Connection is recovered automatically• Server needs to send keep-alive messages to keep the channelopen• Internet Explorer can emulate EventSource using regularXMLHttpRequest (XDomainRequest in IE9 and below) - polyfilllibraries• Safari doesn’t support EventSource with CORSError handling
  20. 20. • EventSource has better browser support and pretty goodfallback mechanism• WebSockets needs HTTP as fallback ultimately• Long-polling -> EventSource -> WebSocketWhy not WebSockets?
  21. 21. Thanks!visit to download XMS!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.