WebSocket - Enabling Technology for Dynamic Web Applications


Published on

WebSocket is a standardized interface for continuous, bi-directional and low-overhead communication between Web browser clients and back-end servers.

This presentation provides an overview of the WebSocket interface and descriptions of four WebSocket demonstration applications: i) a multi-user Facebook game; ii) a cloud server monitor; iii) a browser-based interface to LabVIEW; and iv) an interface to a MySQL database.

Presented Jan 26, 2011 at the HTML5 & CSS3 LA User Group Meetup, Los Angeles, CA

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WebSocket - Enabling Technology for Dynamic Web Applications

  1. 1. Bergmans Mechatronics LLC HTML5 WebSocket - Enabling Technology for Dynamic W b A li i D i Web Applications John Bergmans Bergmans Mechatronics LLC www.bergmans.com HTML5 & CSS3 User Group LA Los Angeles, CA Jan 26 20111616 Bedford Lane, Unit A Phone: 714-474-8956Newport Beach, CA 92660 Fax: 949-646-1429
  2. 2. Bergmans Mechatronics LLCSpeaker 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
  3. 3. Bergmans Mechatronics LLC 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 toCommunications 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
  4. 4. Bergmans Mechatronics LLCGeneralized 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
  5. 5. Bergmans Mechatronics LLCOverview• Review of current techniques for dynamic web applications• WebSocket introduction• WebSocket demonstration applications pp
  6. 6. Bergmans Mechatronics LLCPolling Image Copyright © 2011 - Kaazing Corporation Used by Permission Corporation. Permission.
  7. 7. Bergmans Mechatronics LLCLong Polling Image Copyright © 2011 - Kaazing Corporation Used by Permission Corporation. Permission.
  8. 8. Bergmans Mechatronics LLCWebSocket • 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)
  9. 9. Bergmans Mechatronics LLCBrowser/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
  10. 10. Bergmans Mechatronics LLCBrowser/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
  11. 11. Bergmans Mechatronics LLCSimple 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.
  12. 12. Bergmans Mechatronics LLCWireshark 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.
  13. 13. Bergmans Mechatronics LLCWebSocket • 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
  14. 14. Bergmans Mechatronics LLCEarthControl – Multiplayer Facebook Game http://apps.facebook.com/earthcontrol
  15. 15. Bergmans Mechatronics LLCBrowser – 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
  16. 16. Bergmans Mechatronics LLCPerformance• 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-HTML5browsers• 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)
  17. 17. Bergmans Mechatronics LLCBrowser - 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
  18. 18. Bergmans Mechatronics LLCBrowser - Server Interfacing (including Handshaking)Facebook iFrameEarthControl.php iFrame UID = User ID number XX = ship index number$facebook->api_client-> EarthControl_client.html YY = game id number gusers_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
  19. 19. Bergmans Mechatronics LLCCloud 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
  20. 20. Bergmans Mechatronics LLCCloud Server Monitor
  21. 21. Bergmans Mechatronics LLCRemote 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
  22. 22. Bergmans Mechatronics LLC“LabSocket” = LabVIEW + WebSocketLabSocket system uses WebSockets to enable automatic replication of LabVIEWfront 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 Desktop / Mobile Device Embedded Device
  23. 23. Bergmans Mechatronics LLC“LabSocket” = LabVIEW + WebSocketLabSocket system uses WebSockets to enable automatic replication of LabVIEWfront 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 Desktop / Mobile Device 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
  24. 24. Bergmans Mechatronics LLC“LabSocket” = LabVIEW + WebSocket• Video: http://screencast.com/t/eKuQ02PAdo LabVIEW Browser
  25. 25. Bergmans Mechatronics LLCScreenscrape SubVI Label for one LED
  26. 26. Bergmans Mechatronics LLCWebSocket as Alternative to HTTP Request-Response• Initial investigation into use of WebSocket to improve performance of HTTP- based phpMyAdmin
  27. 27. Bergmans Mechatronics LLCWebSocket as Potential Alternative to HTTP Request-ResponsephpMyAdmin – Popular MySQL Interface“Navigation” Frame “Content” Frame Hyperlink in HTML code for this single GUI element
  28. 28. Bergmans Mechatronics LLCphpMyAdmin – How It Works Browser Server1. User clicks on hyperlink in GUI2. 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 b7. Render page
  29. 29. Bergmans Mechatronics LLCWebSocket-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”
  30. 30. Bergmans Mechatronics LLCWebSocket-MyAdmin – How it Works Browser Server1. User action within GUI creates an event2. 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. A8. Create new table more refined approach would be9. Create new event WebSocket to update only those elements Connection which have changed. handlers
  31. 31. Bergmans Mechatronics LLCTest ResultsTesting 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
  32. 32. Bergmans Mechatronics LLCFuture 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