68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
type UseEventSourceOptions = {
|
|
onMessage?: (data: unknown) => void;
|
|
onError?: (event: Event) => void;
|
|
enabled?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Subscribe to a Server-Sent Events (SSE) endpoint.
|
|
* Reconnects automatically on connection loss.
|
|
*/
|
|
export function useEventSource<T = unknown>(
|
|
url: string | null,
|
|
options?: UseEventSourceOptions,
|
|
) {
|
|
const { onMessage, onError, enabled = true } = options ?? {};
|
|
const [data, setData] = useState<T | null>(null);
|
|
const [connected, setConnected] = useState(false);
|
|
const onMessageRef = useRef(onMessage);
|
|
const onErrorRef = useRef(onError);
|
|
onMessageRef.current = onMessage;
|
|
onErrorRef.current = onError;
|
|
|
|
useEffect(() => {
|
|
if (!url || !enabled) return;
|
|
|
|
const endpoint: string = url;
|
|
let es: EventSource | null = null;
|
|
let reconnectTimer: ReturnType<typeof setTimeout>;
|
|
|
|
function connect() {
|
|
es = new EventSource(endpoint);
|
|
|
|
es.onopen = () => setConnected(true);
|
|
|
|
es.onmessage = (event) => {
|
|
try {
|
|
const parsed = JSON.parse(event.data) as T;
|
|
setData(parsed);
|
|
onMessageRef.current?.(parsed);
|
|
} catch {
|
|
// ignore malformed messages
|
|
}
|
|
};
|
|
|
|
es.onerror = (event) => {
|
|
es?.close();
|
|
setConnected(false);
|
|
onErrorRef.current?.(event);
|
|
reconnectTimer = setTimeout(connect, 3000);
|
|
};
|
|
}
|
|
|
|
connect();
|
|
|
|
return () => {
|
|
clearTimeout(reconnectTimer);
|
|
es?.close();
|
|
setConnected(false);
|
|
};
|
|
}, [url, enabled]);
|
|
|
|
return { data, connected };
|
|
}
|