65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
// This program has been developed by students from the bachelor Computer Science at Utrecht
|
|
// University within the Software Project course.
|
|
// © Copyright Utrecht University (Department of Information and Computing Sciences)
|
|
import { useEffect, useState } from 'react'
|
|
import { API_BASE_URL } from '../../config/api.ts';
|
|
|
|
/**
|
|
* Displays the current connection status of a robot in real time.
|
|
*
|
|
* Opens an SSE connection to the backend (`/robot/ping_stream`) that emits
|
|
* simple boolean JSON messages (`true` or `false`). Updates automatically when
|
|
* the robot connects or disconnects.
|
|
*
|
|
* @returns A React element showing the current robot connection status.
|
|
*/
|
|
export default function ConnectedRobots() {
|
|
|
|
/**
|
|
* The current connection state:
|
|
* - `true`: Robot is connected.
|
|
* - `false`: Robot is not connected.
|
|
* - `null`: Connection status is unknown (initial check in progress).
|
|
*/
|
|
const [connected, setConnected] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
// Open a Server-Sent Events (SSE) connection to receive live ping updates.
|
|
// We're expecting a stream of data like that looks like this: `data = False` or `data = True`
|
|
const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`);
|
|
eventSource.onmessage = (event) => {
|
|
|
|
// Expecting messages in JSON format: `true` or `false`
|
|
console.log("received message:", event.data);
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
try {
|
|
setConnected(data)
|
|
}
|
|
catch {
|
|
console.log("couldnt extract connected from incoming ping data")
|
|
}
|
|
|
|
} catch {
|
|
console.log("Ping message not in correct format:", event.data);
|
|
}
|
|
};
|
|
|
|
// Clean up the SSE connection when the component unmounts.
|
|
return () => eventSource.close();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1>Is robot currently connected?</h1>
|
|
<div>
|
|
<h2>Robot is currently: {connected == null ? "checking..." : (connected ? "connected! 🟢" : "not connected... 🔴")} </h2>
|
|
<h3>
|
|
{connected == null ? "If checking continues, make sure CB is properly loaded with robot at least once." : ""}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|