Live measurement data in your browser with Websocket and LabVIEW

Websocket is a modern technology, that enables fast event-driven communication between a web browser and a server. In this article I show how LabVIEW and a browser can make up a distributed measurement data visualization system.

Evaluation of visualization and transfer techniques

Several techniques are available for viewing live measurement data on a server remotely:

  • Webservices
  • Browser Plug-ins, e.g. Microsoft Silverlight and NI Remote Panels
  • Apps, e.g NI Data Dashboard for LabVIEW

Apps for data visualization have the big disadvantage that they only run on specific systems they have been designed for. User customization is limited.  Browser plug-ins offer better options for customization but visualization is limited to supported browsers. With a vast variety of browsers (e.g. Chrome, Fireforx, IE, Opera, …) and operating systems (Windows, MacOS, Linux, iOS, Android, Windows Phone, …) no browser plug-in is capable of supporting all of them. Not even a whopper like Flash is available for all those named.

All network connected devices with a monitor already bring at least one program meeting widespread standards that is great for data visualization and user interaction. It is the web browser.

Webservices are a standardized way for servers to provide raw data to a client. When the update interval of sets of data is relatively slow like 1 second or more a Webservice is great. HTML and JavaScript offer most capabilities to create meaningfull and state-of-the-art data visualizations one can wish for.
However, Webservices reach their limits when fast responses and high update rates are required in server-client communication. This is due to the fact, that the browser needs to constantly poll the server with http-requests for new data, which implies a big data overhead and costs processing time.

A technology called Websocket was developed to allow fast server-client communication where Webservices reach their limits. Websocket communication is based on a TCP connection and allows sending text or binary messages back and forth between webbrowser and server.  Because it is directly transmitting TCP packets, there is only little protocol overhead on top of the data compared to http-request based Webservices.
Another advantage of Websocket is its event-based nature in contrast to polling Webservices. Websocket allows either communication endpoint to transmit a message only if new data is available.

The conclusion is that Websocket is a technology that allows fast and lightweight communication between browser and server. All modern browsers support Websockets.

 Data Visualization

Sending data, let’s say generated by some physical measurement, to the browser is the first half of creating state-of-the-art monitoring systems. Visualization is the second half. Free, powerful libraries and tools are available to craft graphs, charts, indicators and controls based on JavaScript and SVG.

Just to give you an impression here, I created a very simple graph. It is based on Michael Bostock’s D3JS and this tutorial.

Putting the bricks together

National Instruments LabVIEW is the natural friend of measurement data on a PC or embedded system. As we see above, a browser is capable of optically pleasing visualization. Websocket technology takes data from the server to the browser.

Now let’s use it all together! Use LabVIEW to generate your measurement data and a Websocket server to transmit it to a chart in the browser.
I implemented a LabVIEW Websocket Libary which makes it a cinch to set up your own LabVIEW Websocket server and communicate with a browser at high speeds. The library is easy to use: Wait for a new TCP connection with  the VI „Connection Listener“. Then (possibly in an asynchronously started VI), establish the Websocket session with „Negotiate Websocket Connection“ and start reading and writing with „Send Text Message“ and „Receive Text Message“. Finally, close the connection with the VI „Close Session“.

LabVIEW Websocket Libary VIs

LabVIEW Websocket Libary VIs:
Connection Listener, Negotiate Websocket Connection, Send Text Message, Receive Text Message, Close Session

The library sends and receives string data. I advise you to make use of JSON for your messages because this is absolutely easy to process for both LabVIEW and JavaScript. You do not want to re-invent the wheel by creating your own message protocol.

Finally, learn some JavaScript and leverage D3JS to create the coolest monitoring system you can imagine.

LabVIEW Websocket Example

I created an example project for you to get your hands on to Websockets and D3JS combined with LabVIEW. The example project comprises a multiple-instance (connections) capable Websocket server that transmits „measurement“ (actually calculated)  data to the client / webbrowser. The browser displays a graph similar to the one seen above.

Also, the same Websocket connection is used in parallel to transfer text data back and forth between the client and the server. Think of this as a chat program.

Webpage frontend to websocket connection

Webpage frontend to websocket connection

screenshot instance handler

LabVIEW Websocket server instance handler

screenshot labview websocket server

LabVIEW Websocket Server frontpanel with current connection count

 Files

I provide an example project for you to try out Websocket technology with LabVIEW. It requires LabVIEW 2013 – nothing older or newer will work. It runs on Windows only.

The included LabVIEW Websocket library is a trial version, limited to a length of 126 Bytes (characters) per message.

If you are interested in using my LabVIEW Websocket library without message length limit, please contact me using the comment form below. Comments are not published immediately and of course I will not publish any personal message to me.

LabVIEW 2013 Websocket Example Project.zip

4 Gedanken zu „Live measurement data in your browser with Websocket and LabVIEW

  1. Hi Fabian,

    I am doing a project for the company where I work using Labview. It is a „diploma arbeit“
    I am struggling trying to fin out how I can communicate data in json format to a java servlet. Shall I use this type of websockets for that? Could I communicate to a java servlet using websockets in Labview. I dont know, but any help would be great.

    Thank you in advanced

  2. Hi Vidina, you sure could use Websocket technology in your Java Servlet, I am sure there are client and server implementations available.
    As I described in my article, Websocket is great for server communication from the webbrowser. Using Websocket for communications between a Java application on the server and a LabVIEW application on the same server is possible but a direct TCP connection is probably easier in that case.
    Please note that my Websocket library is server only.

  3. I had a thought of using d3js with LabVIEW… So I googled it like a good engineer… And found this. Looks like what I’m looking for. Do you have more info?

  4. d3js is a great framework but requires some effort to master its concepts. d3js and LabVIEW definitely make up a good couple. My article is just a starting point though.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.