react-realtime-hooks

import React from 'react'; import { useWebSocket, useConnectionGate, ConnectionState } from 'react-realtime-hooks'; const WS_URL = process.env.REACT_APP_WS_URL ?? 'wss://echo.websocket.org'; export const RealtimeComponent: React.FC = () => { const { connectionGate } = useConnectionGate({ online: true, visible: true }); const { status, send, lastMessage, reconnect, close, open } = useWebSocket(WS_URL, { reconnect: { attempts: Infinity, delay: 1000, maxDelay: 30000, jitter: true, }, heartbeat: { interval: 30000, timeout: 5000, }, onOpen: () => console.log('Connected'), onMessage: (event) => console.log('Message:', event.data), onError: (event) => console.error('Error:', event), onClose: (event) => console.log('Closed:', event.code), connect: connectionGate, parseMessage: (data) => JSON.parse(data), serializeMessage: (msg) => JSON.stringify(msg), }); const sendMessage = () => { send({ type: 'greeting', content: 'Hello!' }); }; return ( <div> <p>Status: {status}</p> <button onClick={sendMessage} disabled={status !== 'open'}>Send</button> <button onClick={reconnect}>Reconnect</button> <button onClick={close}>Close</button> <button onClick={open}>Open</button> {lastMessage && <p>Last message: {lastMessage.data}</p>} </div> ); };