Web sockets primer
-
Upload
dhaval-dalal -
Category
Technology
-
view
3.879 -
download
1
description
Transcript of Web sockets primer
![Page 2: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/2.jpg)
AReal-time Webapp
![Page 3: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/3.jpg)
Polling• “Simulate” real-time by making series of XHRs
at regular intervals.
• Pulls Data from the server.
Web Server
Browser
Req
uest
Response
Process
Req
uest
Response
Process
Req
uest
Response
Process
Req
uest
Response
Process
Req
uest
Response
Process
![Page 4: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/4.jpg)
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
![Page 5: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/5.jpg)
Long-Polling• Solves the problem of extremes (wasted request
or stale data) by pushing updates to clients as they happen.
Web Server
Browser
Req
uest
Response
Process
Req
uest
Response
Process
Requ
est Response
ProcessR
eque
st
Response
Process
Req
uest
Response
Process
![Page 6: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/6.jpg)
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
• Script Tag LP
• IFrame
![Page 7: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/7.jpg)
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.
![Page 8: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/8.jpg)
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
![Page 9: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/9.jpg)
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.
![Page 10: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/10.jpg)
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.
![Page 11: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/11.jpg)
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.
![Page 12: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/12.jpg)
Fun time! Lets create a
WebSocket connection
![Page 13: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/13.jpg)
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)
![Page 14: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/14.jpg)
WebSocket ServersJava .NET Python Ruby PHP
Jetty SuperWebSocket websockify GoliathExtendible
Web Socket Server
jWebSocket Nugget pywebsocketsweb-socket-
ruby
Netty XSockets
GlassFish
Apache Active MQ
Tomcat
![Page 15: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/15.jpg)
Architecture
WebServer
WebSocket Server
1
2
3
4
Request
Serve Static Resources
Initiate WebSocket Connection
Upgrade Connection
5 Send Data
6 Receive Data
Event driven on both sides of the WebSocket connection.
![Page 16: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/16.jpg)
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
![Page 17: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/17.jpg)
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
![Page 18: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/18.jpg)
More fun!Using Jetty’s
WebSocketServlet.
![Page 19: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/19.jpg)
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.
![Page 20: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/20.jpg)
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
![Page 21: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/21.jpg)
Thank-you!
![Page 22: Web sockets primer](https://reader034.fdocuments.net/reader034/viewer/2022051209/5480cdc5b37959932b8b5d28/html5/thumbnails/22.jpg)
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