javascript - 如何使用 vuejs 避免重复的 websocket 客户端

Question

当我访问一个组件时，它会运行socket.on。
Vuejs中有一个按钮组件，如下所示。因此，当我发送到nodejs的socket.on('voice')时，nodejs套接字发送到'socket.on('reply')。
因此，console.log(msg) 工作得很好。

<button @click="start()">Click</button>

methods:{
   start(){
       socket.emit('voice',{data:'hey'})
   }
created(){
       socket.on('reply', msg => console.log(msg))

但问题是当我移动到另一个网址并返回到此组件时，'socket.on('reply') 再次运行。
因此这里有两个 websocket 客户端。
我怎么解决这个问题？非常感谢您阅读本文。

Answer 1

我给你另一个链接，其中有解释:Vue.js: Dynamic & Async Components

我对 View 和动态内容知之甚少，但是根据我从文档中了解到的，你必须用一个keep-alive block 覆盖你的组件，这将导致该组件不会再次被再生。您必须考虑此解决方案的所有优点和缺点，特别是性能问题，以及是否可以以不同的方式完成。

我不知道你的组件是什么样的，所以我从文档中给出了一个例子:

<keep-alive>
  <my-chat-component></my-chat-component>
</keep-alive>