PHP Classes

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 years 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}); } } }});