File: resources/assets/js/app2.js

Recommend this page to a friend!
  Classes of Ahmed Khan  >  PHP Realtime Chat with Laravel, Vue.js and Pusher  >  resources/assets/js/app2.js  >  Download  
File: resources/assets/js/app2.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Realtime Chat with Laravel, Vue.js and Pusher
Realtime chat application with an API and channels
Author: By
Last change:
Date: 2 months ago
Size: 2,021 bytes
 

Contents

Class file image Download
/**
 * 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');

/**
 * 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.
 */
import VueResource from "vue-resource"
import Echo from "laravel-echo"
import Pusher from "pusher-js"

Vue.use(VueResource);

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '' //Add your pusher key here
}); 

const app = new Vue({
    el: '#app',
    data: {
        countries: [],
        show : 0,
        error : 0,
        chatMessage : null,
        userId : null,
        chats : []
    },
    created(){
        window.Echo.channel('chat-message'+window.userid)
            .listen('ChatMessage', (e) => {
                this.chats.push(e.user);
                console.log("pusher");
                console.log(this.chats);
                this.userId = e.user.sourceuserid;
                this.show = 1;
        });
    },
    http: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    },
    methods: {
    sendMessage(){
            this.chats.push({"message" : this.chatMessage , "name" : window.username});
            console.log("send");
            console.log(this.chats);
            this.$http.post('chat',{
                'userid' : this.userId,
                'message' : this.chatMessage
            }).then(response => {
                this.chatMessage = "";
            }, response => {
                this.error = 1;
                console.log("error");
                console.log(response);
            });
        },
    getUserId(event){
        this.userId = event.target.id;
        this.show = 1;
        console.log(this.userId);
    }
}});
For more information send a message to info at phpclasses dot org.