WebSocket - Enabling Technology for Dynamic Web Applications

B e r g m a n s M e c h a t r o n i c s L L C

HTML5 WebSocket - Enabling Technology for D i W b A li iDynamic Web Applications

John BergmansBergmans Mechatronics LLC

www.bergmans.com

HTML5 & CSS3 User Group LA Los Angeles, CA

Jan 26 2011

1616 Bedford Lane, Unit A Phone: 714-474-8956Newport Beach, CA 92660 Fax: 949-646-1429

Bergmans Mechatronics LLC

Speaker Intro• Operating Bergmans Mechatronics since 2003• Real-time Web App researcher• Developer of data acquisition and control systems, using LabVIEW and C

Rocket Motor Data Acquisition and Control Systems

ElectromagnetSteel BallLasIR

NH3 M it

Laptop Ethernet Router

g

IR LED Port

NH3 Monitor

Laser Alignment SystemProcessingUnit

Laser-Based Control System Technology

IR LED Port

Photodiode Detector Port

Laser Alignment

Processing Unit

Laser-Based Instrumentation

Control System TechnologyDemonstrator

Laser AlignmentSystem


Generalized Technology Trends

Distributed mainframes

dumb terminals commodity servers

d kt l t bil

Time

desktops laptops mobile

‘80s – ’90s‘60s – ’70s today Time

Standalone

workstations, desktops

y

CommunicationsS d DSL / cable

Fiber toHome

(2+ Gbit/sec)

Phone modem0 300 – 56 kbit/sec

Speed DSL / cable (~10 Mbit/sec)

(2+ Gbit/sec)

Note: SATA 2 0 = 2 4 Gbit/s0.300 – 56 kbit/sec Note: SATA 2.0 = 2.4 Gbit/s


Generalized Technology Trends• Increasing communications speeds, low cost commodity servers, low-cost high

performance “terminals” (Cloud access speed = local drive access speed)promotes trend towards distributed, browser-based apps p , pp(eg. Google Docs)

• Limitation of legacy browsers - no TCP/IP socket connectivity g y yforces use of HTTP request/response

• WebSockets• socket-like connectivity for browsers• enabling technology for distributed apps


Overview

• Review of current techniques for dynamic web applications

• WebSocket introduction

• WebSocket demonstration applicationspp


Polling

Image Copyright © 2011 - Kaazing Corporation Used by PermissionImage Copyright © 2011 - Kaazing Corporation. Used by Permission.


Long Polling

Image Copyright © 2011 - Kaazing Corporation Used by PermissionImage Copyright © 2011 - Kaazing Corporation. Used by Permission.


WebSocket

• Enables continuous, bidirectional communications between browser and server

• Specification defined by W3C (API) and IETF (protocol)

• Simple browser and back-end implementation

• Substantially reduced header info size ( t d 900 b t W bS k t 4 b t )(request and response: ~900 bytes vs WebSocket: 4 bytes)


Browser/Back-End Communications

Traditional interface between browser and web server

D kt S

1) Data Request

2) ReplyBack-End

ApplicationBrowser Web ServerSoftware

Desktop Server


Browser/Back-End Communications

Traditional interface between browser and web server

D kt S

1) Data Request

2) ReplyBack-End

ApplicationBrowser Web ServerSoftware

Desktop Server

Continuous bi-directional communication between browser and server using WebSocket

WebSocketServer

Back-EndApplication

Browser

Data to Back-End App

Data from Back-End App

Desktop ServerWebSocket


Simple and Standardized API// Handler for Connect button

connect.onclick = function() {websocket = new WebSocket(location_.value);

websocket.onopen = function(evt) {log("CONNECTED");connect.disabled = true;disconnect.disabled = false;send.disabled = false;

}

websocket.onmessage = function(evt) {response("RESPONSE: " + evt.data);

}

websocket.onclose = function(evt) {log("DISCONNECTED");connect.disabled = false;disconnect.disabled = true;send.disabled = true;

}};};

// Handler for Send buttonsend.onclick = function() {

log("SENT: " + message.value);websocket.send(message.value);

};};

// Handler for Disconnect buttondisconnect.onclick = function() {

websocket.close();};

Code and Image Copyright © 2011 - Kaazing Corporation.Used by Permission.


Wireshark Trace of Echo Demo

Client to Server:GET /echo?.kl=Y HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: student1.html5project.com:8001Origin: http://student1.html5project.com:8000Sec-WebSocket-Key1: 255742716( |7Sec-WebSocket-Key2: Lr C 45 7 9E52 %] 78;w qo4Cookie:Cookie: KSESSIONID=1kRqopFaGlLI6ioKPg5lj6I0gq+MT2TPo2gpKeqqeQm2bCcbesF+7A==

i......K

Server to Client:HTTP/1.1 101 Web Socket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://student1.html5project.com:8000Sec-WebSocket-Location: ws://student1.html5project.com:8001/echo?.kl=YServer: Kaazing GatewayServer: Kaazing GatewayDate: Mon, 24 Jan 2011 21:55:31 GMTAccess-Control-Allow-Origin: http://student1.html5project.com:8000Access-Control-Allow-Credentials: true

.....w.......fw.....N.

Client to Server:.Hello, WebSocket!.

Server to Client:.Hello, WebSocket!.

Copyright © 2011 - Kaazing Corporation. Used by Permission.


WebSocket

• Multiple organizations developing WebSocket servers

System Developerem-websocket Ilya Grigorik of PostRank with other

contributorsjWebSocket jWebSocket.orgJ tt W bS k t S J ttJetty WebSocket Server JettyKaazing WebSocket Gateway Kaazing Corppywebsocket pywebsocket opensource projectPusher (based on em-websocket) New BambooR i C h T h l I

• Kaazing Corp., Mountain View, CA (www.kaazing.com)

Resin Caucho Technology Inc.

g p , , ( g )• Developer of commercial WebSocket gateway• Emulation for legacy and mobile browsers• User authorization• Secure WebSockets • Contributor to HTML5 spec• Disclosure: BML has referral agreement with and is contractor to

Kaazing


EarthControl – Multiplayer Facebook Game

http://apps.facebook.com/earthcontrol


Browser – Server Architecture for EarthControl Application

BrowserBrowser BrowserBrowser BrowserBrowser BrowserBrowser BrowserBrowser BrowserBrowser BrowserBrowser BrowserBrowser BrowserBrowser

Game 1 Browsers Game 2 Browsers Game n Browsers

11 22 88 11 22 88 11 22 88

KaazingWebSocket

Gateway

ActiveMQServer

EarthControl Admin

EarthControl Admin

EarthControlGame 1

EarthControlGame 1

EarthControlGame 2

EarthControlGame 2

EarthControlGame n

EarthControlGame n

Legend

Li S

MySQLDatabaseMySQL

Database

LegendSTOMP Message

MySQL Query / Result

Game InstanceI iti li tiLinux Server Initialization


Performance• Typical server transmit rate to each browser:

char string approximately 340 character in length at about 10 Hz ≈ 3400 bytes/sec

• Latency between user input and display update: <~100 ms.

• Kaazing’s WebSocket Emulation enables WebSocket capability on current non-HTML5 bbrowsers

• EarthControl functions well using these browsers• Google Chrome (version 2.0 or later) g ( )• Safari (version 4.0 or later)• Firefox (version 3.0 or later)• Internet Explorer (version 7.0 or later)


Browser - Server Interfacing (Steady State)Facebook iFrame

iFrame

EarthControl_client.html

E thC t l hfunction setup() EarthControl.php(instance YY)

function setup(){user-initiated events trigger

stomp.send()Real-time game

Topic “/topic/fromBrowserYY”Data ship_index, keypress data, etc

stomp.onmessage(){update display

gsupport forgame YY

Topic ” /topic/toBrowserXX_YY”Data display data

update display}

}

ServerXX = ship index numberYY = game id number

Browser


Browser - Server Interfacing (including Handshaking)

EarthControl.php

EarthControl_client.html$facebook->api_client->users getInfo;

Facebook iFrameiFrame UID = User ID number

XX = ship index numberYY = game id number

EarthControl_Admin.php

users_getInfo;

functionhandleResponse()

function pre_setup(){handleResponse()}

function setup(){

Topic “/topic/fromBrowser_Admin”D t i f ( UID t )

user info

g

Subscribe to topic“/topic/fromBrowser_Admin”

{pre_setup()stomp.onopen()

{• subscribe to topic “/topic/toBrowser_Admin_UID”

Data user info (name, UID, etc)

Topic “/topic/toBrowser_Admin_UID”Data game_id, ship_index

- Query SQL database

- Assign game and ship_index

- Start new game instance

EarthControl.php(instance YY)

• send user info}

stomp onmessage(){if handshaking

• subscribe to topic

(if necessary)

Topic “/topic/fromBrowserYY”subsc be to top c“/topic/toBrowserXX_YY”• send user info

else• normal data processing

Subscribe to topic“/topic/fromBrowserYY”

Topic “/topic/toBrowserXX_YY”Data field data

Topic /topic/fromBrowserYYData ship_index, “new_player” signal

Handshaking

Real-time game support forgame YY

}

• user-initiated gui events• stomp.connect()}

Topic “/topic/fromBrowserYY”Data ship_index, keypress data, etc

game YY

Browser Server


Cloud Server Monitor

• Monitor server performance without browser polling • Provides output of “top” and “vmstat” to browser.

Update rates:• Update rates:• top: 2 Hz• vmstat: 1 Hz

• Plots “top” output in HTML5 <canvas> element• Plots top output in HTML5 <canvas> element• Idea for future work:

• Monitor and control of multiple servers

D t t f

Browser onDesktop or

Mobile Device Data transfer via

WebSocket

WebSocket Message

Mobile Device

MonitorGateway Broker

Server

Agent


Cloud Server Monitor


Remote Access to LabVIEW Application• Goal: monitor and control a LabVIEW application using a plug-in-free browser

LabVIEW Application Browser on

Laptop, Desktop or

Mobile DeviceDesktop / Embedded Device

• Potential Use-Cases

• Monitor and control a LabVIEW-controlled lab test from the desktop in office or on the road using a mobile device

• Monitor large-scale LabVIEW application by crews in the field – ie oil rig i t it iequipment monitoring

• For low-cost embedded systems – eliminate physical UI by using browser to interface to deviceinterface to device


“LabSocket” = LabVIEW + WebSocket

LabSocket system uses WebSockets to enable automatic replication of LabVIEW front panel in a browser without plug-ins

WebSocketG t

MessageB k

LabSocketI t f

Data transfer via

WebSocket

Data transfer via

TCP/IP Socket

LabVIEW Application

GatewayBrokerInterface


Mobile Device

Server



“LabSocket” = LabVIEW + WebSocket

LabSocket system uses WebSockets to enable automatic replication of LabVIEW front panel in a browser without plug-ins

WebSocketG t

MessageB k

LabSocketI t f

Data transfer via

WebSocket

Data transfer via

TCP/IP Socket

LabVIEW Application

GatewayBrokerInterface


Mobile Device

Server


LabSocket Interface

Startup- Establish TCP/IP socket connection to message brokerEstablish TCP/IP socket connection to message broker- LabVIEW Front Panel Screen Scrape, send JavaScript code to web server

Steady-state- Transmit updates in LabVIEW front panel to browser

U d L bVIEW f l b d d i b- Update LabVIEW front panel based on events generated in browser


“LabSocket” = LabVIEW + WebSocket• Video: http://screencast.com/t/eKuQ02PAdo

LabVIEW Browser


Screenscrape SubVI

Label for one LED


WebSocket as Alternative to HTTP Request-Response• Initial investigation into use of WebSocket to improve performance of HTTP-

based phpMyAdmin


WebSocket as Potential Alternative to HTTP Request-Response

phpMyAdmin – Popular MySQL Interface

“Navigation” Frame “Content” Frame

Hyperlink in HTML code for this single GUI element


phpMyAdmin – How It Works

Browser Server

1. User clicks on hyperlink in GUI

2. JavaScript creates htt thttp request

http request for updated frame:http://sql.php?db=...&table=...&sql_query=...&token=...

3. Confirm that this is an authentic request

4. Process MySQL query5. Generate new Content

frame with http requests in hyperlinks ffor each active element (including all MySQL queries)

6. Send new html code f f b

html code for new frame which includes for every GUI element:http://sql.php?db=...&table=...&sql_query=...&token=...

for frame to browser7. Render pagep q p p q _q y


WebSocket-MyAdmin – Simplified WebSocket-based MySQL Interface• Objective: To illustrate performance improvements available by using WebSocket

HTML for this element

Event handlers are programmatically assigned to each active GUI element in client-side JavaScript. eg. Columns heading event handlers are assigned using:

If “col1” is pressed client sends to server via WebSocket: “col_heading,col1”


WebSocket-MyAdmin – How it Works

Browser Server

1. User action within GUI creates an event

2. Event handler creates event notificationevent notification message Signal representing required action, eg:

“col_heading,col1”3. Create MySQL query for

this action4. Process MySQL query5. Generate new GUI

elements and events6. Send GUI elements and Browser control signals and data

1. del_html,events to browser

7. Delete existing table

2. add_html,<table><tr><td> …. </td></tr></table>

3. add_column_event,col0…

Note: In current demo, html code and events for entire table are table

8. Create new table9. Create new event

handlers

sent from server to browser. A more refined approach would be to update only those elements which have changed.

WebSocketConnection


Test Results

Testing two cases for WebSocket configuration (with and without element events) and phpMyAdmin. In all cases – column sort of 10x10 matrix

• WebSocket interface was always faster• Relative to phpMyAdmin more data transferred with element events, slightly

l t f d ith t l t t (N t h M Ad i d t ll iless transferred without element events (Note – phpMyAdmin does not allow in-table element editing)

Number of packets Number of bytes Update time (sec)phpMyAdmin

WS-MyAdmin

phpMyAdmin

WS-MyAdmin

phpMyAdmin

WS-MyAdmin

with element

no element

with element

no element

with element

no elementelement

eventselement events

element events

element events

element events

element events

Browser to ServerServer to BrowserTotal 35 48 16 11901 36773 8638 1.16 0.53 0.43


Future Work• LabVIEW Cloud service

• Allow LabVIEW developers to automatically set up applications• Subscription set upp p• Improved GUI element support

• Development of Demo Apps / Custom Applicationsp pp pp

• Research• Investigation in other applications for WebSocket• Further comparisons of WebSockets to HTTP

WebSocket - Enabling Technology for Dynamic Web Applications

Technology

websocket connection

value websocket

upgrade secwebsocket

browserand server

server specification

data requestweb server

kaazing corporation

permission corporation