Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building real-time-collaborative-web-applications


Published on

Webinar - Building Real-Time Collaborative Web Applications
The digital revolution has brought in a change in the way we communicate and collaborate. Research shows that number of mobile workers will reach up to 1.3 billion by 2015. The pace of information flow has been astounding. These factors have fuelled the pressing demand among customers, businesses, for real time web applications.

Real-time web applications have been around for many years. But today, the users expect collaborative, personalized and an amazingly interactive experience using real time web technologies.

Key Takeaways:

Key technology enablers for real-time collaboration
Supporting open source technologies such as Node.js, WebSocket and HTML5
Enriching user experience with real-time collaboration
Demonstration of a sample real-time collaborative web application
Performance benchmarks

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building real-time-collaborative-web-applications

  1. 1. By Harbinger Systems Welcome to the webinar Building Real-time Collaborative Web Applications
  2. 2. Panellists Sachin Katariya Senior Manager Business Development Asheesh Choksi Solutions Architect Umesh Kanade General Manager Technology Solutions
  3. 3. Overview Collaboration Real-Time Web based
  4. 4. How business enables collaboration? Engaging Web Portal Visitor Sign up and Email Blogs Interactive Chat Share Latest Information
  5. 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. 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. 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. 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. 9. Overheads with HTTP Headers Cookies 1 to 2 KB piggyback per request
  10. 10. New channel of communication Web Sockets Full duplex No polling 2 bytes overhead No latency
  11. 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. 12. Web Socket - How it Works? Node JS + Socket IO Application Server Load Balancer Web Socket Socket IO Node JS
  13. 13. Web Socket - Browser Side <script src="/"></script> <script> var socket = io.connect(''); 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. 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. 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. 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. 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:
  18. 18. Scalability with WS Source:
  19. 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. 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. 21. Demo • Online collaboration for annotation over web based content
  22. 22. Questions?
  23. 23. Thank You! Visit us at: Write to us at: Blog: Twitter: (@HarbingerSys) Slideshare: Facebook: LinkedIn: Follow us