Как передать значение socketio в? - PullRequest
Новая
       16

Как передать значение socketio в?

0 голосов
/ 26 июня 2019

Попытка реализовать чат с помощью chat2desk API. Сообщения от пользователя передаются следующим образом: 

<div v-for="(message, _id) in messageText.data" :key="_id">
          <q-chat-message :key="message.id" :text="[message.text]"
                          name="Вы"
                          :stamp="messageDate(message)"
                          bg-color="messageBg.bgColorUser"
                          text-color="black"
                          avatar="../assets/chat-user.svg"
                          sent
          ></q-chat-message>
        </div>

способ отправки: 

send () {
      this.$store.dispatch('messages/create', {account: localStorage.getItem('user-phone'), text: this.$data.message, session: this.currentKey})
        .then(() => {
          axios({
            method: 'post',
            url: `${process.env.VUE_APP_POST_CHAT2DESK_MESSAGES}`,
            data: {
              channel_id: 111,
              body: this.$data.message,
              from_client: {
                phone: localStorage.getItem('user-phone')
              }
            },
            headers: {
              'Authorization': `${process.env.VUE_APP_POST_CHAT2DESK_TOKEN}`
            }
          }).then(() => {
             this.$data.message = ''
          })

        })
        .catch((err) => {
          this.errHandler(err)
        })
    }

Теперь мне нужно получить сообщение от оператора chat2desk. Чтобы они приходили в реальном времени, я использовал socketio: 

MessagesFromChat2desk () {
      let socket = io.connect('https://profile.test.com')
      socket.emit('account', localStorage.getItem('user-phone'))
      return socket.on('message', (data) => {
        this.msgFromOperator = data
        console.log('socket-message:', this.msgFromOperator)
        return this.msgFromOperator.text
      })
    }

html q-chat-message code (мне пришлось написать так, потому что я не мог передать значение socketio в: text): 

<div class="q-message q-message-received" >
          <div class="q-message-container row items-end no-wrap">
            <img src="../assets/chat.svg" class="q-message-avatar col-auto">
            <div><div class="q-message-name">support</div>
              <div class="q-message-text text-messageBg.bgColorUser">
              <span class="q-message-text-content text-black">
                <div>{{ this.msgFromOperator.text }}</div>
                <div class="q-message-stamp">{{ this.messageDate(message) }}</div>
              </span>
              </div>
            </div>
          </div>
        </div>

Понятно, что входящее сообщение будет соответствовать в статическом q-chat-message. Как сделать так, чтобы при каждом новом сообщении от оператора генерировался новый элемент, и они следовали один за другим, т.е. СМС от пользователь -> смс от оператора? Как это сделать через v-for? Все сообщения от оператора и пользователя заносятся в одну таблицу, поэтому там будет невозможно различить, где чьи сообщения. Возможно, это было запутанное изложение вопроса, я буду рад любой помощи

...