почему я получаю несколько сообщений после каждого сообщения, отправляемого в websocket - PullRequest
Новая
       17

почему я получаю несколько сообщений после каждого сообщения, отправляемого в websocket

0 голосов
/ 18 октября 2019

Я пытаюсь создать приложение чата, и если я отправлю два сообщения через websocket с помощью моего приложения, я получу 2 сообщения от каждого, кто отправляет сообщения после. Если я отправлю другое сообщение, я получу три сообщения от каждого, кто отправит мне сообщение. 


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