Case Studies

Live-Updating Data Views with SignalR in React Web App

Posted in Application Development, Inventory and Warehouse Control, User Interface Design, Web Application Development

Summary

DMC developed a web application with a live data view that updates at a high frequency by leveraging web sockets to communicate between a React front-end client and a .NET Core back-end server. The client came to DMC asking for a warehouse test monitoring system that can update with data from hardware in real-time. Multiple web clients needed to be connected at once so multiple engineers could monitor a test, and the amount of data spanning over the test would get quite large, as these tests can run for over an hour, with data coming in many times a second for just one hardware component.

Solution

For an application of such scale, choosing the right development platform was very important. During the planning stages, DMC had considered three platforms as candidates for our solution: developing in LabVIEW, creating a .NET desktop application, or creating a web application. DMC chose to develop a web application for this solution because of the following advantages:

  • The enterprise-level software platform provides options for future scalability
  • Cross-platform compatibility for access via PC or mobile device, which meets the client's requirements for remote viewing capabilities
  • Easy to create a responsive UI to allow for screen resizing
  • Web browser natively supports viewing multiple windows simultaneously
  • Web sockets provide high-performance data transfer to ensure the displayed data is always up-to-date
  • Popular and well-supported graphing packages are available for web applications
  • Microsoft’s Entity Framework facilitates database querying and manipulation
  • Good integration with version control and continuous integration software to manage a large, multi-developer team

DMC was able to leverage many libraries compatible with the React and ASP.NET Core framework to make this happen and deliver the client with an aesthetically appealing, performant solution. On top of React, we made use of the powerful Redux state management library to control our application state. The chosen web socket solution allows for a high volume of data collection, real-time data display, and the connection of clients to essential data. We decided to use the SignalR library from Microsoft as our web socket implementation.

SignalR is an excellent library with thorough and comprehensive documentation. This library allowed us to create performant and powerful functionality for the client. Receiving test data and test status updates via a web socket rather than actively polling for them from the React app ensured that the user interface (UI) always had access to the same data, whether this be actual data for our graphs or information on what stage the test is in/important status updates. In general, Redux's underlying pattern of dispatching actions on events and reacting to these actions to update the application state works extremely well with web sockets.

Our polling for data, therefore, was done on the server. By using the Redux-saga library within our React app, our web-client acted reactively, waiting on messages and data received over our web socket connection. By harnessing the power of React and Redux, we could then update our application state and graph. We used some downsampling techniques and algorithms to preserve the shape of the data over time and maintain the performance of the graph as well. For some situations, we implemented our downsampling algorithms, such as when the time interval window of data being viewed dictated what we would show on the graph. Then, for other situations, we used the LTTB (largest triangle three buckets) downsampling algorithm.

In summary, DMC's ability to make the right choice between a field of platform options, and our resourceful use of different libraries for React and ASP.NET Core allowed us to offer an impressive solution to a request of great scale.

Learn more about DMC's Application Development Services. 

Customer Benefits

  • Real-time data
  • Remote viewing and multiple window functionality
  • Options for different views of data based on time interval selections
  • Performant, aesthetically pleasing graphs
  • Useful, specific data related to the hardware used in test
  • A solution that makes use of well supported, well-documented and modern technologies

Technologies