WebSockets 101dhaval.dalal@software-artisan.com       @softwareartisan
AReal-timeWebapp
Polling• “Simulate” real-time by making series of XHRs    at regular intervals.• Pulls Data from the server.            Pr...
Problems with Polling• Its a wasted request if there are no updates.• Vice-versa, users may be working on “stale”  data si...
Long-Polling• Solves the problem of extremes (wasted request  or stale data) by pushing updates to clients as they  happen...
How Long-Polling works• Browser makes request to the server.• Connection is kept open between the server and  the browser....
Long-Polling Pros & Cons• Pros •   Reduces latency for data-delivery.• Cons. •   Each request creates new connection and c...
Long-Polling Scalability• It demands a server software that does not  hold thread on server for each request.• Instead mov...
Separate Upstream &Downstream connections• Downstream Connection.  •   Is kept open between the server and the browser.  •...
Separate Connections:     Pros & Cons• Pros •   Offers lowest latency. •   Best for streaming needs.• Cons •   Uses 2 Half...
Enter WebSockets• Full-Duplex  •   Exchange HTTP headers initially when the connection is      established, after that its...
Fun time!   Lets create aWebSocket connection
Check Browser Support• Use window.WebSocket to find out• What to do if the browser does not support it? • use polyfills     ...
WebSocket Servers     Java             .NET           Python        Ruby          PHP                                     ...
Architecture                     1                         Request                        Web                         2 Se...
Async API• Server Callbacks •   onopen - when the connection is established •   onclose - when the connection is closed • ...
How WS protocol works•    When making a WS     connection, initiated by     HTTP request, client sends a     connection “u...
More fun!  Using Jetty’sWebSocketServlet.
Same-Origin Policy• Prevents client-Side Webapp running from one  origin to obtain data retrieved from another  origin.• L...
Cross-Origin Resource      Sharing (CORS)• Extends Same-Origin Policy• Its a way of restricting the domains that can acces...
Thank-you!
References•   blog.caplin.com/2009/04/20/what-is-the-real-time-web/•   leggetter.co.uk/2012/04/22/websockets-realise-comet...
Upcoming SlideShare
Loading in …5
×

Web sockets primer

4,146 views

Published on

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

No Downloads
Views
Total views
4,146
On SlideShare
0
From Embeds
0
Number of Embeds
2,240
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web sockets primer

  1. 1. WebSockets 101dhaval.dalal@software-artisan.com @softwareartisan
  2. 2. AReal-timeWebapp
  3. 3. Polling• “Simulate” real-time by making series of XHRs at regular intervals.• Pulls Data from the server. Process Process Web Server Process Process Process Respo Respo Respo Respo Respo st st st st st Reque Reque Reque Reque Reque nse nse nse nse nse Browser
  4. 4. Problems with Polling• Its a wasted request if there are no updates.• Vice-versa, users may be working on “stale” data since the last update• Each request creates new connection to the server.• Each request causes exchange of HTTP headers (request and response), they consume Bandwidth.• Not scalable
  5. 5. Long-Polling• Solves the problem of extremes (wasted request or stale data) by pushing updates to clients as they happen. Process Process Web Server Respo Process Process Process Resp Res Respon Respon est st uest Request Request Reque Requ pon onse Req nse se se se Browser
  6. 6. How Long-Polling works• Browser makes request to the server.• Connection is kept open between the server and the browser.• When an update arrives the connection is closed (sent as complete response 200 OK).• The browser then initiates a new long-polling request for subsequent updates.• Techniques • XHR Style LP • IFrame • Script Tag LP
  7. 7. Long-Polling Pros & Cons• Pros • Reduces latency for data-delivery.• Cons. • Each request creates new connection and causes exchange of HTTP headers, they consume Bandwidth. • Not Scalable • Request hangs until a response is ready to be delivered. • Old Server software won’t work with this approach as they hold the thread for each request.
  8. 8. Long-Polling Scalability• It demands a server software that does not hold thread on server for each request.• Instead move towards asynchronous event- driven server architecture • For e.g Nginx, Netty, Node.js etc... Servers • Addresses the C10K (Concurrent 10,000 connections) problem
  9. 9. Separate Upstream &Downstream connections• Downstream Connection. • Is kept open between the server and the browser. • Regular updates pushed through this connection. • Messages are continuously parsed by the client as they arrive. • Upstream Connection • Browser makes Ajax requests to send commands (i.e events that trigger action) to server.
  10. 10. Separate Connections: Pros & Cons• Pros • Offers lowest latency. • Best for streaming needs.• Cons • Uses 2 Half-Duplex connections to simulate Full- Duplex. • HTTP is a request/response protocol (Half-Duplex), not bi-directional • Co-ordination overheads between two connections. • Some browsers may not support more than two simultaneous connections.
  11. 11. Enter WebSockets• Full-Duplex • Exchange HTTP headers initially when the connection is established, after that its all data exchange. • Uses less bandwidth.• Significant Scalability with reduction in network traffic • 100 clients. • 100 * 10 clients. • 100 * 10 * 10 clients.
  12. 12. Fun time! Lets create aWebSocket connection
  13. 13. Check Browser Support• Use window.WebSocket to find out• What to do if the browser does not support it? • use polyfills (github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) • SockJS • Atmosphere jQuery Plugin (Fallback to LP) • Socket.io • web-socket-js (Flash based) • Kaazing Websocket Gateway (Commercial) • Graceful Websocket jQuery Plugin (Fallback to LP) • jQuery Socket (Supports WebSocket, Server-Sent Events, Streaming and LP)
  14. 14. WebSocket Servers Java .NET Python Ruby PHP Extendible Jetty SuperWebSocket websockify Goliath Web Socket Server web-socket- jWebSocket Nugget pywebsockets ruby Netty XSockets GlassFishApache Active MQ Tomcat
  15. 15. Architecture 1 Request Web 2 Serve Static Resources Server 3 Initiate WebSocket Connection 4 Upgrade Connection 5 Send Data WebSocket 6 Receive Data ServerEvent driven on both sides of the WebSocket connection.
  16. 16. Async API• Server Callbacks • onopen - when the connection is established • onclose - when the connection is closed • onerror - when an error occurs • onmessage - when a message is received from the server• Client Transmissions • send
  17. 17. How WS protocol works• When making a WS connection, initiated by HTTP request, client sends a connection “upgrade” request.• Server responds by upgrading the connection and switching protocols• Handshake is complete when both client & server switch protocols• After this, client and server can begin sending messages until • either of them closes the connection • there is some network problem
  18. 18. More fun! Using Jetty’sWebSocketServlet.
  19. 19. Same-Origin Policy• Prevents client-Side Webapp running from one origin to obtain data retrieved from another origin.• Limits unsafe HTTP requests launched towards destinations that differ from the running application’s origin • <script> element can execute content retrieve from foreign origins. • Requires you to trust the server • Bypass using JSONP • Server needs to implement some logic to allow you to do this.
  20. 20. Cross-Origin Resource Sharing (CORS)• Extends Same-Origin Policy• Its a way of restricting the domains that can access services.  • White-list domains that are allowed to access services• The browser and in-browser applications are supposed to respect that, and sometimes the Services (server-side) may protect themselves. • Use a CORS Filter • Flash uses crossdomain.xml
  21. 21. Thank-you!
  22. 22. References• blog.caplin.com/2009/04/20/what-is-the-real-time-web/• leggetter.co.uk/2012/04/22/websockets-realise-comet-theyre-not-an-alternative.html• infrequently.org/2006/03/comet-low-latency-data-for-the-browser• jstorimer.com/js/2009/01/12/what-the-heck-is-jsonp.html• carloscarrasco.com/blog/posts/read/implementing-script-tag-long-polling-for-comet-applications• en.wikipedia.org/wiki/Comet_(programming)• en.wikipedia.org/wiki/C10k_problem• tomcatexpert.com/blog/2012/04/24/websockets-tomcat-7• github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills• Peter Lubbers, HTML5 WebSocket DZone Refcardz

×