UIKit/src/hooks/useSSESubscription.ts

38 lines
1.3 KiB
TypeScript
Raw Normal View History

2023-06-06 10:02:17 +00:00
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]);
}