WebSocket - Enabling Technology for Dynamic Web Applications

Bergmans Mechatronics LLC

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

John Bergmans
www.bergmans.com

HTML5 & CSS3 User Group LA
Los Angeles, CA
Jan 26 2011

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

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
Ethernet Router
Laptop
LasIR Steel Ball
Electromagnet
g
NH3 M it
Monitor

Laser Alignment System
Processing Unit IR LED Port

Photodiode Detector Port

Laser-Based Laser Alignment Control System Technology
Instrumentation System Demonstrator

Generalized Technology Trends

Distributed
mainframes

dumb terminals commodity servers

desktops
d kt laptops
l t mobile
bil

‘60s – ’70s ‘80s – ’90s today
y Time
workstations,
desktops
Standalone

Fiber to
Communications Home
Speed
S d DSL / cable (2+ Gbit/sec)
(~10 Mbit/sec)
Phone modem
0.300
0 300 – 56 kbit/sec Note: SATA 2.0 = 2 4 Gbit/s
2 0 2.4

Generalized Technology Trends
• Increasing communications speeds, low cost commodity servers, low-cost high
performance “terminals” (Cloud access speed = local drive access speed)
p
promotes trend towards distributed, browser-based apps
, pp
(eg. Google Docs)

• Limitation of legacy browsers - no TCP/IP socket connectivity
g y y
forces 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 applications
pp

Polling

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

Long Polling

Image Copyright © 2011 - Kaazing Corporation Used by Permission
Corporation. 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
(request and response: ~900 b t vs W bS k t 4 b t )
( t d 900 bytes WebSocket: bytes)

Browser/Back-End Communications

Traditional interface between browser and web server

1) Data Request
Web Server Back-End
Browser 2) Reply Software Application

Desktop
D kt Server
S

Browser/Back-End Communications

Traditional interface between browser and web server

1) Data Request
Web Server Back-End
Browser 2) Reply Software Application

Desktop
D kt Server
S

Continuous bi-directional communication between browser
and server using WebSocket

Data to Back-End App
WebSocket Back-End
Browser
Data from Back-End App Server Application

Desktop WebSocket Server

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 button
send.onclick = function() {
log("SENT: " + message.value);
websocket.send(message.value);
};

// Handler for Disconnect button
disconnect.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.1
Upgrade: WebSocket
Connection: Upgrade
Host: student1.html5project.com:8001
Origin: http://student1.html5project.com:8000
Sec-WebSocket-Key1: 255742716( |7
Sec-WebSocket-Key2: Lr C 45 7 9E52 %] 78;w qo4
Cookie:
KSESSIONID=1kRqopFaGlLI6ioKPg5lj6I0gq+MT2TPo2gpKeqqeQm2bCcbesF+7A==

i......K
Server to Client:
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://student1.html5project.com:8000
Sec-WebSocket-Location:
ws://student1.html5project.com:8001/echo?.kl=Y
Server: Kaazing Gateway
Date: Mon, 24 Jan 2011 21:55:31 GMT
Access-Control-Allow-Origin: http://student1.html5project.com:8000
Access-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 Developer
em-websocket Ilya Grigorik of PostRank with other
contributors
jWebSocket jWebSocket.org
Jetty W bS k t S
J tt WebSocket Server Jetty
J tt
Kaazing WebSocket Gateway Kaazing Corp
pywebsocket pywebsocket opensource project
Pusher (based on em-websocket) New Bamboo
Resin
R i Caucho T h l
C h Technology I Inc.

• Kaazing Corp., Mountain View, CA (
g p, , (www.kaazing.com)
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
Game 1 Browsers Game 2 Browsers Game n Browsers

Browser Browser Browser Browser Browser Browser Browser Browser Browser
1 2 8 1 2 8 1 2 8

Kaazing
WebSocket
Gateway

ActiveMQ
Server

EarthControl EarthControl EarthControl EarthControl
Admin Game 1 Game 2 Game n
Legend
STOMP Message
MySQL Query / Result
MySQL
Database Game Instance
Linux Server
Li S Initialization
I iti li ti


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
browsers

• EarthControl functions well using these browsers
• Google Chrome (
g (version 2.0 or later)
)
• 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

function setup() EarthControl.php
E thC t l h
{ Topic “/topic/fromBrowserYY” (instance YY)
user-initiated events trigger Data ship_index, keypress data, etc
stomp.send()
Real-time game
g
Topic ” /topic/toBrowserXX_YY” support for
Data display data game YY
stomp.onmessage()
{
update display
}
}

XX = ship index number Server
YY = game id number

Browser


Browser - Server Interfacing (including Handshaking)
Facebook iFrame
EarthControl.php iFrame UID = User ID number
XX = ship index number
$facebook->api_client-> EarthControl_client.html YY = game id number
g
users_getInfo;
users getInfo;
function pre_setup()
function user info {
handleResponse() handleResponse()
EarthControl_Admin.php
} Subscribe to topic
function setup() Topic “/topic/fromBrowser_Admin” “/topic/fromBrowser_Admin”
{ D t user i f (name, UID, etc)
Data info ( UID t )
pre_setup() - Query SQL database
stomp.onopen()
- Assign game and
{
Topic “/topic/toBrowser_Admin_UID” ship_index
• subscribe to topic
“/topic/toBrowser_Admin_UID” Data game_id, ship_index - Start new game instance
• send user info (if necessary)
}
stomp onmessage()
{ EarthControl.php
if handshaking (instance YY)
• subscribe to top c
subsc be topic Topic “/topic/fromBrowserYY”
/topic/fromBrowserYY
“/topic/toBrowserXX_YY” Subscribe to topic
Data ship_index, “new_player” signal
• send user info “/topic/fromBrowserYY”
else Handshaking
Topic “/topic/toBrowserXX_YY”
• normal data
Data field data
processing Real-time game support for
game YY
} Topic “/topic/fromBrowserYY”
Data ship_index, keypress data, etc
• user-initiated gui events
• stomp.connect()
}

Browser Server

Cloud Server Monitor

• Monitor server performance without browser polling
• Provides output of “top” and “vmstat” to browser.
• Update rates:
• top: 2 Hz
• vmstat: 1 Hz
• Plots “top” output in HTML5 <canvas> element
top
• Idea for future work:
• Monitor and control of multiple servers

Browser on
Desktop or
Mobile Device Data transfer
D t t f
via
WebSocket

WebSocket Message Monitor
Gateway Broker Agent

Server

Cloud Server Monitor

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

LabVIEW
Browser on
Application
Laptop,
Desktop or
Desktop / Mobile Device
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
equipment monitoring
i t it i

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

“LabSocket” = LabVIEW + WebSocket

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

LabSocket Message WebSocket
Interface
I t f Broker
B k Gateway
G t
LabVIEW Data transfer
Data transfer
Application via Server Browser on
via
TCP/IP Socket Desktop or
WebSocket
Embedded Device


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

LabSocket Message WebSocket
Interface
I t f Broker
B k Gateway
G t
LabVIEW Data transfer
Data transfer
Application via Server Browser on
via
TCP/IP Socket Desktop or
WebSocket
Embedded Device

LabSocket Interface

Startup
- Establish 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
Update L bVIEW f
LabVIEW front panel b
l based on events generated i b
d d in browser

• 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
http
htt request t
http request for updated frame:
http://sql.php?db=...&table=...&sql_query=...&token=...
3. Confirm that this is an
authentic request
4. Process MySQL query
5. Generate new Content
frame with http
requests in hyperlinks
for each active element
(including all MySQL
html code for new frame which includes queries)
for every GUI element:
p q p p q _q y
http://sql.php?db=...&table=...&sql_query=...&token=...
6. Send new html code
for f
f frame to browser
b
7. Render page


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 notification
message Signal representing required action, eg:
“col_heading,col1”
3. Create MySQL query for
this action
4. Process MySQL query
5. Generate new GUI
elements and events
Browser control signals and data
1. del_html, 6. Send GUI elements and
2. add_html,<table><tr><td> …. events to browser
</td></tr></table>
3. add_column_event,col0…
7. Delete existing Note: In current demo, html code
table and events for entire table are
sent from server to browser. A
8. Create new table more refined approach would be
9. Create new event WebSocket to update only those elements
Connection which have changed.
handlers


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
less t
l transferred without element events (Note – phpMyAdmin d
f d ith t l t t (N t h M Ad i does not allow i
t ll in-
table element editing)

Number of packets Number of bytes Update time (sec)
phpMy WS- phpMy WS- phpMy WS-
Admin MyAdmin Admin MyAdmin Admin MyAdmin
with no with no with no
element element element element element element
events events events events events events
Browser to Server
Server to Browser
Total 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 up
p p
• Improved GUI element support

• Development of Demo Apps / Custom Applications
p pp pp

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

WebSocket - Enabling Technology for Dynamic Web Applications

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a WebSocket - Enabling Technology for Dynamic Web Applications

Similar a WebSocket - Enabling Technology for Dynamic Web Applications (20)

Último

Último (20)

WebSocket - Enabling Technology for Dynamic Web Applications