时间戳

首页 > 解决方案 > WebSocket connection.send 只触发一次

javascript - WebSocket connection.send 只触发一次

问题描述

我有一个简单的 websocket 聊天应用程序，由三个文件组成：server.js、index.html和client.js. html是两个输入框和一个发送按钮，但是发送按钮在第一次点击后停止工作。我知道事件处理程序不是问题，因为如果我删除它始终有效connection.send。这是代码：

服务器.js


const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log("New connection");

  ws.on('message', (data) => {
    console.log(`New message: ${data}`)
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

客户端.js

 
connection.onopen = (event) => {
  console.log("WebSocket is open now.");
};

connection.onclose = (event) => {
  console.log("WebSocket is closed now.");
};

connection.onerror = (event) => {
  console.error("WebSocket error observed:", event);
};

connection.onmessage = (event) => {
  const chat = document.querySelector('.chat');
  chat.innerHTML += event.data;
}

const button = document.querySelector('#send');
button.addEventListener('click', () => {
  console.log('click');
  const name = document.querySelector('#name');
  const message = document.querySelector('#message');
  const data = `<p>${name.value}: ${message.value}</p>`

  connection.send(data); // Removing this line makes it work

  name.value = "";
  message.value = "";
})

索引.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
</head>
<body>
  <div class="chat">
    <input type="text" placeholder="name" id="name">
    <input type="text" placeholder="message" id="message">
    <button id="send">Send</button>
  </div>
  <script src="client.js"></script>
</body>
</html>

标签： javascripthtmlnode.jswebsocket

解决方案

当您这样做时chat.innerHTML += event.data，您将创建一个没有单击事件侦听器的新按钮。

您可以创建一个单独的 div 来添加额外的东西，或者在每次添加东西时添加点击事件侦听器，或者使用appendChild()而不是添加额外的东西innerHTML。

推荐阅读