By Harbinger Systems

Welcome to the webinarBuilding Real-time CollaborativeWeb Applications

Panellists

Sachin KatariyaSenior Manager

Business Development

Asheesh ChoksiSolutions Architect

Umesh KanadeGeneral Manager

Technology Solutions

Overview

Collaboration Real-Time

Web based

How business enables collaboration?

Engaging Web Portal Visitor Blogs

Interactive Chat

Share Latest Information

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

Comet for Real Time Communication in HTTPAjax 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

Requ

est

Response

Requests Per Second

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

Requ

est

Response

Requests Per Second

Comet for Real Time Communication in HTTPHTTP 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

Requ

est

Response

Requests Per Second

Overheads with HTTP

Headers

Cookies

1 to 2 KB piggyback

per request

New channel of communication

Web Sockets

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

Web Socket - How it Works?

Node JS + Socket IO

Application Server

LoadBalancer

Web Socket Socket IO

Node JS

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>

Supporting Browsers

•create web socket object

Non-supporting Browsers

•use Socket IO JS to open a socket

Web Socket using Socket IO

• Asynchronous I/O

• Broadcasting to multiple sockets

• Storing data associated with each client

Client Sid

e

•Socket IO JS•Runs within Browser

Server Sid

e

•Server side library for Node JS

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

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();

Header Traffic Analysis

Use Case A1000 client polling / sec

Use Case B10,000 clients polling /sec

Use Case C100,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

Scalability with WS

Source: http://www.websocket.org/quantum.html

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

You need Real Time collaboration

Online Gaming

Bidding Portals

E-Commerce

Collaborative 

Platforms

Social Apps

Social Networking AppsInteractivity between users

Online Gamingmassive multi-player online games and

live events

Online BiddingSynchronizing latest Bids and Asks

Product Store or ecommerceLogistics updates, order tracking

Collaborative PlatformsAuthoring, Idea sharing and building

Thank You!

Copyright © 2013 Harbinger Systems

www.harbinger-systems.com

Sachin Katariya Business Development

Harbinger Systemswww.harbinger-systems.comsachink@harbingergroup.com

India [C] +91-992-204-4141

Skype: sachin.katariya