Building real-time-collaborative-web-applications
0 likes2,538 views
The webinar discusses building real-time collaborative web applications, focusing on the challenges of traditional browser-server communication and introducing WebSockets as a more efficient alternative. It highlights the importance of real-time interaction in various applications, such as online gaming and e-commerce, and provides a comparison of different communication methods like long polling and HTTP streaming. Key features of WebRTC for peer-to-peer communication are also covered, emphasizing its role in effective online collaboration.
Building real-time-collaborative-web-applications
- 1. By Harbinger Systems Welcome to the webinar Building Real-time Collaborative Web Applications
- 2. Panellists Sachin Katariya Senior Manager Business Development Asheesh Choksi Solutions Architect Umesh Kanade General Manager Technology Solutions
- 3. Overview Collaboration Real-Time Web based
- 4. How business enables collaboration? Engaging Web Portal Visitor Sign up and Email Blogs Interactive Chat Share Latest Information
- 5. Is Browser communication not Real-time? ⢠Browser gets data from server ⢠Once the data is served the connection is released. ⢠Now Browser is not aware of any changes in data on server. ⢠Browser must re-connect to server to get hot data HTTP is Half Duplex Web Browser Web Server Web browser requests the web page Web server serves the web page
- 6. Comet for Real Time Communication in HTTP Ajax Polling ⢠Asynchronous request to server ⢠Server breaks the connection after serving response ⢠Browser keeps repeating the Ajax request at an interval ⢠Browser makes many empty request for getting one hot data Heavy on network resources. Web Browser Web Server Request Response Requests Per Second
- 7. Comet for Real Time Communication in HTTP Long Polling ⢠Makes a prudent use of network resources; browser makes request and sets timeout ⢠Server sends response only when hot data is available ⢠Server breaks connection after serving response ⢠The connection may also timeout One HTTP connection is almost blocked by Long Polling Web Browser Web Server Request Response Requests Per Second
- 8. Comet for Real Time Communication in HTTP HTTP Streaming ⢠HTTP connection persists beyond sending the response Server sends response when hot data is available ⢠Server Does NOT break the connection after serving response. ⢠The connection does not time out. One HTTP connection is always blocked by Streaming Web Browser Web Server Request Response Requests Per Second
- 9. Overheads with HTTP Headers Cookies 1 to 2 KB piggyback per request
- 10. New channel of communication Web Sockets Full duplex No polling 2 bytes overhead No latency
- 11. Web Socket is HTTP friendly Uses Upgrade Header ⢠HTTP/1.1 specs ⢠a new protocol for communication Compatible handshake ⢠Cookie based authentication on connect ⢠Listens on serverâs port ⢠ws:// on port 80 ⢠wss:// on port 443 Traverses Proxies and Firewalls
- 12. Web Socket - How it Works? Node JS + Socket IO Application Server Load Balancer Web Socket Socket IO Node JS
- 13. Web Socket - Browser Side <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://10.0.1.251'); socket.on('info', function (data) { socket.emit('my other event', { my: 'data' }); }); </script> ⢠create web socket object Supporting Browsers ⢠use Socket IO JS to open a socket Non-supporting Browsers
- 14. Web Socket using Socket IO ⢠Asynchronous I/O ⢠Broadcasting to multiple sockets ⢠Storing data associated with each client ClientSide ⢠Socket IO JS ⢠Runs within Browser ServerSide ⢠Server side library for Node JS
- 15. Web Socket Events and Methods Event Event Handler Description Open Socket.onopen socket connection is established Message Socket.onmessage client receives data from server Error Socket.onerror error in communication close Socket.onclose connection is closed Method Description Socket.send() send(data) transmits data using connection Socket.close() close() is used to terminate any existing connection
- 16. Web Socket in Action var ws = new WebSocket(ws://<host ip>); ws.onopen = function(){ // logic on opening the connection }; ws.onmessage = function(){ // when server sends data }; ws.onsend = function(){ // send data to server }; ws.onclose = function(){ // when connection is closed }; ws.close();
- 17. Header Traffic Analysis Use Case A 1000 client polling / sec Use Case B 10,000 clients polling /sec Use Case C 100,000 clients polling / sec HTTP 871,000 bytes (6.6 Mbps) (8,710,000 bytes) (66 Mbps) (87,100,000 bytes) (665 Mbps) Web Sockets 2 x 1000 bytes (16000 bps) (0.015 Mbps) 20,000 bytes (0.153 Mbps) 200,000 bytes (1.526 Mbps) Source: http://www.websocket.org/quantum.html
- 18. Scalability with WS Source: http://www.websocket.org/quantum.html
- 19. WebRTC WebRTC is browser based real time (peer to peer) collaboration APIs, Open source by Google and is been standardized by IETF Major features of WebRTC are: ⢠GetMedia API to get access to local camera and microphone ⢠A PeerConnection sets up the audio/video calls ⢠DataChannels allow browsers to share data via peer-to-peer Currently these features are supported by latest versions of Chrome and Firefox
- 20. You need Real Time collaboration Online Gaming Bidding Portals E-Commerce Collaborative Platforms Social Apps Social Networking Apps Interactivity between users Online Gaming massive multi-player online games and live events Online Bidding Synchronizing latest Bids and Asks Product Store or ecommerce Logistics updates, order tracking Collaborative Platforms Authoring, Idea sharing and building
- 21. Demo ⢠Online collaboration for annotation over web based content
- 22. Questions?
- 23. Thank You! Visit us at: www.harbinger-systems.com Write to us at: [email protected] Blog: blog.harbinger-systems.com Twitter: twitter.com/HarbingerSys (@HarbingerSys) Slideshare: slideshare.net/hsplmkting Facebook: facebook.com/harbingersys LinkedIn: linkedin.com/company/382306 Follow us