React: How to implement real-time data with WebSockets in React?

1import { useState, useEffect, useRef } from "react";
2
3function useWebSocket(url: string) {
4  const [messages, setMessages] = useState<string[]>([]);
5  const [connected, setConnected] = useState(false);
6  const wsRef = useRef<WebSocket | null>(null);
7
8  useEffect(() => {
9    const ws = new WebSocket(url);
10    wsRef.current = ws;
11
12    ws.onopen = () => setConnected(true);
13    ws.onclose = () => setConnected(false);
14    ws.onmessage = (event) => {
15      setMessages(prev => [...prev, event.data]);
16    };
17
18    return () => ws.close();
19  }, [url]);
20
21  const send = (message: string) => {
22    wsRef.current?.send(message);
23  };
24
25  return { messages, connected, send };
26}
27
28function ChatRoom() {
29  const { messages, connected, send } = useWebSocket("ws://localhost:3000/chat");
30  const [input, setInput] = useState("");
31
32  const handleSubmit = (e) => {
33    e.preventDefault();
34    send(input);
35    setInput("");
36  };
37
38  return (
39    <div>
40      <div className="status">{connected ? "Connected" : "Disconnected"}</div>
41      <div className="messages">
42        {messages.map((msg, i) => <div key={i}>{msg}</div>)}
43      </div>
44      <form onSubmit={handleSubmit}>
45        <input value={input} onChange={e => setInput(e.target.value)} />
46        <button type="submit">Send</button>
47      </form>
48    </div>
49  );
50}

1function useWebSocketWithReconnect(url: string, maxRetries = 5) {
2  const [messages, setMessages] = useState<string[]>([]);
3  const retriesRef = useRef(0);
4
5  useEffect(() => {
6    let ws: WebSocket;
7
8    const connect = () => {
9      ws = new WebSocket(url);
10
11      ws.onopen = () => {
12        retriesRef.current = 0;
13      };
14
15      ws.onmessage = (event) => {
16        setMessages(prev => [...prev, event.data]);
17      };
18
19      ws.onclose = () => {
20        if (retriesRef.current < maxRetries) {
21          retriesRef.current++;
22          setTimeout(connect, 1000 * retriesRef.current);
23        }
24      };
25    };
26
27    connect();
28    return () => ws?.close();
29  }, [url, maxRetries]);
30
31  return messages;
32}