In this article, we will make a WebSockets dashboard application that provides real-time monitoring AND control of a NetBurner Core Module from a web browser. Previously in Part 1, we discussed the benefits of using WebSockets and demonstrated how to make a WebSockets application to remotely monitor the state of DIP switches on a NetBurner Core Module Development Kit. Next, we will build on the same example to show how we can also control the NetBurner Dev Kit’s integrated LED array in real-time from a browser using WebSockets.

If you missed “WebSockets for Real-Time Web and IoT Applications Part 1”, we reviewed the WebSocket technology, its advantages compared to HTTP and AJAX, and the basics for getting a functional monitoring-only example running on a NetBurner Core Module Dev Kit. We covered starting an HTTP server, upgrading an HTTP connection to a WebSocket connection, sending JSON objects through a WebSocket, and browser-side handling of WebSocket messages. Look at Part 1 if you need a refresher.

Just like Part 1, to get started, you’ll need to download an example from the NetBurner Github repository, create a new project in NBEclipse IDE, and then import the source files that you downloaded from the repository into the project. If necessary, the NBEclipse Getting Started Guide provides more detailed instructions on these steps and can be found here or in your NNDK install in /nburn/docs/Eclipse. Most importantly, you’ll need a NetBurner Core Module Development Kit (which comes with a MOD-DEV-70CR development breakout board and one of our NetBurner core modules).

1. Adding LED Toggle Switches to the Webpage

First we’ll start by adding the webpage front-end UI needed to toggle the LEDs on our MOD-DEV-70CR development breakout board (comes with all NetBurner Core Module Developers Kits or can be purchased separately and fitted to an existing NetBurner core module).

The block of HTML code above adds a CSS toggle switch to control the first LED on the MOD-DEV-70CR. This new CSS switch used for LED control is placed on our webpage so that it’s neighboring the CSS switch used to monitor the first DIP switch. The CSS switch for LED control in this code snippet has an ID of “ledcb0.” This ID will be used as a handle to allow us to get the value of the CSS switch, which will then be sent to the NetBurner module for parsing.

The above logic was added to InputTask() to receive the JSON object from the WebSocket and toggle the LEDs. The WebSocket is read from until a full JSON object is received. ConsumeSocket() is used to let us know when we have received a full JSON object by checking for an open bracket, ‘{‘, and a matching close bracket, ‘}’. After receiving a full JSON object, we call ParseInputForLedMask() to parse the JSON object for the LED number and it’s state.

After parsing the LED number and state, we write the value to the LEDs with WriteLEDs().

The animated images below show how all of this turns out.

6. Wrapping up

In the end, you’ll find yourself with an application that can monitor and control your NetBurner with the benefits of reduced latency and packet size supported by WebSockets! We hope this tutorial gives you enough information to get started with monitoring and controlling your own systems and components using WebSockets and a NetBurner Core Module. If you get stuck or want to share your implementation, please comment below!