Laravel Echo 在卸载并重新安装一个 React 组件后停止监听事件

Question

我已经连接 Laravel Echo。我使用 Pusher 和 ReactJS 并将私人频道连接到 componentDidMount() 方法：

componentDidMount() {
    let channelName = 'channel.12345';
    let eventName = '.RoshamboResults.54321';

    Echo.private(channelName)
      .listen(eventName, data => {
        console.log('Socket', data);
      });
  }

它一直有效，直到我转到另一条路线，所以应用程序卸载了组件。当我返回并等待来自频道的另一条消息时，我只能在 Inspect -> Network -> WebSockets 中看到它，但在控制台日志中看不到。所以JS就不听了

Answer 1

也许你应该在组件的 componentWillUnmount 和 componentDidMount 生命周期上放置一个控制台，再次执行这些步骤，看看你的组件是否确实在你路由时被卸载，并且当你回来时安装。

可能您的组件根本没有卸载，因此您的 componentDidMount 可能只工作了一次。我认为这很可能是问题所在。

如果我上面所说的是这种情况，深入研究反应生命周期也可能对您的问题有所帮助。这是一篇我发现的关于生命周期的文章。反应文档也很好。希望这可以帮助。 :)

https://levelup.gitconnected.com/componentdidmakesense-react-lifecycle-explanation-393dcb19e459

Laravel Echo 在卸载并重新安装一个 React 组件后停止监听事件

Laravel Echo stops listening events after unmounting and mounting again a react component

reactjs

laravel

websocket

pusher

laravel-echo