我有一個在后端使用 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 類之外使用 dispatch，所以因為我想使用 redux，所以我希望該部分位于 App 內部（但在那里我得到了重復的廣播訊息）。
我收到這些重復訊息的原因是什么？處理這種情況的好的反應方式是什么？
uj5u.com熱心網友回復：
理想情況下，您應該將 listen 函式移到 a 中，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));
}
});
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369628.html
標籤：反应 拉拉维尔 网络套接字 反应还原 laravel-回声
上一篇：如何在反應組件中覆寫背景影像？