73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import qs from 'query-string';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
export const createEventSourceURL = (url: string) => {
|
|
const { host, protocol } = window.location;
|
|
return `${protocol}://${host}${url}`;
|
|
};
|
|
|
|
/*
|
|
0: connecting
|
|
1: connect successfully
|
|
2: closed
|
|
*/
|
|
|
|
export default function useEventSource() {
|
|
const eventSourceRef = useRef<any>(null);
|
|
|
|
const createEventSourceConnection = (query: {
|
|
url: string;
|
|
params: any;
|
|
onmessage?: (data: any) => void;
|
|
}) => {
|
|
eventSourceRef.current?.close?.();
|
|
|
|
const { url, params, onmessage = () => {} } = query;
|
|
|
|
const sseurl = createEventSourceURL(url);
|
|
|
|
eventSourceRef.current = new EventSource(
|
|
`${url}?${qs.stringify({
|
|
...params
|
|
})}`,
|
|
{
|
|
withCredentials: true
|
|
}
|
|
);
|
|
|
|
eventSourceRef.current.onmessage = (res: any) => {
|
|
try {
|
|
console.log('event source message: ', { res, resData: res });
|
|
const data = JSON.parse(res.data);
|
|
onmessage(data);
|
|
} catch (error) {
|
|
// error
|
|
console.log('event source error: ', error);
|
|
}
|
|
};
|
|
|
|
eventSourceRef.current.onclose = () => {
|
|
console.log('event source closed...');
|
|
};
|
|
|
|
eventSourceRef.current.onopen = () => {
|
|
console.log('event source connected...');
|
|
};
|
|
|
|
eventSourceRef.current.onerror = (error: any) => {
|
|
console.log('event source error: ', error);
|
|
};
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
eventSourceRef.current?.close?.();
|
|
};
|
|
}, []);
|
|
|
|
return {
|
|
eventSourceRef: eventSourceRef,
|
|
createEventSourceConnection
|
|
};
|
|
}
|