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

Question

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

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

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 class 之外，我每次广播都会收到一条消息。但如果该部分在 App 内，我会收到两条重复消息。

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

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

Answer 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));
    }
  });
}, []);

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

Prevent duplicate websocket message Laravel Echo and React

websocket

laravel

reactjs

react-redux

laravel-echo