Dashboard Industrial IoT: OPC UA ke Kafka ke WebSocket, dirender langsung

01Masalah

• Telemetri industri hanya berguna kalau operator bisa melihatnya: tegangan, arus, dan daya 3 fasa, status breaker dan proteksi, serta ambang batas mana yang terlampaui.
• Membangun tampilan itu biasanya butuh akses ke plant yang hidup, atau rekaman data plant, sebelum pekerjaan antarmuka bisa dimulai.

02Batasan

• Dashboard ini adalah tahap terakhir dari pipeline tiga bagian, jadi kontrak pesannya ditentukan oleh bridge di hulu, bukan dipilih bebas.
• Harus bisa didemokan tanpa backend sama sekali, kalau tidak antarmukanya tidak bisa direview atau ditunjukkan sendiri.
• Transport live-nya adalah WebSocket yang membawa stream terus-menerus, jadi klien harus menangani koneksi putus, langganan topik, dan render ulang yang konstan.
• Payload yang masuk berupa map datar berisi nama tag OPC, bukan objek bersarang yang rapi, sehingga lapisan transformasi wajib ada.

03Arsitektur dan aliran data

• Edge: simulator OPC UA mempublikasikan nilai sensor ke topik Kafka sensor-data.
• Transport: kafka-ws-bridge berlangganan topik itu dan menyiarkan setiap pesan ke klien WebSocket yang berlangganan di /ws/sensor-data.
• Presentasi: aplikasi ini terhubung ke ws://localhost:8000/ws dengan topik sensor-data, lalu merender payload yang diterimanya.
• Satu toggle di header mengganti seluruh pohon komponen antara sumber WebSocket langsung dan simulator bawaan.
• Lapisan transformasi mendekode tag OPC datar seperti OPC_PM_AMC_ACREL:UA_V, IA, dan PA menjadi bacaan 3 fasa bertipe, serta tag seperti OPC_BoardIO:CLS_F5_M3_DI_1 menjadi status digital I/O dan proteksi.

04Keputusan engineering

• Kontrak wire-nya diberi tipe di satu tempat sebagai WsEnvelope, WsClientCommand, SensorData, DigitalIOStatus, dan AlarmEvent, sehingga sumber live maupun simulasi menghasilkan bentuk yang identik dan tidak ada komponen yang perlu bercabang berdasarkan asal data.
• Pesan difilter berdasarkan nama event pada envelope, sehingga frame pembuka koneksi dan frame data berbagi satu socket tanpa bocor ke UI.
• Frame tipe Blob dan teks dua-duanya ditangani, karena bridge bisa mengirim payload dengan salah satu dari keduanya.
• Klien melakukan reconnect otomatis setelah jeda singkat alih-alih menampilkan socket mati, karena layar monitoring seharusnya pulih sendiri.
• Simulator dijadikan mode kelas satu, bukan file fixture, karena sekaligus berfungsi sebagai demo mandiri.

05Pengujian dan verifikasi

• Build produksi menjalankan compiler TypeScript sebelum Vite, sehingga error tipe menggagalkan build alih-alih ikut terkirim.
• Kesenjangan yang diakui: tidak ada test otomatis. Pemeriksaan otomatisnya hanya type-check dan lint, dan tidak ada workflow CI yang menjalankannya saat push.
• Simulasinya sendiri adalah verifikasi praktis: mode mock melewati jalur transformasi dan rendering yang sama dengan mode live.
• Ada jalur error di lapisan transformasi yang dijaga karena bentuk payload dari simulator masih berkembang saat pengembangan, dan ini terdokumentasi di kodenya.

06Yang terbukti saat ini

• Dashboard yang berfungsi, mencakup analitik daya 3 fasa, digital I/O dengan trip proteksi, dan log alarm ambang batas.
• Berjalan mandiri lewat mode mock, dan berjalan terhadap pipeline nyata lewat mode WebSocket.
• Yang tidak diklaim: tidak ada angka latensi, laju pesan, atau skala yang terukur, karena tidak ada yang dipublikasikan. Repositorinya juga masih membawa sisa prototipe dan nama package temp-app, dan itu tidak dipresentasikan di sini sebagai kualitas produk jadi.

Source dan referensi