Estoy usando websockets de esta biblioteca: https://www.npmjs.com/package/websocket
Esta es una función en React.ts 17 que recupera con éxito los datos del servidor, pero no devuelve los valores de la función en sí.
const recieveMessages = () => { client.onmessage = (message: any) => { const dataFromServer = JSON.parse(message.data) console.log(dataFromServer) //This successfully logs the data return dataFromServer //This is always returned as undefined } //I've tried a few versions with the return statement here without any success. }¿Cómo puedo hacer que la función reciveMessages devuelva los datos de la función client.onmessage ?
Actualización: estoy tratando de separar toda la lógica en un gancho React separado (useWebSocket) que actualmente se ve así:
import { w3cwebsocket } from 'websocket' export const useWebSocket = () => { const client = new w3cwebsocket('ws://127.0.0.1:8000') const connectToServer = () => { client.onopen = () => { console.log('Websocket client connected') } } const recieveMessages = () => { client.onmessage = (message: any) => { const dataFromServer = JSON.parse(message.data) console.log('reply from server: ', dataFromServer) return dataFromServer } } const sendMessage = (message: any) => { client.send(JSON.stringify('lol')) } const onCloseServer = (event: CloseEvent) => { console.log(event) } return { connectToServer, recieveMessages, sendMessage, onCloseServer } }Luego intento ejecutar la función dentro de useEffect en un componente separado como este: El deseo es establecer los siguientes datos dentro del estado local de este componente.
useEffect(() => { recieveMessages() setState(recieveMessages()) //This is always undefined }, [])Esto requiere un gancho useState dentro de su gancho useWebSocket .
Siempre que client.onmessage reciba un mensaje, almacene ese mensaje dentro de un estado y actualícelo cada vez que reciba otro mensaje.
Luego devuelva el estado del gancho.
import { useState } from 'react' import { w3cwebsocket } from 'websocket' export const useWebSocket = () => { const [receivedMessage, setReceivedMessage] = useState('') const client = new w3cwebsocket('ws://127.0.0.1:8000') client.onmessage = (message: any) => { const dataFromServer = JSON.parse(message.data) setReceivedMessage(dataFromServer) } const sendMessage = (message: any) => { client.send(JSON.stringify(message)) } return { receivedMessage, sendMessage, } } Entonces impleméntalo así. El valor del mensaje receivedMessage es el estado que se actualizará y se puede monitorear con un useEffect para hacer algo cada vez que se recibe un mensaje.
const { receivedMessage, sendMessage } = useWebSocket() useEffect(() => { if (receivedMessage !== '') { // Do something whenever the received message is changed. sendMessage('Received you loud and clear') } }, [receivedMessage])