我正在使用這個庫中的 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 hook(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
}, [])
uj5u.com熱心網友回復：
這需要useState在你的鉤子里面加一個useWebSocket鉤子。
每當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])
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/398006.html
標籤：javascript 反应 网络套接字
上一篇：從輸入中檢索前5個單詞時遇到問題