Your SlideShare is downloading. ×

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Server Sent EventsIn ActionAndrei RusuMay 30th, 2013
  • 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. +
  • 4. • Companion web app• User needs to register on theirmobile client• Supports several authenticationmechanisms• Designed to bring additionalfeatures
  • 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. 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. 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. 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. 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. 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. 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. 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. • 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. 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. Current Web XMS SetupClientnginxproxyPOLLAuthServiceLoadbalancerNode.jsserviceLOGINApplicationserver 1Applicationserver 2Applicationserver NCassandra1. authorize2. loadbalance3. get_client_settings4. etc.POLL {server_address}access_tokenserver_addresssettingsaccess_token
  • 16. • No direct connections - polls have to go through the proxy• HTTP Overhead: TCP handshakes, headers, cookies etc.• Scaling is difficultProblems with polling
  • 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. New SetupClientAuthServiceLoadbalancerNode.jsserviceLOGINApplicationserver 1Applicationserver 2Applicationserver NCassandra1. authorize2. loadbalance3. get_client_settings4. etc.EventSource {server_address}access_tokenserver_addresssettings
  • 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. • EventSource has better browser support and pretty goodfallback mechanism• WebSockets needs HTTP as fallback ultimately• Long-polling -> EventSource -> WebSocketWhy not WebSockets?
  • 21. Thanks!visit to download XMS!