在useEffect之外访问我的套接字变量

Question

我正在将 socket.io 用于多个聊天室，并希望我的套接字连接仅在聊天室打开时存在，并在聊天室卸载时关闭。目前，我在useEffect钩子中连接到我的套接字。问题是，我不能在我的任何函数中做 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 钩子内部不再工作，套接字连接保持活动状态。

我还尝试将我的套接字声明为函数的变量，如下所示：

export default function Chat() {
const socket = io (endpoint + '/chat')
...
}

但这会导致多个套接字连接触发，我最终在我的服务器上出现内存泄漏和许多套接字连接，这些连接不能全部使用 socket.disconnect(( 关闭

任何帮助将不胜感激，谢谢

Answer 1

只需为您的套接字实例添加状态并将其设置在您的 useEffect 钩子中

即可

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

现在您可以从当前套接字状态变量访问套接字