Your SlideShare is downloading. ×
0
Server Sent EventsIn ActionAndrei RusuMay 30th, 2013
Who is eBuddy?• Web and mobile messaging foreveryone, everywhere!• Two main messaging products:eBuddy Chat and XMS• XMS is...
+
• Companion web app• User needs to register on theirmobile client• Supports several authenticationmechanisms• Designed to ...
• HTML5 draft specification for implementingreal-time HTTP streaming• Enables a web browser to receive push-likenotification...
Implementation goals• Improve the scalability of theapplication in terms of concurrentusers• Speedy communication with the...
Real-time communicationsThe dark days:• Polling (short / long lived HTTP requests)• Comet and reverse ajax• Never-ending I...
HTML5 to the rescue!• New connectivity APIs for scalable client-server messaging• XHR2, WebSockets, Server-Sent Events• No...
XMLHttpRequest Level 2• Removes cross-domain http restrictions - Cross-Origin Resource Sharing(CORS)• http://an.example.co...
WebSockets• Full-duplex, bi-directional communication channel• Client connects to socket server and sends and receives mes...
Server-sent Events• One-way message streaming over traditional HTTP• Client subscribes to server and waits (long-lived HTT...
EventStream FormatHTTP/1.1 200 OKContent-Type: text/event-streamdata: This is the first message.event: notificationdata: T...
• var source = new EventSource(“https://{backend_server}/subscribe?access_token=XYZ&client_id=123”);source.addEventListene...
Current ArchitectureBackendGET /poll HTTP/1.1Browser10sHTTP/1.1 200 OK: {empty}55sHTTP/1.1 200 OK: {message: “Hello there!...
Current Web XMS SetupClientnginxproxyPOLLAuthServiceLoadbalancerNode.jsserviceLOGINApplicationserver 1Applicationserver 2A...
• No direct connections - polls have to go through the proxy• HTTP Overhead: TCP handshakes, headers, cookies etc.• Scalin...
Server-Sent Events ArchitectureBackendnew EventSource(‘/subscribe?access_token=XYZ&client_id=ABC)Browserclose()id: 1event:...
New SetupClientAuthServiceLoadbalancerNode.jsserviceLOGINApplicationserver 1Applicationserver 2Applicationserver NCassandr...
• Connection is recovered automatically• Server needs to send keep-alive messages to keep the channelopen• Internet Explor...
• EventSource has better browser support and pretty goodfallback mechanism• WebSockets needs HTTP as fallback ultimately• ...
Thanks!visit http://xms.me to download XMS!
Upcoming SlideShare
Loading in...5
×

Server-Sent Events in Action

10,449

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
10,449
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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)• http://an.example.com can directly connect to http://other.example.org• 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: other.example.org• 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 lines.id: 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(e.data);});• 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 http://xms.me 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.

×