React中Socket.IO组件的连接泄漏

Question

我有一个使用Socket.IO的React应用程序。Socket实例位于React组件中。

我注意到，注销并登录到我的应用程序的操作(应该卸载组件并关闭连接，然后重新安装并重新打开连接(会导致套接字泄漏/创建重复的套接字连接。我还设法使应用程序进入了一种状态，它很快就会喷出新的连接，导致饥饿，但无法复制。这曾经影响过生产。

这是客户端代码：

const Socket = React.memo(() => {
const [isLoadingSocket, setIsLoadingSocket] = useState<boolean>(false)
const socketRef = useRef<SocketIO<ServerToClientEvents, ClientToServerEvents> | null>(null)
const socketNeedsRestart = isFocused ? !isLoadingSocket : false
async function initializeSocket() {
const token = await getToken()
setIsLoadingSocket(true)
if (socketRef.current) {
socketRef.current.disconnect()
}
socketRef.current = io(`${SOCKET_HOST}`, {
secure: true,
reconnectionDelay: 5000,
transports: ['websocket', 'polling'],
path: ENVIRONMENT !== Environment.local ? '/api/socket.io/' : '',
auth: {
token,
},
})
console.log(`socket initialized`)
}
useEffect(() => {
if (socketNeedsRestart) {
initializeSocket()
}
}, [socketNeedsRestart]) //eslint-disable-line
useEffect(() => {
if (socketRef.current) {
socketRef.current.on(SocketLifecycleEvent.Connect, () => {
console.log('socket connected')
setIsLoadingSocket(false)
})
socketRef.current.on(SocketMessage.UsersOnline, (message) => {
updateOnlineUsers(message.onlineUserIDs)
})
}
return () => {
if (socketRef.current) {
socketRef.current.off(SocketLifecycleEvent.Connect)
socketRef.current.off(SocketLifecycleEvent.ConnectionError)
socketRef.current.off(SocketLifecycleEvent.Disconnect)
}
}
}, [isLoadingSocket])
useEffect(() => {
socketRef.current?.disconnect()
}, [])
return <></>
})
export default Socket

该组件在用户登录后访问的页面中使用一次。我可以提供服务器代码，但它除了在每次有人连接时通知所有用户之外，什么都不做。是什么导致了连接泄漏？如何重新创建快速火灾泄漏？

Answer 1

您的最后一个useEffect正在做您期望它做的事情吗？看起来这应该是卸载时的清理，但您没有在那里返回函数。

你试过这样的东西吗

useEffect( () => () => socketRef.current?.disconnect(), [] );