Rethinking Web-Based Device Management

Many embedded systems use an embedded web server for device management but may not use the latest web technologies. Let's take a fresh look at web-based device management by using two modern technologies such as WebSockets and Vue.js to create a system-wide reactive user interface.

Vue.js and Reactive Applications

Frameworks such as AngularJS, ReactJS, and Vue.js greatly simplify the design of reactive applications. Many designers also consider AJAX and REST as reactive in nature. This may be true for applications that only require asynchronous message passing from the client to the server; however, for embedded systems, this model fails. In an embedded system, you may have alarms and other types of events that you want to push asynchronously and in real time to the web user interface. Polling the server using AJAX is not a good solution since reactive server events must be buffered on the server side until the next client poll cycle. This complicates the design and makes the user interface less responsive.

WebSockets

You may have an embedded web server in a device and created a user interface that you may think does not need any real-time events from the server. As an example, let's consider an embedded system controlling a light bulb. A basic web interface enables us to turn the light bulb on or off remotely. Initially, such a system does not appear to need any real-time data from the server, but have you considered what happens if two users using two different browsers try controlling the light bulb at the same time?

Embedded devices are shared resources

Providing a web interface to an embedded device requires the designer to think about the device as a shared resource. A designer cannot easily prevent multiple users from attempting to control the same hardware since anyone with access to the device can connect to it and bring up a web interface at any time.

In the above figure, two users are controlling a light bulb in a device. The "Set Event" and "Update Event" are similar to a standard AJAX RPC but with one major difference. The response is sent to both clients. This construction makes sure no connected user interfaces show stale information.

We can implement the logic required for the above user interface by using WebSockets. WebSockets provides a full-duplex asynchronous (reactive) communication channel over a single TCP connection. Because the WebSocket connections from the browsers are persistent, the embedded web server can now respond to all connected clients simultaneously.

A Real Working Example

A working example is worth a thousand words so I have assembled a fully functional reactive WebSocket application showing how to use WebSockets for controlling a light bulb. The complete example includes two Single Page Web Applications that can be loaded and run directly in the browser without having to install any software. The two applications: a Light Switch App designed using Vue.js and a Light Bulb App designed using JQuery.

See the full tutorial for details: Modern Approach to Embedding a Web Server in a Device

The following video shows how to use the two Single Page Web Applications: