use-eventsource.ts

import { useEffect, useState, useMemo } from 'react';

export interface UseEventSourceOptions<T = string> {
    withCredentials?: boolean;
    extractor?: (value: any) => T;
}

export function useEventSource<T = string>(url: string, { withCredentials, extractor = JSON.parse }: UseEventSourceOptions<T> = {}) {
    const [data, setData] = useState<T>();
    const [readyState, setReadyState] = useState < 'connecting' | 'open' | 'closed' | 'error'>('connecting')
    
    useEffect(() => {
        const eventSource = new EventSource(url, { withCredentials });
        setReadyState('connecting');

        eventSource.onmessage = e => {
            setData(extractor(e.data));
        }

        eventSource.onerror = e => {
            setReadyState('error');
        }

        eventSource.onopen = e => {
            setReadyState('open');
        }

        return () => {
            eventSource.close();
            setReadyState('closed');
        }
    }, [url, withCredentials]);

    return useMemo(() => ({ data, readyState }), [data, readyState]);
}