Your SlideShare is downloading. ×
Server-Sent Events in Action
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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!