javascript - Socket.io 为一个事件多次返回
问题描述
在将其标记为重复之前,我检查了大多数其他帖子和解决方案,但无济于事。如果有人想仔细检查,这里是:
1)单个事件的 Socket.io 多次返回
2) Socket.io 消息事件多次
触发
3) socket.on 事件被多次触发
还有许多其他人。
现在开始讨论我的问题!
我的客户端和服务器代码中有一个套接字。一旦我的服务器端套接字发出消息,它就会被客户端套接字接收并打印出消息。通过研究,这可能与事件侦听器有关,但我不知道如何将它应用到我的代码中。仅供参考,单击按钮时会运行以下客户端代码。
这是我的客户代码片段
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:如果其他人有这个问题,我通过移动代码来实例化套接字和构造函数中的事件来使它工作。
解决方案
每次单击按钮时,您都会再次附加事件处理程序。您socket.on
在点击处理程序内部;该方法附加一个新的处理程序——也就是说,每次运行时,它都会将指定的函数添加到事件触发时要运行的函数列表的末尾。所以是的,每次单击按钮时,您都会将该功能添加到列表的末尾,并且每次添加它都会运行一次。(更准确地说,由于您在那里使用匿名函数,因此每次单击按钮时它都会创建一个新函数,并将其添加到事件处理程序列表中以在事件触发时运行。)
您应该只附加一次事件处理程序,例如在创建套接字之后,而不是在每次单击时。
推荐阅读
- mysql - MySQL中的“二进制字符串”是什么意思
- ruby-on-rails - 将 Redux 状态输入 Rails 数据库(使用 Rails Webpacker-React)
- mysql - MySQL 查询 JPQL 以进行多连接 SpringBoot + JPA
- java - 如何在 Firebase 实时数据库中使用 onChildRemoved?
- javascript - ajax 调用后响应组件状态更改但不重新渲染组件
- haskell - 如何获取百里香包的 UTCTime 数据类型的二进制实例?
- django - Docker:服务“web”构建失败(Django 应用程序)
- apache-spark - 在 JAAS 配置中找不到“KafkaClient”条目。未设置系统属性“java.security.auth.login.config”
- php - Nginx 配置 - 在非常自定义的设置中将路由传递给 index.php
- php - 我无法在php中链接href标签