建站
咨詢
售后
建站咨詢
新聞中心
在本文中，將會給大家分享下我在 React 中使用 Socket.io 客戶端的一些經(jīng)驗，希望對此有疑惑的朋友給予一些幫助，也許你會有一些更好的實現(xiàn)方式，歡迎交流！
網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了洪洞免費建站歡迎大家使用！
創(chuàng)建 Socket Context
本文的實現(xiàn)方式是使用狀態(tài)管理工具保存 socket 實例，供子組件使用，如果使用了 React Hooks，可以用其提供的 useContext API，實現(xiàn)起來也很簡單。
// 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 }) => (
{children}
);
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 }) => (
{children}
);
export default AppContextProviders;
其中 const socket = io(SOCKET_URL)?，有些朋友可能就有疑問了，為什么不執(zhí)行下 socket.connect() 呢？
socket.io 客戶端默認是自動鏈接的，如果聲明了 autoConnect 屬性為 false，則需要手動執(zhí)行下鏈接。
以上，在頁面第一次加載時會初始化 socket，解決了第一個問題：“React 單頁面應用中如何防止出現(xiàn)多個 socket 實例”。
根組件提供 socket
在項目的 App.js 文件中引入我們自定義的 Providers，將 AppProviders 組件做為根組件放在最頂層，這樣被包裹的組件都可以使用 AppProviders 組件提供的屬性。也解決了第二個問題：“在任意的的組件內(nèi)如何方便的取到 socket 實例”。
import AppProviders from './contexts';
import './App.css';
const App = () => (
...
);
export default App;
任意子組件中使用 socket
組件 A，監(jiān)聽服務器發(fā)來的消息。
useEffect() 是 React 內(nèi)置的一個 Hook，如果第二個參數(shù)依賴項數(shù)組為空，那么傳入的第一個函數(shù)在該組件內(nèi)只會執(zhí)行一次，依賴項數(shù)組只要有一個狀態(tài)被更新，useEffect() 傳入的第一個函數(shù)也將會被執(zhí)行。
還需要注意的是 useEffect() 傳入的第一個函數(shù)，它又返回的函數(shù)在函數(shù)組件卸載時被調(diào)用，通常我們會用 useEffect() 模擬類組件的 componentDidMount、componentWillUnmount 行為。
在組件卸載時，使用 socket.off() 移除事件監(jiān)聽器，實際上這可以預防內(nèi)存泄漏，同時也解決了最開始提的第三個問題：“對于某個事件不要隨著頁面切換出現(xiàn)多個監(jiān)聽器”。
import { useEffect } from 'react';
import { useSocket } from '../../contexts/Socket';
const ComponentA = () => {
const socket = useSocket();
useEffect(() => {
// componentDidMount
socket.on('message', handleMessage); // 監(jiān)聽消息
return () => {
// componentWillUnmount
socket.off('message', handleMessage);
};
}, [socket]);
return ();
};
export default ComponentA;組件 B，發(fā)送消息到服務器。
在我們的組件 B 中，也可以使用自定義的 useSocket Hook 獲取最開始初始化的 socket 實例，但這并不會產(chǎn)生一個新的 socket 實例。
import { useEffect } from 'react';
import { useSocket } from '../../contexts/Socket';
const ComponentB = () => {
const socket = useSocket();
const handleSendMessage = () => {
socket.emit('compress', data); // 發(fā)送消息
}
return
// ...
;
};
export default ComponentB; 當前標題：如何在React中正確的使用socket.io客戶端？
文章轉載：http://fisionsoft.com.cn/article/cdpshhs.html
