gpt4 book ai didi

websocket - Socket.io 发送两条消息

转载 作者:行者123 更新时间:2023-12-02 03:55:12 25 4
gpt4 key购买 nike

我正在尝试设置 socket.io,这是我的 server.js 的一部分

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http, { path: '/websocket', origins:'*:*' });

io.on('connection', (socket) => {
socket.send('Hi');
socket.on('message', (message) => {
console.log(message);
socket.emit('hello', `New: ${message}`);
});
console.log('a user connected');
});

http.listen(3030, function(){
console.log('listening on *:3030');
});

和我的简单客户端:

var socket = io('https://*******.com', {
secure: true,
path: '/websocket'
});

const input = document.getElementById('text');
const button = document.getElementById('button');
const msg = document.getElementById('msg');

button.onclick = () => {
socket.emit('message', input.value);
socket.on('hello', (text) => {
const el = document.createElement('p');
el.innerHTML = text;
msg.appendChild(el);
})
}

enter image description here

如果我第三次点击,我会收到 3 条回复消息,依此类推。我做错了什么?我希望向服务器发送消息并接收修改后的消息。我是网络套接字新手。

感谢任何帮助。

附注socket.io v2.0.1

最佳答案

每次单击按钮时,您都会添加一个 socket.on() 事件处理程序。因此,单击按钮两次后,您将获得重复的 socket.on() 事件处理程序。当事件返回时,您的两个事件处理程序将分别被调用,您会认为您收到了重复的消息。实际上,这只是一条消息,但具有重复的事件处理程序。

您几乎不想在另一个事件处理程序中添加一个事件处理程序,因为这会导致这种重复事件处理程序的堆积。您没有(用语言)准确描述您的代码正在尝试执行的操作,因此我不知道应该建议什么替代方案。通常,当套接字连接时,您首先设置事件处理程序,仅一次,然后您将永远不会得到重复的处理程序。

所以,也许就像改变这个一样简单:

button.onclick = () => {
socket.emit('message', input.value);
socket.on('hello', (text) => {
const el = document.createElement('p');
el.innerHTML = text;
msg.appendChild(el);
})
}

对此:

button.onclick = () => {
socket.emit('message', input.value);
}

socket.on('hello', (text) => {
const el = document.createElement('p');
el.innerHTML = text;
msg.appendChild(el);
});

关于websocket - Socket.io 发送两条消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44166273/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com