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

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. Thank You!
Copyright © 2013 Harbinger Systems
www.harbinger-systems.com
Sachin Katariya
Business Development
Harbinger Systems
www.harbinger-systems.com
sachink@harbingergroup.com
India [C] +91-992-204-4141
Skype: sachin.katariya