php lumen 聊天室,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(非必要)

//监听服务器的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){

})

}

}

});

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

$input = $request->input('input');

//触发发送聊天信息事件

event(new SendChat($input));

return $input;

五、流程图

图片1.png