javascript - Socket.io 为一个事件返回多次

Question

在将其标记为重复之前，我已经检查了大多数其他帖子和解决方案，但无济于事。如果有人想仔细检查，这里是:

1) Socket.io Multiple returns for a single event 2) Socket.io message event firing multiple times
3) socket.on event gets triggered multiple times

还有很多其他的。

现在开始讨论我的问题!

我的客户端和服务器代码中有一个套接字。一旦我的服务器端套接字发出一条消息，客户端套接字就会接收该消息并打印出该消息。经过研究，这可能与事件监听器有关，但我不知道如何将其应用到我的代码中。仅供引用，单击按钮时将运行以下客户端代码。

这是我的客户端代码片段

onButtonClick() {
     socket.emit('message_to_server', 'ping');

     socket.on('reply', (tmp) => {
          console.log(tmp); // in this case, call it 'pong'
          this.doSomethingWithMe(tmp);
     });
}

doSomethingWithMe(msg) {
// do something with the information
}

第一次点击按钮时，我收到

> pong

第二次单击按钮时，我收到

> pong
> pong

它继续呈指数级增长。

如果需要，我可以发布我的服务器代码，但我 100% 确定它会正确发出信息。

有人有解决此问题的想法吗？我无法弄清楚听众如何参与这个场景，所以我将不胜感激任何建议!

编辑:我将一些代码更改为以下内容:

import React ...

const socket = socketIOClient('http://localhost:3000')

socket.on('reply', (tmp) => {
     console.log(tmp); // in this case, call it 'pong'
     var inst = new drawMe();
     inst.doSomethingWithMe(tmp);     
});

class drawMe extends Component {
     constructor(props) { this.state = { allData: ''}}

     onButtonClick() {
          ...
     }

     doSomethingWithMe(data) {
          this.setState({ allData: data });
     }

我现在收到一条错误，指出您无法在尚未安装的组件上调用 setState。我可能不会就此问题提出另一个问题，但我将不胜感激任何有关它的建议。如果模组/任何人希望我关闭，我这样做没有问题。

编辑2:如果其他人有这个问题，我通过移动代码来实例化套接字和构造函数内的事件来使其工作。

Answer 1

每次单击按钮时，您都会再次附加事件处理程序。您在点击处理程序中有 socket.on ；该方法附加一个新的处理程序——也就是说，每次运行时，它都会将指定的函数添加到事件触发时运行的函数列表的末尾。所以是的，每次您单击该按钮时，您都会将该函数添加到列表的末尾，并且每次添加它都会运行一次。 (更准确地说，由于您在那里使用匿名函数，因此每次单击按钮时它都会创建一个新函数，并将其添加到事件处理程序列表中以便在事件触发时运行。)

您应该只附加事件处理程序一次，例如在创建套接字之后，而不是每次点击时。