Empowering Digital Transformation

import { useState, useEffect, useRef } from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';
 
function LiveDashboard() {
const [connected, setConnected] = useState(false);
const [data, setData] = useState([]);
const socketRef = useRef(null);

useEffect(() {
// Connect to WebSocket server
socketRef.current = new WebSocket('wss://api.example.com/live-data');

socketRef.current.onopen = () {
setConnected(true);
console.log('Connected to WebSocket server');
};

socketRef.current.onmessage = (event) {
const newData = JSON.parse(event.data);
setData(prevData > [...prevData, newData].slice(-10));
};

socketRef.current.onclose = () {
setConnected(false);
console.log('Disconnected from server');
};

return () {
socketRef.current.close();
};
}, []);

return (
<div className="space-y-4">
<div className="flex items-center space-x-2">
<div className={`h-3 w-3 rounded-full $connected ? "bg-green-500" : "bg-red-500"`}/>
<span>Status: {connected ? "Connected" : "Disconnected"}</span>
</div>

<div className="h-64 w-full">
<LineChart width={600} height={200} data={data}>
<XAxis dataKey="timestamp" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>
</div>
<button onClick={() > socketRef.current.send(JSON.stringify({ action: "refresh" }))} className="px-4 py-2 bg-indigo-600 text-white rounded-md">
Refresh Data
</button>
</div>
);
}