Digital Twinning: Create a Web App to View Telematics
With a reliable source of streaming data set up, I was ready to build a web app that could act as a participant in my baby MQTT network. Having used the HiveMQ web page to validate my server, I knew this was quite possible to do.
When building, I prefer to start with small achievable steps and build up to a more complex-seeming solution. In this case my initial goal was to start with a React app shell and establish a web socket connection to the MQTT server.
Another IoT company, EMQ, provides a public repo containing more than 20 implementations of MQTT client projects under MIT license. One of these is a React project, with which I was able to make a connection to my server in a matter of minutes. Once I did that I automated the connection and topic settings on startup to facilitate demoing.
To automate connecting, I added a useEffect hook to the Connection component to call handleConnect() with defaults that matched my MQTT values on startup:
To automate subscription to the Digital Twin topic, I followed the same approach in Subscriper.js;
From there I loaded a chart library and routed the incoming virtual device data to it. And this is where I first encountered some friction between my expectations and results. The first chart library I used did not handle time-series data (!). I proceeded to try several different libraries, and each had its quirks, strengths and weaknesses. I thought perhaps this was a result of using only open source, but I found similar results using a commercial package.
The libraries generally promise that you can plug in your data into a state hook and the chart will smoothly render the data as it arrives. In reality, streaming data caused distracting redrawing. Since chart updates are triggered by state change to the data, I shouldn’t be surprised. There are some choices that promised “continuous” display – I may return to those to see if I can use them, but they seemed to apply regularly spaced (timed) data points, which is anathema to a pub-sub event-driven system.
I finally decided to use Ant Design Charts, which has a line chart that most closely aligned with showing a rolling time series. I trimmed to the most recent 40 messages and the chart dynamically scaled the Y-axis based on the value range. If I was building a production solution I would consider creating a custom chart solution or perhaps extending a library to achieve the exact experience I had in mind. In this case the chart was a means to an end since I was planning to display a 3D model of the device instead. Github Repo
A production application would stream data to an Influx or TimescaleDB for caching in parallel with displaying. Not relevant for my use case unless I decide to introduce a record and playback animation feature.