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（非必要）

    
New Users:
    

        
@{{chat}}
    
    

        
        提交
    

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

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

五、流程图

图片1.png