laravel5.4实现实时聊天室

一、修改laravel的广播驱动

修改 .env中：

BROADCAST_DRIVER=redis

二、创建laravel事件广播

比如要创建一个发送聊天消息的事件，则

php artisan make:event SendChat

后在app/events里面会有SendChat.php

SendChat.php：

//由于该事件需要广播，则该类需要实现ShouldBroadcast

Class SendChat implements ShouldBroadcast {

    //然后将需要广播的数据以public形式写在此类作为成员属性
    public $input;

    //new对象时存入的数据
    public function __construct($input)  {      
        $this->input = $input;  
    }

    public function broadcastOn()  {
        //公共channel      
        return ['test-channel']; 
    }

}

最后将会得到如下数据：

频道：test-channel

数据：{"event":"App\Events\UserSignUp","data":{"input":"xulibin","socket":null},"socket":null}

Redis版本：
若不用laravel 的broadcast，则可以用Redis（它也有发布和订阅功能）

$data = ['event' => 'SendChat','data'  => ['input' => 'xlb'] ];

Redis::publish('test-channel',json_encode($data));

最后将会得到如下数据：

频道：test-channel

数据：{"event":"SendChat","data":{"input":"xlb"}}

三、创建node服务器，接受laravel事件广播，再转广播给前端client，此处Node服务器是占用了3000端口，待会client也要监听这个3000端口。

1、另外还需要引入socket.io和ioredis

npm install socket.io ioredis --save

2、创建socket.js（这次是创建在项目根目录，也可其他目录）

var server = require('http').Server();
var io = require('socket.io')(server);
var Redis = require('ioredis');
var redis = new Redis();
redis.subscribe('test-channel');
redis.on('message',function(channel,message){
    message = JSON.parse(message);
    console.log(channel+':'+message.event);
    //这里是以“频道:事件”的方式去发送，需要接受此事件的client就接受此格式的事件
    //test-channel:SendChat
    io.emit(channel+':'+message.event,message.data);  
});

server.listen(3000);

然后一定要开启node服务器

node socket.js //（如果js位置不同，也要加上前面的目录）

四、Client
引入vue.js（非必要），socket.is.js,vue-resource（非必要）

<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> 
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>  
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>

<div id="container">
    <h1>New Users:</h1>
    <ul>
        <li v-for="chat in chatList">@{{chat}}</li>
    </ul>
    <div>
        <input type="text" v-model="chatInput"/>
        <button @click="submit">提交</button>
    </div>
</div>

<script>
    //监听服务器的3000端口
    var socket = io('http://192.168.10.10:3000');
    new Vue({
        el:'#container',

        data:{
            users:[],
            chatInput:'',
            submitUrl: 'http://localhost:8000/api/submit'  ,
            chatList:[]
        },

        mounted:function(){
            //socket.on('test-channel:UserSignUp',function(data){
            socket.on('test-channel:App\\Events\\UserSignUp',function(data){
                console.log(data);
                this.chatList.push(data.input);
            }.bind(this));
        },
        methods:{
            submit(){
                var that = this;
                that.$http.post(
                    this.submitUrl,
                    {'input':this.chatInput}
                ).then(function(response){  //接口返回数据
                },function(error){
                })
            }
        }

    });
</script>

然后该按钮提交后，服务端的代码如下

$input = $request->input('input');
//触发发送聊天信息事件
event(new SendChat($input));
return $input;

五、流程图

图片1.png