64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
|
|
||
|
|
/**
|
||
|
|
* First we will load all of this project's JavaScript dependencies which
|
||
|
|
* includes Vue and other libraries. It is a great starting point when
|
||
|
|
* building robust, powerful web applications using Vue and Laravel.
|
||
|
|
*/
|
||
|
|
|
||
|
|
require('./bootstrap');
|
||
|
|
|
||
|
|
window.Vue = require('vue');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Next, we will create a fresh Vue application instance and attach it to
|
||
|
|
* the page. Then, you may begin adding components to this application
|
||
|
|
* or customize the JavaScript scaffolding to fit your unique needs.
|
||
|
|
*/
|
||
|
|
|
||
|
|
Vue.component('example', require('./components/Example.vue'));
|
||
|
|
Vue.component('chat-message', require('./components/ChatMessage.vue'));
|
||
|
|
Vue.component('chat-log', require('./components/ChatLog.vue'));
|
||
|
|
Vue.component('chat-composer', require('./components/ChatComposer.vue'));
|
||
|
|
|
||
|
|
const app = new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: {
|
||
|
|
messages: [],
|
||
|
|
usersInRoom: []
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
addMessage(content) {
|
||
|
|
// Add to existing messages
|
||
|
|
this.messages.push(content);
|
||
|
|
|
||
|
|
// Persist to the database etc
|
||
|
|
axios.post('/messages', content).then(response => {
|
||
|
|
// Do whatever;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
axios.get('/messages').then(response => {
|
||
|
|
this.messages = response.data;
|
||
|
|
});
|
||
|
|
|
||
|
|
Echo.channel('chat.with.users')
|
||
|
|
// .here((users) => {
|
||
|
|
// this.usersInRoom = users;
|
||
|
|
// })
|
||
|
|
// .joining((user) => {
|
||
|
|
// this.usersInRoom.push(user);
|
||
|
|
// })
|
||
|
|
// .leaving((user) => {
|
||
|
|
// this.usersInRoom = this.usersInRoom.filter(u => u != user)
|
||
|
|
// })
|
||
|
|
.listen('MessagePosted', (e) => {
|
||
|
|
console.log(e.message);
|
||
|
|
this.messages.push({
|
||
|
|
message: e.message,
|
||
|
|
user: e.user
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|