Reactjs：如何在組件之間共享 websocket

Question

我是 React 新手，我在組件結構和在它們之間共享 websocket 方面遇到了一些問題。

該應用程序由類別和產品組成。 初始數據加載將通過 Ajax 請求完成，websocket 將用於保持數據更新。

我的組件層次結構如下所示：

• 分類列表
  • 類別
    • 產品列表
      • 產品

CategoriesList 保存類別的 state，ProductsList 保存類別中產品的 state。

所以我想在 CategoriesList 和 ProductsList 中使用相同的 websocket 但監聽不同的 websocket 事件：類別：更新和產品：更新。

如何在組件之間共享 websocket 以及初始化它的正確位置在哪里？

由於每個類別都有一個 ProductsList，這是否意味着 products:updated 事件將觸發多次（每個類別一個）？ 我想這在性能方面不是一件好事。

Answer 1

共享同一個實例的另一種方法是簡單地創建一個新文件，如下所示：socketConfig.js

import openSocket from 'socket.io-client';

const socket = openSocket("http://localhost:6600");

export default socket;

並在您想要的任何文件中使用它，只需導入它。

import socket from "../socketConfig";

這對我有用，因為我在 2 個不相互依賴的不同組件中使用它。

Answer 2

我建議在 CategoriesList 中初始化您的套接字連接，然后將連接作為道具傳遞給子組件。 當連接向下傳遞時，您應該能夠根據需要使用它來偵聽子組件中的特定事件。

這是 github 上使用 react 和 socket.io 的示例應用程序。 套接字在父組件中初始化，然后向下傳遞。 https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/containers/ChatContainer.js

在第 9 行，連接被初始化，然后在第 23 行，它作為 props 傳遞。 該連接稍后在子組件中用於接收和發出事件。 例如： https : //github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/components/Chat.js

Answer 3

只需在組件外部聲明套接字，同樣如此......

import SocketIOClient from 'socket.io-client';   
const socket=SocketIOClient('http://localhost:3000/chat')

function App() {
    //use socket here ...

    return (
        <div> </div>);
}

Answer 4

如果您使用 Redux Store，則將socket存儲在 Redux Store 中，然后您可以像其他存儲變量/狀態一樣從任何組件訪問它。

組件：A （在組件A中定義Socket）

 //... const dispatch = useDispatch(); useEffect(() => { const socket = io("http://localhost:8000"); socket.on("connect", () => { console.log("Connected to Socket"); dispatch({ type: "INIT_SOCKET", socket: socket }); }); }, [...]);

組件：B （在另一個組件中使用 Socket）

 //... const socket = useSelector(state => state.socket); useEffect(() => { if (socket) { socket.on("msg", (data) => { console.log(data); }); } }, [socket]);

Answer 5

創建 socket.config.js 文件，為您的 websocket 添加打開的連接。

export const WebSocket1 = new WebSocket('ws://YOUR websocketurl');
export const WebSocket2 = new WebSocket('ws://YOUR anotherwebsocketurl');

導入您的任何組件

import  {WebSocket1, WebSocket2}from '../../../utils/socket.config';

內部 UseEffect 掛鈎使用 websocket

 useEffect(() => {
WebSocket1.onopen = () => {
    WebSocket1.send(JSON.stringify(someData));
};

    WebSocket1.onmessage = (event: any) => {

      console.log(JSON.parse(event.data));
        
        
    }

    WebSocket1.onerror = error => {
        console.log(`WebSocket error: ${error}`);
    };

    WebSocket1.onclose = () => {
        console.log("disconnected");
    }
}, []);

Answer 6

參見react-cent可以編寫自己的 Provider (CentProvider.js) 來包裝你的組件，並通過上下文提供你的客戶端。 此外，編寫高階組件 (CentComponent.js) 使其與this.props.<client>