I am currently working on developing a real-time chat application using vue.js, Pusher, and Laravel. I have successfully managed to receive information from Pusher, as I can view the JSON data in the console with the correct details. However, I am facing a challenge in merging the existing messages fetched from the database using fetchMessages with the new Pusher messages received in real-time, and displaying them together.
Message Display
<div id="app">
<article v-for="message in messages">
<h3> User ID: @{{ message.user_id }}</h3>
<p> @{{message.body}} </p>
</article>
</div>
Vue Configuration
new Vue({
el: '#app',
data: {
messages: []
},
ready: function() {
this.fetchMessages();
var pusher = new Pusher('key_here', {
encrypted: true
});
var channel = pusher.subscribe('cars');
channel.bind('App\\Events\\UserHasNewMessage', function(data) {
console.log(data);
/*
I can output my pusher data to the console just fine.
But how can I append this data to the existing messages?
*/
});
},
methods: {
fetchMessages: function() {
this.$http.get('/api/messages', function(messages){
this.$set('messages', messages);
});
}
}
})