一、修改laravel的廣播驅(qū)動

修改 .env中：

BROADCAST_DRIVER=redis

二、創(chuàng)建laravel事件廣播

比如要創(chuàng)建一個(gè)發(fā)送聊天消息的事件，則

php artisan make:event SendChat

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

SendChat.php：

//由于該事件需要廣播，則該類需要實(shí)現(xiàn)ShouldBroadcast

Class SendChat implements ShouldBroadcast {

    //然后將需要廣播的數(shù)據(jù)以public形式寫在此類作為成員屬性
    public $input;

    //new對象時(shí)存入的數(shù)據(jù)
    public function __construct($input)  {      
        $this->input = $input;  
    }

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

}

最后將會得到如下數(shù)據(jù)：

頻道：test-channel

數(shù)據(jù)：{"event":"App\Events\UserSignUp","data":{"input":"xulibin","socket":null},"socket":null}

Redis版本：
若不用laravel 的broadcast，則可以用Redis（它也有發(fā)布和訂閱功能）

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

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

最后將會得到如下數(shù)據(jù)：

頻道：test-channel

數(shù)據(jù)：{"event":"SendChat","data":{"input":"xlb"}}

三、創(chuàng)建node服務(wù)器，接受laravel事件廣播，再轉(zhuǎn)廣播給前端client，此處Node服務(wù)器是占用了3000端口，待會client也要監(jiān)聽這個(gè)3000端口。

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

npm install socket.io ioredis --save

2、創(chuàng)建socket.js（這次是創(chuàng)建在項(xiàng)目根目錄，也可其他目錄）

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);
    //這里是以“頻道:事件”的方式去發(fā)送，需要接受此事件的client就接受此格式的事件
    //test-channel:SendChat
    io.emit(channel+':'+message.event,message.data);  
});

server.listen(3000);

然后一定要開啟node服務(wù)器

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>
    //監(jiān)聽服務(wù)器的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){  //接口返回?cái)?shù)據(jù)
                },function(error){
                })
            }
        }

    });
</script>

然后該按鈕提交后，服務(wù)端的代碼如下

$input = $request->input('input');
//觸發(fā)發(fā)送聊天信息事件
event(new SendChat($input));
return $input;

五、流程圖

圖片1.png