Skip to content

Instantly share code, notes, and snippets.

@w3cj
Created May 24, 2018 06:46
Show Gist options
  • Save w3cj/67d407a6955ce6b41a60d1c0c01714dc to your computer and use it in GitHub Desktop.
Save w3cj/67d407a6955ce6b41a60d1c0c01714dc to your computer and use it in GitHub Desktop.
<template>
<div class="container">
<div v-if="alertMessage" class="alert alert-secondary invisible" role="alert">{{alertMessage}}</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Chat</div>
<div class="panel-body">
<ul>
<li v-for="item in messages">{{ item.message }} - <i>{{ item.user }}</i></li>
</ul>
<input type="text" v-model="message"><br />
<button class="btn btn-success" @click="send()">Send!</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
messages: [],
message: '',
alertMessage: '',
}
},
methods: {
send() {
axios.post('/message', {message: this.message})
.then((response) => {
this.message = '';
});
}
},
mounted() {
Echo.channel('messages')
.listen('.newMessage', (message) => {
this.messages.push(message);
this.alertMessage = `Message recieved: ${message}`;
setTimeout(() => {
alertMessage = '';
}, 2000);
});
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment