一、修改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
