Skip to content

Instantly share code, notes, and snippets.

@david-j-davis
Created September 14, 2019 01:28
Show Gist options
  • Save david-j-davis/afcd4bcceaa7562f91604b945dd3f8b0 to your computer and use it in GitHub Desktop.
Save david-j-davis/afcd4bcceaa7562f91604b945dd3f8b0 to your computer and use it in GitHub Desktop.
vue-chat-widget example frontend using websockets
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment