vue-chat-widget example frontend using websockets

App.vue

<template>
    <div id="app">
      <Chat
        iconColorProp="#e6e6e6"
        messageOutColorProp="#4d9e93"
        messageInColorProp="#f1f0f0"
        messageBackgroundColorProp="#ffffff"
        :messageListProp="messageList"
        :initOpenProp="initOpen"
        @onToggleOpen="handleToggleOpen"
        @onMessageWasSent="handleMessageReceived"
      />
    </div>
</template>

<script>
import {Chat} from 'vue-chat-widget'
import incomingMessageSound from './assets/notification.mp3'
import io from 'socket.io-client'
import handleFetch from './utils/fetch'

const socketUrl = 'https://<Your-FaaS-app>.herokuapp.com'
let socket

export default {
  name: "app",
  components: {
    Chat,
  },
  data: () => {
    return {
      messageList: [],
      initOpen: false,
      toggledOpen: false
    }
  },
  methods: {
    handleSocketConnect() {

        socket = io(socketUrl, {
            autoConnect: false,
        })

        socket.on('connect', () => {
            console.log('Client has connected to the server!')
        });

        socket.on('sms message', (sms) => this.handleMessageResponse(sms.toString()))
        socket.on('added to que', this.handleAddedToQue)
        socket.on('now messaging', this.handleRemoveFromQue)

        socket.open()
        socket.emit('add to stack')
    },

    handleSocketDisconnect() {
        console.log('Socket disconnected');
        socket.disconnect();
    },

    handleAddedToQue() {
        this.handleMessageResponse(`Sorry, David is chatting with another person, but wait, you're in que.`)
    },

    handleRemoveFromQue() {
        // Send message to Ted with next person on the chat
        handleFetch(`${socketUrl}/chat`, 'POST', {
            query: {
                connection: socket.id,
                fromNumber: '+18312469107',
                toNumber: '+14084022790',
                twilioAccountSid: 'XXXXXXXXXXXXXXXXXXX',
                twilioAuthToken: 'ZZZZZZZZZZZZZZZZZZZ',
            },
            message: `Hi Ted, you're now in a chat now.`
        })
        .then(() => {
            this.handleMessageResponse(`Thanks for waiting, how can I help you!?`)
        })
    },

    // Send message from you
    handleMessageReceived(message) {
      this.messageList.push(message)

      // Post message to Ted
      handleFetch(`${socketUrl}/chat`, 'POST', {
          query: {
              connection: socket.id,
              fromNumber: '+18312469107',
              toNumber: '+14084022790',
              twilioAccountSid: 'XXXXXXXXXXXXXXXXXXX',
              twilioAuthToken: 'ZZZZZZZZZZZZZZZZZZZ',
          },
          message: message.body
      })

    },
    // Receive message from them
    handleMessageResponse(message) {
      if (message.length > 0) {
          this.messageList.push({ body: message, author: 'them' })
      }
    },
    handleToggleOpen(open) {
      this.toggledOpen = open
      // // connect/disconnect socket
      if (!socket || socket.disconnected) {
          this.handleSocketConnect()
      } else if (socket.connected) {
          this.handleSocketDisconnect()
      }
    },
    handleMessageResponseSound() {
      const audio = new Audio(incomingMessageSound)
      audio.addEventListener('loadeddata', () => {
        audio.play()
      })
    },
  },
  mounted() {
    this.messageList.push({ body: 'Welcome to the chat, I\'m David!', author: 'them' })
  },
  watch: {
    messageList: function(newList) {
      const nextMessage = newList[newList.length - 1]
      const isIncoming = (nextMessage || {}).author !== 'you'
      if (isIncoming && this.toggledOpen) {
        this.handleMessageResponseSound()
      }
    }
  }
}
</script>