如何在不重新连接React的情况下更新Socket.io处理程序

Question

我有一个react native项目，该项目使用socket.io与express服务器通信。

我正在寻找一种方法，只初始化一次连接，而不是每次渲染都重新连接。

我首先尝试将连接封装在useEffect挂钩中：

useEffect(() => {
const socket = io(Configs.serverURL);
...
socket.on('connect', () => { ... }
socket.on('data', () => { ... }
});

这样做的问题是，我无法访问该范围之外的套接字对象，并且如果处理程序所依赖的任何值发生更改，则处理程序将不会更新。

然后，我试图通过设置一些状态变量来将初始化与处理程序分离

const [socket, setSocket] = useState(null);
...
useEffect(() => {
setSocket(io(Configs.serverURL));
});
useEffect(() => {
socket.on('connect, () => { ... });
...
}, [dependency1, dependency2])

然而，我被Cannot read property 'on' of null的错误击中了。

总之：我需要在任何本地作用域之外初始化套接字实例，我还需要在任何其他处理程序之前只初始化一次。

Answer 1

1. 定义套接字上下文

const socket = io(Configs.serverURL);
const socketContext = React.createContext(null);
export const ContextProvider = ({children}) => {
return (
<socketContext.Provider value={socket}>
{children}
</socketContext.Provider>
);
}
export const useSocketContext = () => {
return useContext(socketContext);
}

2. 在根组件中使用此选项

<ContextProvider>
{
//Your components here
}
</ContextProvider>

3. 访问套接字对象

const socket = useSocketContext();
useEffect(() => {
socket.on('connect', () => { ... });
...
}, [dependency1, dependency2])