嵌套的 websocket 函数总是返回 undefined

Question

我正在使用这个库中的 websockets：https://www.npmjs.com/package/websocket
这是 React.ts 17 中的一个函数，它成功地从服务器检索数据，但无法 return 函数本身的值。

    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.
    }

如何使 recieveMessages 函数 return 来自 client.onmessage 函数的数据？

更新： 我正在尝试将所有逻辑分离到一个单独的 React 钩子（useWebSocket）中，目前看起来像这样：

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
    }
}

然后我尝试运行像这样在单独的组件中使用 useEffect 中的函数：希望在此组件的本地状态中设置以下数据。

    useEffect(() => {
        recieveMessages()
        setState(recieveMessages()) //This is always undefined
    }, [])

Answer 1

这需要在 useWebSocket 挂钩内使用 useState 挂钩。
每当 client.onmessage 收到一条消息时，将该消息存储在一个状态中，并在每次收到另一条消息时更新它。

然后return钩子状态

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,
  }
}

然后像这样实现它。 receivedMessage 值是将被更新的状态，并且可以使用 useEffect 挂钩进行监控，以便在收到消息时执行某些操作。

const { receivedMessage, sendMessage } = useWebSocket()

useEffect(() => {
  if (receivedMessage !== '') {
    // Do something whenever the received message is changed.
    sendMessage('Received you loud and clear')
  }
}, [receivedMessage])

嵌套的 websocket 函数总是返回 undefined

nested websocket function always returning undefined

javascript

websocket

reactjs