When Modern Web Dev Meets Industrial Data

Traditionally, industrial dashboards (HMIs) have been built using proprietary, heavyweight legacy software. But the landscape is shifting rapidly. With modern web technologies like Next.js, React, Tailwind CSS, and WebSockets, we can engineer custom, highly responsive dashboards that run anywhere on any device.

The Challenge

SCADA systems generate massive amounts of time-series data. The challenge is getting that telemetry from the plant floor (often via protocols like OPC-UA, MQTT, or Modbus) into a web browser with sub-50ms latency.

The Solution: WebSockets & React

By setting up an intermediate Node.js microservice or MQTT broker, we can subscribe to real-time industrial tag changes and stream them to our React frontend via persistent WebSockets.

Example React Telemetry Hook

import { useState, useEffect } from 'react';
 
export function useTelemetry(tagPath: string) {
  const [value, setValue] = useState<number | null>(null);
 
  useEffect(() => {
    const ws = new WebSocket('wss://telemetry.jaredtatro.com/live');
    
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.tag === tagPath) {
        setValue(data.value);
      }
    };
 
    return () => ws.close();
  }, [tagPath]);
 
  return value;
}

With this approach, we can combine industrial-grade data pipelines with modern UI components, hardware-accelerated animations, and responsive layouts to build interfaces that are both functional and visually stunning.