File: resources/assets/js/app.js

Recommend this page to a friend!
  Classes of Ahmed Khan  >  PHP Realtime Chat with Laravel, Vue.js and Pusher  >  resources/assets/js/app.js  >  Download  
File: resources/assets/js/app.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: 3,273 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: 'adba74bea68819d557ca' //Add your pusher key here
}); 

const app = new Vue({
    el: '#app',
    data: {
        chatMessage : [],
        userId : null,
        chats : [],
        chatWindows : [],
        chatStatus : 0,
        chatWindowStatus : [],
        chatCount : [] 
    },
    created(){
        window.Echo.channel('chat-message'+window.userid)
            .listen('ChatMessage', (e) => {
                console.log(e.user);
                this.userId = e.user.sourceuserid;
                if(this.chats[this.userId]){
                    this.show = 1;
                    this.$set(app.chats[this.userId], this.chatCount[this.userId] ,e.user);
                    this.chatCount[this.userId]++;
                    console.log("pusher");
                    console.log(this.chats[this.userId]);                   
                }else{
                    this.createChatWindow(e.user.sourceuserid,e.user.name)
                    this.$set(app.chats[this.userId], this.chatCount[this.userId] ,e.user);
                    this.chatCount[this.userId]++;
                }
                
        });
    },
    http: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    },
    methods: {
    sendMessage(event){
            this.userId = event.target.id;
            var message = this.chatMessage[this.userId];
            
            this.$http.post('chat',{
                'userid' : this.userId,
                'message' : message
            }).then(response => {
                
                this.chatMessage[this.userId] = '';
                this.$set(app.chats[this.userId], this.chatCount[this.userId] , {
                    "message": message, 
                    "name" : window.username
            });
            this.chatCount[this.userId]++;
                console.log("send");
            }, response => {
                this.error = 1;
                console.log("error");
                console.log(response);
            });
        },
    getUserId(event){
        this.userId = event.target.id;
        this.createChatWindow(this.userId,event.target.innerHTML);
        console.log(this.userId);
    },
    createChatWindow(userid,username){
        if(!this.chatWindowStatus[userid]){
            
            this.chatWindowStatus[userid] = 1;
            this.chatMessage[userid] = '';
            this.$set(app.chats, userid , {});
            this.$set(app.chatCount, userid , 0);
            this.chatWindows.push({"senderid" : userid , "name" : username});
        }
        
    }
}});



   
For more information send a message to info at phpclasses dot org.