Embedding Web Servers has been used as an easy to use device management solution for eons. As an embedded engineer, chances are that you have already worked on this type of technology and have an understanding of the HTTP protocol. Chances are that you have also worked on some of the newer technologies such as AJAX and REST. However, the traditional GET/POST and/or using AJAX for transferring data between the browser and device may not be the best option. In this article, I will show you how to enhance your web based device management application and show you possibilities that will make your customers stand in awe at your new sexy user interface.
Stop Using HTTP
The first thing you must do is to stop using HTTP. OK, so if you stop using HTTP for communication, how do you exchange data between the browser and the server? The answer is WebSockets, which is a relatively new standard that brings real-time communication to the web. WebSockets is supported by all modern browsers and is designed to provide a full-duplex asynchronous communication channel over a single TCP connection.
The fact that Websockets provide a bi-directional communication channel between the browser and server immediately opens up some very interesting opportunities for web based device management applications. Because the connection is persistent, the embedded web server can now initiate communication with the browser. The embedded web server can send alerts, updates, notifications, etc.. This adds a whole new dimension to the types of web based device management applications that can be constructed.
Most embedded web device management applications currently operate by simply responding to user interactions. You click a button and this causes the browser to submit the data to the server. The server performs the command and responds with a new HTML page. This old technology works, but it is a very limiting model. OK, you may have moved beyond the simple GET/POST submit button horror and embraced AJAX/REST. However, the fact remains that AJAX is still a one way asynchronous message sent from the browser to the server and any real-time updates you want to display in the browser require dreadful polling of server resources. You may still think AJAX and REST are the best technology since sliced bread; however, in point of fact, the entire AJAX protocol could be built using Websockets technology. This makes Websockets literally a superset of AJAX so it makes sense that we might abandon a limiting technology for a broader technology.
Single Page Applications
A traditional web application refreshes every time a new page is loaded or the user clicks a submit button. This design concept is basically a no no when using WebSocket technology. If you embrace WebSockets then all communication between a browser and the server should preferably be via one WebSocket connection.
If you have a Facebook account or if you are using Gmail you may have noticed that these web applications do not refresh. There's a new name for these type of applications, they are called Single Page Applications or SPA for short. You can find plenty of information on this technology if you Google “Single Page Application”.
Single Page Applications and WebSockets go hand in hand. In its most basic form a single page HTML5 app is a browser-based application that does not refresh as the user interacts with the page. The best way to look at an SPA is to compare it to a standard desktop application.
Reactive programming is a programming paradigm oriented around data flows and the propagation of change. These events must be propagated to all connected browser user interfaces. For example, say we are designing a simple application for turning a light bulb on or off; the propagation of a user clicking the on/off switch must be propagated across all connected browser windows:
If the click event in one browser is not propagated to all connected browsers, the user interfaces become out of sync and the ones not updated will provide stale information to the user.
WebSockets enable us to respond to user inputs in real time and enable us to reactively update all connected browser user interfaces simultaneously.
A Real Working Example
A fully functional reactive WebSocket application has been prepared by Real Time Logic. 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. Simply drag and drop the two web applications into two browser windows and watch how the multiuser real time device management application communicate in real time. See the complete tutorial Modern Embedded Web Server Technology for more information.
Wilfred Nilsen, Founder & CTO of Real Time Logic, has 28 years' experience in designing embedded software. Powered by a vision of connected embedded systems, he designed the Barracuda Application Server, tailoring it for the small footprint, real-time needs of embedded microprocessors.