Реализация чата Twilio в laravel - PullRequest
Новая
       14

Реализация чата Twilio в laravel

0 голосов
/ 09 июля 2020
• 1000 т послать. Я получаю ошибку ниже в моей консоли.Когда я нажимаю клавишу ввода, эта ошибка выводится в консоли 
app.js:40478 TypeError: this.channel.sendMessage is not a function
at VueComponent.sendMessage (app.js:2110)

Мой класс компонента чата 

<template>
<div class="card">
  <div class="card-header">{{ otherUser.name }}</div>
  <div class="card-body">
      <div v-for="message in messages" v-bind:key="message.id">
          <div
              :class="{ 'text-right': message.author === authUser.email }"
          >
              {{ message.body }}
          </div>
      </div>
  </div>
  
  <div class="card-footer">
    <input
      type="text"
      v-model="newMessage"
      class="form-control"
      placeholder="Type your message..."
      @keyup.enter="sendMessage"
    />
  </div>
 </div>
</template>



<script>

export default {
name: "ChatComponent",
props: {
  authUser: {
    type: Object,
    required: true
  },
  otherUser: {
    type: Object,
    required: true
  }
},
data() {
  return {
    messages: [],
    newMessage: "",
    channel: ""
  };
},

async created() {
    const token = await this.fetchToken();
    await this.initializeClient(token);
    await this.fetchMessages();
  },
  
methods: {
  async fetchToken() {
    const { data } = await axios.post("/api/token", {
      email: this.authUser.email
    });


return data.token;
  },
    async initializeClient(token) {
      const client = await Twilio.Chat.Client.create(token);


      client.on("tokenAboutToExpire", async () => {
        const token = await this.fetchToken();


        client.updateToken(token);
      });
      
      this.channel = await client.getChannelByUniqueName(${this.authUser.id}-${this.otherUser.id}`);

        this.channel.on("messageAdded", message => {
        this.messages.push(message);
      });
      
    },
    
    async fetchMessages() {
    this.messages = (await this.channel.getMessages()).items;
    },
    
    sendMessage() {
        this.channel.sendMessage(this.newMessage);
        this.newMessage = "";
      }
     
  }
  };
</script>

А вот моя консольная печать

введите описание изображения здесь

...