Question

我已经在laravel 5.5 + vue.js + pusher中开发了一个实时聊天应用程序。它是公共聊天。任何人都可以加入这个聊天室。现在我想私聊或一对一聊天。我可以这样做吗？我不知道在哪里改变。在此先感谢：）

这是我的app.js文件

require('./bootstrap');

window.Vue = require('vue');
// for auto scroll
import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)
import Toaster from 'v-toaster'
import 'v-toaster/dist/v-toaster.css'

Vue.use(Toaster, {timeout: 5000})

Vue.component('message', require('./components/message.vue'));

const app = new Vue({
el: '#app',
data:{
    message:'',
    chat:{
        message:[],
        user:[],
        color:[],
        time:[]
    },
    typing:'',
    numberOfUsers:0
},
watch:{
    message(){
        Echo.private('chat')
            .whisper('typing', {
                name: this.message
            });
    }
},
// created(){
//     // axios.get('message').then(response=>{
//     //     this.chat.message=response.data.message;
//     //     console.log(response);
//     // });
// },
methods:{
    send(){
        if (this.message.length != 0) {
            this.chat.message.push(this.message);
            this.chat.user.push('You');
            this.chat.color.push('success');
            this.chat.time.push(this.getTime());

            axios.post('send', {
                message : this.message
            })
                .then(response => {
                    console.log(response);
                    this.message = ''
                })
                .catch(error => {
                    console.log(error);
                });

        }
    },
    getTime(){
        let time=new Date();
        return time.getHours()+' : '+time.getMinutes();
    }
},
mounted(){
    Echo.private('chat')
        .listen('ChatEvent', (e) => {
           this.chat.message.push(e.message);
            this.chat.user.push(e.user);
            this.chat.color.push('warning');
            this.chat.time.push(this.getTime());
        })
        .listenForWhisper('typing', (e) => {
            if (e.name != '') {
                this.typing = 'typing...'
            }else{
                this.typing = ''
            }
        })

    Echo.join(`chat`)
        .here((users) => {
            this.numberOfUsers = users.length;
        })
        .joining((user) => {
            this.numberOfUsers += 1;
            // console.log(user);
            this.$toaster.success(user.name+' is joined the chat room');
        })
        .leaving((user) => {
            this.numberOfUsers -= 1;
            this.$toaster.warning(user.name+' is leaved the chat room');
        });

}
});

这是我的ChatEvent.php

<?php

namespace App\Events;

use App\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;


class ChatEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

public $message;
public $user;


public function __construct($message,User $user)
{
    $this->message=$message;
    $this->user=$user->name;
    $this->dontBroadcastToCurrentUser();
}

public function broadcastOn()
{
    return new PrivateChannel('chat');
}
}

这是我的路线channels.php

<?php

Broadcast::channel('App.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});

Broadcast::channel('chat',function ($user){
 return ['name'=>$user->name];
});

实时聊天在laravel 5.5中的应用

0 个答案: