Building real-time-collaborative-web-applications

Building real-time-collaborative-web-applications

• 1.
  By Harbinger Systems Welcometo the webinar Building Real-time Collaborative Web Applications
• 2.
  Panellists Sachin Katariya Senior Manager BusinessDevelopment Asheesh Choksi Solutions Architect Umesh Kanade General Manager Technology Solutions
• 3.
  Overview Collaboration Real-Time Webbased
• 4.
  How business enablescollaboration? Engaging Web Portal Visitor Sign up and Email Blogs Interactive Chat Share Latest Information
• 5.
  Is Browser communicationnot 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 RealTime 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 RealTime 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 RealTime 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 1to 2 KB piggyback per request
• 10.
  New channel ofcommunication Web Sockets Full duplex No polling 2 bytes overhead No latency
• 11.
  Web Socket isHTTP 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 usingSocket 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 Eventsand 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 inAction 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 UseCase 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 browserbased 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 RealTime 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 collaborationfor annotation over web based content
• 22.
  Questions?
• 23.
  Thank You! Visit usat: www.harbinger-systems.com Write to us at: hsplinfo@harbingergroup.com 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