38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
![]() |
import { useEffect } from "react";
|
||
|
import ReconnectingEventSource from "reconnecting-eventsource";
|
||
|
import { devlog } from "../utils";
|
||
|
|
||
|
|
||
|
export function useSSESubscription<T>({ enabled = true, url, onNewData, onDisconnect, marker = "" }: {
|
||
|
enabled?: boolean;
|
||
|
url: string;
|
||
|
onNewData: (data: T[]) => void;
|
||
|
onDisconnect: () => void;
|
||
|
marker?: string;
|
||
|
}) {
|
||
|
useEffect(() => {
|
||
|
if (!enabled) return;
|
||
|
|
||
|
const eventSource = new ReconnectingEventSource(url);
|
||
|
|
||
|
eventSource.addEventListener("open", () => devlog(`EventSource connected with ${url}`));
|
||
|
eventSource.addEventListener("close", () => devlog(`EventSource closed with ${url}`));
|
||
|
eventSource.addEventListener("message", event => {
|
||
|
try {
|
||
|
const newData = JSON.parse(event.data) as T;
|
||
|
devlog(`new SSE: ${marker}`, newData);
|
||
|
onNewData([newData]);
|
||
|
} catch (error) {
|
||
|
devlog(`SSE parsing error: ${marker}`, event.data, error);
|
||
|
}
|
||
|
});
|
||
|
eventSource.addEventListener("error", event => {
|
||
|
devlog("SSE Error:", event);
|
||
|
});
|
||
|
|
||
|
return () => {
|
||
|
eventSource.close();
|
||
|
onDisconnect();
|
||
|
};
|
||
|
}, [enabled, marker, onDisconnect, onNewData, url]);
|
||
|
}
|