Javascript WebSocket连接。仅发送一次_Javascript_Html_Node.js_Websocket

Javascript WebSocket连接。仅发送一次

javascript html node.js websocket

Javascript WebSocket连接。仅发送一次,javascript,html,node.js,websocket,Javascript,Html,Node.js,Websocket,我有一个简单的websocket聊天应用程序，由三个文件组成：server.js、index.html和client.js。html是两个输入框和一个发送按钮，但第一次单击后发送按钮停止工作。我知道事件处理程序不是问题所在，因为如果我删除connection.send，它会一直工作。代码如下： server.js const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { cons

我有一个简单的websocket聊天应用程序，由三个文件组成：

server.js

、

index.html

和

client.js

。html是两个输入框和一个发送按钮，但第一次单击后发送按钮停止工作。我知道事件处理程序不是问题所在，因为如果我删除

connection.send

，它会一直工作。代码如下：

server.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);
      }
    });
  });
});

client.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 = "";
})


connection.onopen=（事件）=>{
log（“WebSocket现在打开了。”）；
};
connection.onclose=（事件）=>{
log（“WebSocket现在已关闭。”）；
};
connection.onerror=（事件）=>{
console.error（“观察到WebSocket错误：”，事件）；
};
connection.onmessage=（事件）=>{
const chat=document.querySelector（'.chat'）；
chat.innerHTML+=event.data；
}
const button=document.querySelector（“#send”）；
按钮。addEventListener（'单击'，（）=>{
console.log（'click'）；
const name=document.querySelector（“#name”）；
const message=document.querySelector（“#message”）；
常量数据=`${name.value}:${message.value}`
connection.send（data）；//删除此行将使其正常工作
name.value=“”；
message.value=“”；
})

index.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>


指数
发送

当您执行

chat.innerHTML+=event.data

时，您会创建一个没有单击事件侦听器的新按钮

您可以创建一个单独的div来添加额外的内容，或者在每次添加内容时添加单击事件侦听器，或者使用

appendChild（）

而不是

innerHTML

添加额外的内容。将按钮移出聊天div修复了此问题。谢谢