在 vuejs 和 vuex 上重复 websocket 的发射

Posted 2023-02-16

【中文标题】在 vuejs 和 vuex 上重复 websocket 的发射

【英文标题】：Emit of websocket is repeaded on vuejs and vuex

【发布时间】：2019-12-07 13:11:28

【问题描述】：

vuex 文件中有一个函数，如下所示。 当我使用 Vue 组件的“按钮”运行启动功能时， socket.emit 将数据发送到 nodejs 的 socker。 它通过nodejs的websocket通过socket.on接收一些结果。

// In vuex.js

const actions = 
   start(event)     
       socket.emit("voice", 
         msg: event.currentTarget.message
       );

       socket.on("voice-reply", result => 
          console.log(result);
  );

但是当我使用 vuejs 的按钮运行这个启动功能时， socket.on("voice-reply") 再重复一次。 例如，

console.log(result)

点击按钮后，

console.log(result)
console.log(result)

点击按钮后，

console.log(result)
console.log(result)
console.log(result)

它是这样运行的。您能解释一下为什么 socket.on 会再增加一次吗？ 非常感谢您阅读。

【参考方案1】：

socket.on 创建一个eventListener，每次发出事件时都会触发它。通过在您的start 操作中包含socket.on，您将在每次调用start（通过单击按钮）时创建一个新的eventListener，并且每个侦听器都会记录到控制台。您不应该在发出事件的同一块中创建侦听器。

创建一个像setupListeners 这样的新操作，并且只从其他地方调用一次，可能在您的组件中（例如在created 生命周期挂钩中）或从其他操作：

const actions = 
    start(event)     
        socket.emit("voice", 
            msg: event.currentTarget.message
        );
    ,
    setupListeners() 
        socket.on("voice-reply", result => 
            console.log(result);
        );