如何在 React 中正确的使用 socket.io 客户端？

最近在一个 React 项目中，使用到了 socket.io 处理即时消息，这里面有几点容易被忽视的问题，例如：在 React 单页面应用中如何防止出现多个 socket 实例、在任意的的组件内如何方便的取到 socket 实例、对于某个事件不要随着页面切换出现多个监听器。

在本文中，将会给大家分享下我在 React 中使用 Socket.io 客户端的一些经验，希望对此有疑惑的朋友给予一些帮助，也许你会有一些更好的实现方式，欢迎交流！

创建 Socket Context

本文的实现方式是使用状态管理工具保存 socket 实例，供子组件使用，如果使用了 React Hooks，可以用其提供的 useContext API，实现起来也很简单。

// contexts/socket.tsx

import { createContext, ReactNode, useContext } from react;

import io, { Socket } from socket.io-client;

const SOCKET_URL = ws://localhost:8080;

export const socket = io(SOCKET_URL, {

transports: [websocket],

});

const SocketContext = createContext(socket);

SocketContext.displayName = SocketContext;

export const SocketProvider = ({ children }: { children: ReactNode }) =