Javascript 为什么每次在websocket中发送消息后都会收到多条消息

我正在尝试创建一个聊天应用程序，如果我使用我的应用程序通过websocket发送两条消息，我将从之后发送消息的每个人那里收到两条消息。如果我发送另一条消息，我将收到来自每个向我发送消息的人的三条消息

chat () {
    const sendMsgDiv = this.shadowRoot.querySelector('.sendMessage')
    sendMsgDiv.classList.remove('removed')
    const submit = this.shadowRoot.querySelector('#submit')
    const input = this.shadowRoot.querySelector('#write')
    input.innerHTML = ''
    input.setAttribute('placeholder', 'Write a message...')
    submit.addEventListener('click', event => {
      event.stopPropagation()
      this.sendMessage(input.value)
      input.value = ''
    })
  }

sendMessage (message) {
    const data = {
      type: 'message',
      data: message,
      username: window.localStorage.getItem('username'),
      channel: 'mychannel'
    }
    const socket = new window.WebSocket('<server_name>', 'mychannel')
    // show the sender message
    socket.onopen = event => {
      socket.send(JSON.stringify(data))
      const message = document.createElement('p')
      message.setAttribute('class', 'senderMessage')
      message.innerHTML = data.username + ' : ' + data.data
      this.shadowRoot.querySelector('.messages').appendChild(message)
    }
    // check if the reciever message is from the same user that sent it
    socket.addEventListener('message', event => {
      const message = JSON.parse(event.data)
      console.log(message)
      if (message.username !== window.localStorage.getItem('username') && message.username !== 'The Server') {
        console.log('message arrived')
        const recieverMessage = document.createElement('p')
        recieverMessage.setAttribute('class', 'recieverMessage')
        recieverMessage.innerHTML = message.username + ' : ' + message.data
        this.shadowRoot.querySelector('.messages').appendChild(recieverMessage)
      }
    })
  }

聊天（）{
const sendMsgDiv=this.shadowRoot.querySelector（“.sendMessage”）
sendMsgDiv.classList.remove（'removed'）
const submit=this.shadowRoot.querySelector（“#submit”）
常量输入=this.shadowRoot.querySelector（“#write”）
input.innerHTML=“”
input.setAttribute（'占位符'，'写消息…'））
submit.addEventListener（'click'，event=>{
event.stopPropagation（）
this.sendMessage（input.value）
input.value=“”
})
}
发送消息（消息）{
常数数据={
键入：“消息”，
数据：信息，
用户名：window.localStorage.getItem（'username'），
频道：“我的频道”
}
const socket=new window.WebSocket（“”，'mychannel'）
//显示发件人消息
socket.onopen=事件=>{
socket.send（JSON.stringify（数据））
const message=document.createElement（'p'）
message.setAttribute（'class'，'senderMessage'）
message.innerHTML=data.username+'：'+data.data
this.shadowRoot.querySelector（'.messages'）.appendChild（message）
}
//检查Receiver消息是否来自发送它的同一用户
socket.addEventListener（'message'，event=>{
const message=JSON.parse（event.data）
console.log（消息）
if（message.username！==window.localStorage.getItem（'username'）&&message.username！==Server'））{
console.log（'消息已到达'）
const receiveMessage=document.createElement（'p'）
ReceiveMessage.setAttribute（'class'，'ReceiveMessage'）
ReceiveMessage.innerHTML=message.username+'：'+message.data
this.shadowRoot.querySelector（'.messages'）.appendChild（ReceiveMessage）
}
})
}

您不需要每次发送消息时都打开一个新的Websocket，只需打开一次。本页的JS代码片段：可能会给您一个线索。也在这里：。如您所见，WebSocket对象只创建一次，用于初始化与服务器的连接。在那之后，只需处理事件和事件处理程序。@KostasX Lifesaver非常感谢