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;

五、流程圖