如何避免与socket.io-client和React应用程序重新连接

Question

我尝试将React客户端连接到我的Socket.IO服务器。我注意到Socket.IO客户端每隔+/-5秒重新连接一次。当我尝试用vanilla html/js简单应用程序做同样的事情时，一切都很正常。

React内部组件：

useEffect(() => {
const s = getChatClient();
}, []);

内置socket.io-client模块：

var chatClient;
export function getChatClient(
token = "secret"
) {
if (!chatClient) {
chatClient = io("http://localhost:5000/chat", {
query: {
token,
},
});
chatClient
.on("connect", () => {
chatClient.emit("textMessage", "123cos");
})
.on("hello", (msg) => {
console.log("12");
});
}
return chatClient;
}

BTW：我知道我可以导出常量等(我已经改成这个版本了，因为我认为它会有所帮助(。

我尝试了不同的方法来解决这个问题，但我陷入了困境。有什么想法吗？

当我打开html/js简单客户端时从服务器登录：

15:30:00 User Ilona connected to the socket.io server on /

当我退出时：

15:29:12 User Ilona disconnected 

使用React应用程序：

15:30:00 User Ilona connected to the socket.io server on '/'
15:30:05 User Ilona disconnected 
15:30:10 User Ilona connected to the socket.io server on '/' 
15:30:15 User Ilona disconnected 
15:30:20 User Ilona connected to the socket.io server on '/' 
15:30:25 User Ilona disconnected

这个问题与组件重写器或类似的东西无关。

我正在开发MacOS Big Sur。

Answer 1

考虑创建，然后从上下文消费：

SocketContext.jsx:

import { createContext, useState } from 'react';
export const SocketContext = createContext();
export default function SocketContextProvider(props) {
const [sock, setSocket] = useState(null);
let socket = async () => {
if (sock) {
return Promise.resolve(sock); // If already exists resolve
}
return new Promise((resolve, reject) => {
let newSock = io('URL'),
{
query: {
// Options
},
}; // Try to connect

let didntConnectTimeout = setTimeout(() => {
reject();
}, 15000) // Reject if didn't connect within 15 seconds
newSock.once('connect', () => {
clearTimeout(didntConnectTimeout); // It's connected so we don't need to keep waiting 15 seconds
setSocket(newSock); // Set the socket
resolve(newSock); // Return the socket
})
});
};
return (
<SocketContext.Provider value={{ socket }}>
{props.children}
</SocketContext.Provider>
);
}

组件.jsx:

import { useContext, useState, useEffect } from 'react';
import { SocketContext } from './SocketContext.jsx';
export default function MyComponent() {
const { socket } = useContext(SocketContext);
const [sock, setSock] = useState(null);
useEffect(() => {
socket()
.then((resultSocket) => setSock(resultSocket))
.catch(() => {
/* Catch any errors here */
console.log('Couldn't connect the socket!')
});
}, []);
return (
<div>
<code>I'm a context consumer...</code>
</div>
);
}