Post on 17-May-2015
description
transcript
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
Overview
• Review of current techniques for dynamic web applications
• WebSocket introduction
• WebSocket demonstration applicationspp
Bergmans Mechatronics LLC
Polling
Image Copyright © 2011 - Kaazing Corporation Used by PermissionImage Copyright © 2011 - Kaazing Corporation. Used by Permission.
Bergmans Mechatronics LLC
Long Polling
Image Copyright © 2011 - Kaazing Corporation Used by PermissionImage Copyright © 2011 - Kaazing Corporation. Used by Permission.
Bergmans Mechatronics LLC
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)
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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.
Bergmans Mechatronics LLC
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.
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
EarthControl – Multiplayer Facebook Game
http://apps.facebook.com/earthcontrol
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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)
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
Cloud Server Monitor
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
“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
Browser onDesktop or
Mobile Device
Server
Mobile DeviceDesktop / Embedded Device
Bergmans Mechatronics LLC
“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
Browser onDesktop or
Mobile Device
Server
Mobile DeviceDesktop / Embedded Device
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
Bergmans Mechatronics LLC
“LabSocket” = LabVIEW + WebSocket• Video: http://screencast.com/t/eKuQ02PAdo
LabVIEW Browser
Bergmans Mechatronics LLC
Screenscrape SubVI
Label for one LED
Bergmans Mechatronics LLC
WebSocket as Alternative to HTTP Request-Response• Initial investigation into use of WebSocket to improve performance of HTTP-
based phpMyAdmin
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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”
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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
Bergmans Mechatronics LLC
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