如何在 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>(socket);
SocketContext.displayName = 'SocketContext';
export const SocketProvider = ({ children }: { children: ReactNode }) => (
<SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
);
export const useSocket = () => {
const context = useContext(SocketContext);
return context;
};
// contexts/index.tsx
import { ReactNode } from 'react';
import { SocketProvider } from './Socket';
const AppContextProviders = ({ children }: { children: ReactNode }) => (
<SocketProvider>{children}</SocketProvider>
);
export default AppContextProviders;
其中 const socket = io(SOCKET_URL)?，有些朋友可能就有疑問了，為什么不執行下 socket.connect() 呢？
socket.io 客戶端默認是自動鏈接的，如果聲明了 autoConnect 屬性為 false，則需要手動執行下鏈接。
以上，在頁面第一次加載時會初始化 socket，解決了第一個問題：“React 單頁面應用中如何防止出現多個 socket 實例”。
根組件提供 socket
在項目的 App.js 文件中引入我們自定義的 Providers，將 AppProviders 組件做為根組件放在最頂層，這樣被包裹的組件都可以使用 AppProviders 組件提供的屬性。也解決了第二個問題：“在任意的的組件內如何方便的取到 socket 實例”。
import AppProviders from './contexts';
import './App.css';
const App = () => (
<AppProviders>
...
</AppProviders>
);
export default App;
任意子組件中使用 socket
組件 A，監聽服務器發來的消息。
useEffect() 是 React 內置的一個 Hook，如果第二個參數依賴項數組為空，那么傳入的第一個函數在該組件內只會執行一次，依賴項數組只要有一個狀態被更新，useEffect() 傳入的第一個函數也將會被執行。
還需要注意的是 useEffect() 傳入的第一個函數，它又返回的函數在函數組件卸載時被調用，通常我們會用 useEffect() 模擬類組件的 componentDidMount、componentWillUnmount 行為。
在組件卸載時，使用 socket.off() 移除事件監聽器，實際上這可以預防內存泄漏，同時也解決了最開始提的第三個問題：“對于某個事件不要隨著頁面切換出現多個監聽器”。
import { useEffect } from 'react';
import { useSocket } from '../../contexts/Socket';
const ComponentA = () => {
const socket = useSocket();
useEffect(() => {
// componentDidMount
socket.on('message', handleMessage); // 監聽消息
return () => {
// componentWillUnmount
socket.off('message', handleMessage);
};
}, [socket]);
return ();
};
export default ComponentA;
組件 B，發送消息到服務器。
在我們的組件 B 中，也可以使用自定義的 useSocket Hook 獲取最開始初始化的 socket 實例，但這并不會產生一個新的 socket 實例。
import { useEffect } from 'react';
import { useSocket } from '../../contexts/Socket';
const ComponentB = () => {
const socket = useSocket();
const handleSendMessage = () => {
socket.emit('compress', data); // 發送消息
}
return <div>
// ...
<button onClick={handleSendMessage}>Send message</button>
</div>;
};
export default ComponentB;
