Question

我使用电子制作了一个聊天室。但是，当我向服务器发送消息并从那里向用户显示消息时，出于某种原因，该消息会多次显示。示例：我发送 -> "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);

Answer 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);
};

Answer 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);
}

为什么我的消息会多次显示？

2 个答案: