Server-Sent Events in Action

  • 9,717 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
9,717
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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)• 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. 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 lines.id: 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(e.data);});• 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 http://xms.me to download XMS!