嵌套的 websocket 函数总是返回 undefined答案

【问题标题】：nested websocket function always returning undefined嵌套的 websocket 函数总是返回 undefined
【发布时间】：2021-12-30 11:44:32
【问题描述】：

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

    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 函数从 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
    }, [])

【问题讨论】：

你不能。并非没有将其包装在 Promise 或回调中，但这违背了 Web Sockets 的目的。您必须从 onmessage 函数中处理流程。也许您可以与套接字分享您尝试实现的目标，因为感觉就像您正在尝试为您的解决方案找到解决方案，而不是为您的问题找到解决方案。
尽管如此，你能举个例子吗？
我正在尝试将所有逻辑分离到一个单独的 React 钩子（useWebSocket）中，然后调用该钩子（useWebSocket）
您能否通过编辑您的问题来分享您迄今为止创建的内容？
@EmielZuurbier 是的，当然，请看一下。

标签： javascript reactjs websocket

【解决方案1】：

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

然后从钩子中返回状态。

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])

【讨论】：