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。对于这个问题，我可能不会再提一个问题，但是，我希望您能就此提出建议。如果国防部/任何人都想让我关闭，那么我没有问题。

EDIT2 ：如果其他人遇到此问题，我可以通过移动代码实例化套接字以及构造函数中的事件来使其正常工作。

Answer 1

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

您应该仅将事件处理程序附加一次，例如，仅在创建套接字后才附加一次，而不是每次单击都附加。

Socket.io针对一个事件多次返回

1 个答案: