Así que soy principalmente un desarrollador back-end de C++, pero estoy aprendiendo React y tengo este archivo realmente simple para usar websockets.
import React, { useState } from "react"; var serverMessage = ""; var webSocketReady = false; function connect() { webSocket = new WebSocket("ws://127.0.0.1:3000/ws") webSocket.onopen = (event) => { webSocketReady = true; }; webSocket.onmessage = function (event) { serverMessage = JSON.parse(event.data); }; webSocket.onclose = function (event) { webSocketReady = false; setTimeout(function() { connect(); }, 1000); }; webSocket.onerror = function (err) { console.log('Socket encountered error: ', err.message, 'Closing socket') webSocket.close(); }; } connect(); export default function MyTestComponent({ ...props }) { const [varThatNeedHooks, setVar] = useState({}); if (!webSocketReady) { return (<h1>Could not connect to server retrying ...</h1>); } else if (serverMessage == "") { return (<h1>Waiting for message from server ...</h1>); } else { // do stuff with varThatNeedHooks } }Estoy mirando la documentación de reacción y me di cuenta de esta manera que estoy conectando el websocket a MyTestComponent tiene que estar mal. Pero no estoy seguro de cuál es la forma "Reaccionar" de conectar los eventos del websocket para cambiar lo que se procesa. ¿Alguien tiene buenos documentos o ejemplos que pueda seguir?
Por lo general, haría que serverMessage y webSocketReady parte del estado React para que, cuando se actualicen, se active una representación de componente. Use un useEffect para administrar la instancia de socket.
Ejemplo:
import React, { useEffect, useState, useRef } from "react"; export default function MyTestComponent({ ...props }) { const [varThatNeedHooks, setVar] = useState({}); const [serverMessage, setServerMessage] = useState(""); const [webSocketReady, setWebSocketReady] = useState(false); const [webSocket, setWebSocket] = useState(new WebSocket("ws://127.0.0.1:3000/ws")); useEffect(() => { webSocket.onopen = (event) => { setWebSocketReady(true); }; webSocket.onmessage = function (event) { setServerMessage(JSON.parse(event.data)); }; webSocket.onclose = function (event) { setWebSocketReady(false); setTimeout(() => { setWebSocket(new WebSocket("ws://127.0.0.1:3000/ws")); }, 1000); }; webSocket.onerror = function (err) { console.log('Socket encountered error: ', err.message, 'Closing socket'); setWebSocketReady(false); webSocket.close(); }; return () => { webSocket.close(); }; }, [webSocket]); if (!webSocketReady) { return <h1>Could not connect to server retrying ...</h1>; } else if (serverMessage == "") { return <h1>Waiting for message from server ...</h1>; } else { // do stuff with varThatNeedHooks } }