我正在为多个聊天室使用 socket.io,并希望我的套接字连接仅在聊天室打开时存在,并在聊天室卸载时关闭。目前,我在 useEffect Hook 中连接到我的套接字。问题是,我无法在我的任何函数中执行 socket.emit(),因为我的套接字是在 useEffect 中定义的,如下所示:
import io from 'socket.io-client'
export default function Chat() {
useEffect(() => {
const socket = io(endpoint + '/chat')
return () => { socket.disconnect() }
}
const sendMessage = (msg) => {
// Cant access this because socket is defined in useEffect!
socket.emit('message', msg)
}
}
我试过像这样在我的导入下声明我的套接字:
import io from 'socket.io-client'
const socket = io(endpoint + '/chat')
export default function Chat() {
...
}
然而,这种方式的问题在于
socket.disconnect()
useEffect 钩子(Hook)内部不再起作用,套接字连接保持事件状态。
我也试过像这样将我的套接字声明为函数的变量:
export default function Chat() {
const socket = io (endpoint + '/chat')
...
}
但这会导致触发多个套接字连接,我最终会出现内存泄漏和我服务器上的许多套接字连接,这些连接不能全部用 socket.disconnect() 关闭
非常感谢任何帮助,谢谢
最佳答案
只需为您的套接字实例添加状态并将其设置在您的 useEffect Hook 中
import io from 'socket.io-client'
export default function Chat() {
const [currentSocket, setCurrentSocket] = useState(null)
useEffect(() => {
const socket = io(endpoint + '/chat')
setCurrentSocket(socket)
return () => { socket.disconnect() }
});
const sendMessage = (msg) => {
// Access the socket
currentSocket.emit('message', msg)
}
}
现在您可以从 currentSocket 状态变量访问套接字
关于reactjs - 在 useEffect 之外访问我的套接字变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57829653/