防止重复的 websocket 消息 Laravel Echo 和 React

Posted 2023-03-25

【中文标题】防止重复的 websocket 消息 Laravel Echo 和 React

【英文标题】：Prevent duplicate websocket message Laravel Echo and React

【发布时间】：2022-01-06 12:56:38

【问题描述】：

我有一个应用，它在后端使用 Laravel，在前端使用 React。

我们正在使用beyondcode/laravel-websockets 将 websocket 消息从 Laravel 服务器广播到 React 客户端。

React 可以使用以下代码获取消息：

import Echo from "laravel-echo";

window.Pusher = require("pusher-js");
const options = 
  broadcaster: "pusher",
  key: "...",
  cluster: "...",
  encrypted: false,
  wsHost: process.env.REACT_APP_WSHOST,
  wsPort: 6001,
  forceTLS: false,
  disableStats: true,
  //To be Replace with the Correct URL from ENV
  authEndpoint: `http://$process.env.REACT_APP_APIURL/laravel-websockets/auth`,
;
const echo = new Echo(options);


function App() 
  //const dispatch = useDispatch();

  echo.channel("ws-test").listen("TestWSEvent", function (e) 
    if (e && e != undefined) 
      let data_o = JSON.parse(e.message).data;
      console.log("socket received",data_o);
        //dispatch(ticketReceived(data_o));
    
  );

echo.channel("ws-test").listen(...) 部分，如果它在 App 类之外，我会为每个广播收到一条消息。但如果该部分在 App 内，我会收到两条重复的消息。

React 不允许在 App 类之外使用调度，所以因为我想使用 redux，所以我希望该部分位于 App 内部（但在那里我得到了重复的广播消息）。

我收到这些重复消息的原因是什么？有什么好的反应方式来处理这种情况？

【问题讨论】：

您需要在 useEffect() 方法上运行此代码一次，现在您的代码在每次渲染组件时都在运行

【参考方案1】：

理想情况下，您应该将监听函数移动到 useEffect 中，因为我们只想创建一个监听器。

目前我们将为组件的每个渲染添加一个新的侦听器。

useEffect(() => 
  echo.channel("ws-test").listen("TestWSEvent", function (e) 
    if (e && e != undefined) 
      let data_o = JSON.parse(e.message).data;
      console.log("socket received",data_o);
        //dispatch(ticketReceived(data_o));
    
  );
, []);

【讨论】：

谢谢！它工作:)