为啥我的消息显示多次？

Posted 2023-02-23

【中文标题】为啥我的消息显示多次？

【英文标题】：Why my messages are being displayed many times?为什么我的消息显示多次？

【发布时间】：2021-06-30 09:23:20

【问题描述】：

我使用电子创建了一个聊天室。但是，当我向服务器发送消息并从那里发送消息时，由于某种原因，消息将显示给用户多次。示例：我发送 ->“hello”消息将显示一次，当我发送第二条消息时 ->“Hello server”消息将显示两次，当我发送第三条消息时 ->“ok”这条消息将显示三遍。第四条消息将显示 4 次，以此类推。

这是 renderer.js 代码：

const ws = new WebSocket("ws://127.0.0.1:5000");

ws.addEventListener('open', function(event)
   ws.send('hello server');
   console.log("data sent");
);

 function send_data()
  console.log("button clicked");
  ws.send(document.getElementById("input_text").value);

  ws.addEventListener('message', function(event)
  console.log("server send something");
  let mess=event.data;
  console.log(mess);
  update_chat(mess);
);
;
function update_chat(mess)
  const div = document.createElement('div');
  div.classList.add('message');
   div.innerhtml = `okwpegjwpgj said:  $mess`;
  document.querySelector('.chat_messages').appendChild(div);

这是 server.js 代码：

const WebSocket = require('ws');
let broadcast_msg;

const PORT = 5000;
const wss = new WebSocket.Server(
  port: PORT
);

wss.on("connection", ws =>
  ws.on('message', function incoming(message)
    broadcast_msg=message;
    console.log('received: ', message);
    ws.send(message);
  );
);

console.log("Server is liestening on port " + PORT);

【问题讨论】：

因为你addEventListener('message')每次发送数据。所以，在第一条消息之后，你就有了一个听众。在第二条消息之后，您有 2 个侦听器，在第 N 条消息之后，您有 N 个侦听器。每个听众启动update_chat(mess)。

@JeremyThille 我应该用什么代替 addEventListener('message")

为什么是而不是？你为什么要用别的东西来代替它？

【参考方案1】：

因为您在每个 send_data() 调用中都添加了 addEventListener('message')。

添加一次事件监听器并将其从 send_data() 方法中删除。您无需在每次发送数据时都添加新的事件监听器。

ws.addEventListener('message', function(event)
  console.log("server send something");
  let mess=event.data;
  console.log(mess);
  update_chat(mess);
);

function send_data()
 console.log("button clicked");
 ws.send(document.getElementById("input_text").value);
;

【参考方案2】：

将您的 renderer.js 文件更改为：

const ws = new WebSocket("ws://127.0.0.1:5000");

ws.addEventListener('open', function(event)
   ws.send('hello server');
   console.log("data sent");
);
ws.addEventListener('message', function(event)
  console.log("server send something");
  let mess=event.data;
  console.log(mess);
  update_chat(mess);
);

 function send_data()
  console.log("button clicked");
  ws.send(document.getElementById("input_text").value);
;
function update_chat(mess)
  const div = document.createElement('div');
  div.classList.add('message');
   div.innerHTML = `okwpegjwpgj said:  $mess`;
  document.querySelector('.chat_messages').appendChild(div);