mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekay
507a7da852
The FE connected realtime via Phoenix Channels (wss .../socket/v2), but the
Go backend serves no Phoenix endpoint — its realtime is SSE at
/v1/base/realtime (envelope {event,chain,data}). Result: repeating ws 404 ->
'Live updates temporarily delayed'.
lib/socket/sse.ts reimplements the slice of the Phoenix Socket/Channel API the
27 realtime consumers use, backed by one EventSource, behind the existing
SocketProvider/useSocketChannel/useSocketMessage seam — no consumer changes.
Envelope routes via an optional topic field or a hub-channel translation table
(blocks -> blocks:new_block/new_block today). CT harness becomes a tiny SSE
server with the same signatures. 12 vitest cases cover it.
Frontend-only; chain/indexer untouched. Data freshness remains gated on the
separate C-Chain-rollback/indexer-reorg owner items.
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
import { useSocket } from './context';
|
|
import type { Channel } from './sse';
|
|
|
|
interface Params {
|
|
topic: string | undefined;
|
|
params?: object;
|
|
isDisabled: boolean;
|
|
onJoin?: (channel: Channel, message: unknown) => void;
|
|
onSocketClose?: () => void;
|
|
onSocketError?: () => void;
|
|
socketName?: string;
|
|
}
|
|
|
|
export default function useSocketChannel({ topic, params, isDisabled, onJoin, onSocketClose, onSocketError, socketName }: Params) {
|
|
const { socket, channelRegistry } = useSocket(socketName) || {};
|
|
const [ channel, setChannel ] = useState<Channel>();
|
|
const onCloseRef = useRef<string>(undefined);
|
|
const onErrorRef = useRef<string>(undefined);
|
|
|
|
const onJoinRef = useRef(onJoin);
|
|
onJoinRef.current = onJoin;
|
|
|
|
useEffect(() => {
|
|
const cleanUpRefs = () => {
|
|
const refs = [ onCloseRef.current, onErrorRef.current ].filter(Boolean);
|
|
refs.length > 0 && socket?.off(refs);
|
|
};
|
|
|
|
if (!isDisabled) {
|
|
onCloseRef.current = onSocketClose && socket?.onClose(onSocketClose);
|
|
onErrorRef.current = onSocketError && socket?.onError(onSocketError);
|
|
} else {
|
|
cleanUpRefs();
|
|
}
|
|
|
|
return cleanUpRefs;
|
|
}, [ onSocketClose, onSocketError, socket, isDisabled ]);
|
|
|
|
useEffect(() => {
|
|
if (isDisabled && channel) {
|
|
channel.leave();
|
|
setChannel(undefined);
|
|
}
|
|
}, [ channel, isDisabled ]);
|
|
|
|
useEffect(() => {
|
|
if (!socket || isDisabled || !topic || !channelRegistry) {
|
|
return;
|
|
}
|
|
|
|
let ch: Channel;
|
|
if (channelRegistry.current[topic]) {
|
|
ch = channelRegistry.current[topic].channel;
|
|
channelRegistry.current[topic].subscribers++;
|
|
onJoinRef.current?.(ch, '');
|
|
} else {
|
|
ch = socket.channel(topic);
|
|
channelRegistry.current[topic] = { channel: ch, subscribers: 1 };
|
|
ch.join()
|
|
.receive('ok', (message) => onJoinRef.current?.(ch, message))
|
|
.receive('error', () => {
|
|
onSocketError?.();
|
|
});
|
|
}
|
|
|
|
setChannel(ch);
|
|
|
|
const currentRegistry = channelRegistry.current;
|
|
|
|
return () => {
|
|
if (currentRegistry[topic]) {
|
|
currentRegistry[topic].subscribers > 0 && currentRegistry[topic].subscribers--;
|
|
if (currentRegistry[topic].subscribers === 0) {
|
|
ch.leave();
|
|
delete currentRegistry[topic];
|
|
}
|
|
}
|
|
|
|
setChannel(undefined);
|
|
};
|
|
}, [ socket, topic, params, isDisabled, onSocketError, channelRegistry ]);
|
|
|
|
return channel;
|
|
}
|