Richtige Art der Verwendung von React-Hooks + WebSockets

Ich muss eine Verbindung zum WebSockets-Server herstellen und seine Nachrichten protokollieren. Mit der React-Klassenkomponente würde ich diese Logik einfügen componentDidMount Lebenszyklus-Hook und glücklich weitermachen, aber ich bin mir nicht sicher, wie ich es mit Hooks richtig implementieren soll.

Hier mein erster Versuch.

import React, {useEffect} from 'react';

export default function AppWs() {
  useEffect(() => {
    let ws = new WebSocket('wss://ws.kraken.com/');
    ws.onopen = () => console.log('ws opened');
    ws.onclose = () => console.log('ws closed');

    ws.onmessage = e => {
      const message = JSON.parse(e.data);
      console.log('e', message);
    };

    return () => {
      ws.close();
    }
  }, []);

  return (
    <div>hooks + ws</div>
  )
}

Ich habe Verbindungs- und Protokolllogik hinzugefügt useEffect, stellte ein leeres Array mit Abhängigkeiten bereit, und alles funktionierte großartig. Bis ich hinzufügen musste pause Zustand, um die Protokollierung anzuhalten.

export default function AppWs() {
  const [isPaused, setPause] = useState(false);

  useEffect(() => {
    let ws = new WebSocket('wss://ws.kraken.com/');
    ws.onopen = () => console.log('ws opened');
    ws.onclose = () => console.log('ws closed');

    ws.onmessage = e => {
      if (isPaused) return;
      const message = JSON.parse(e.data);
      console.log('e', message);
    };

    return () => {
      ws.close();
    }
  }, []);

  return (
    <div>
      <button onClick={() => setPause(!isPaused)}>{isPaused ? 'Resume' : 'Pause'}</button>
    </div>
  )
}

ESLint fing an, mich anzuschreien, dass ich hinzufügen sollte isPaused Zustand als Abhängigkeit von useEffect.
Na gut, fertig.
Aber ich habe eine erneute Verbindung zum WS-Server bemerkt, nachdem ich jedes Mal auf die Schaltfläche geklickt habe. Das ist eindeutig nicht das, was ich will.

Meine nächste Iteration war, zwei zu verwenden useEffects: eine für die Verbindung und eine für die Nachrichtenverarbeitung.

export default function AppWs() {
  const [isPaused, setPause] = useState(false);
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const wsClient = new WebSocket('wss://ws.kraken.com/');
    wsClient.onopen = () => {
      console.log('ws opened');
      setWs(wsClient);
    };
    wsClient.onclose = () => console.log('ws closed');

    return () => {
      wsClient.close();
    }
  }, []);

  useEffect(() => {
    if (!ws) return;

    ws.onmessage = e => {
      if (isPaused) return;
      const message = JSON.parse(e.data);
      console.log('e', message);
    };
  }, [isPaused, ws]);

  return (
    <div>
      <button onClick={() => setPause(!isPaused)}>{isPaused ? 'Resume' : 'Pause'}</button>
    </div>
  )
}

Dies funktioniert wie erwartet, aber ich habe das Gefühl, dass ich etwas verpasse und diese Aufgabe einfacher gelöst werden kann, mit einem useEffect. Bitte helfen Sie, den Code umzugestalten, und überzeugen Sie mich, dass ich React-Hooks auf die richtige Weise verwende. Vielen Dank!

Da Sie den Web-Socket nur einmal festlegen, ist es meiner Meinung nach besser, eine Referenz anstelle eines Status zu verwenden:

Die Reihenfolge von useEffect ist wichtig.

Wie von George in den Kommentaren vorgeschlagen, im ersten useEffect ws.current wird in einer Variablen gespeichert, um sicherzustellen, dass wann close heißt es bezieht sich auf die gleiche Instanz.

export default function AppWs() {
    const [isPaused, setPause] = useState(false);
    const ws = useRef(null);

    useEffect(() => {
        ws.current = new WebSocket("wss://ws.kraken.com/");
        ws.current.onopen = () => console.log("ws opened");
        ws.current.onclose = () => console.log("ws closed");

        const wsCurrent = ws.current;

        return () => {
            wsCurrent.close();
        };
    }, []);

    useEffect(() => {
        if (!ws.current) return;

        ws.current.onmessage = e => {
            if (isPaused) return;
            const message = JSON.parse(e.data);
            console.log("e", message);
        };
    }, [isPaused]);

    return (
        <div>
            <button onClick={() => setPause(!isPaused)}>
                {isPaused ? "Resume" : "Pause"}
            </button>
        </div>
    );
}

 useEffect(() => {
const socket = new WebSocket('wss://ws.kraken.com');
socket.addEventListener('message', function (event) {
  const a = JSON.parse(event.data);
  setPriceWebSocket(a);

  const amin = socket.send(
    JSON.stringify({
      event: 'subscribe',
      pair: ['XBT/USD', 'XBT/EUR', 'ADA/USD'],
      subscription: { name: 'ticker' },
    }),
  );
  

});