一個基於 Laravel5.4+Vue+Redis 實時聊天的小 demo

一個基於Laravel+Vue+Redis 實時聊天的小demo

這篇是基於一個基於 Laravel5.4+Vue+Pusher 實時聊天的小 demo

固然也能夠獨立出來,只須要把驅動換成 Redis 就能夠了

GitHub 直達

https://github.com/jplhomer/laravel-realtime-chat-demo

git

git clone https://github.com/jplhomer/laravel-realtime-chat-demo project

因爲 GitHub 是基於 Pusher 的 因此安裝以前須要一些修改

進入 composion.json

去掉 "pusher/pusher-php-server": "^2.6"

增長 "predis/predis": "^1.1"

而後 composer 安裝

cd project 

composer install

配置數據庫及 key

cp .env.example .env

art key:generate

配置驅動

BROADCAST_DRIVER=redis

遷移

art migtate

而後進入 package.json

去掉 "pusher-js": "^4.0.0"

yarn 或 npm 安裝

yarn 

npm

yarn 或者 npm 打包

yarn run dev

npm run dev

因爲 Redis 使用的 Socket.IO 所以須要配置客戶端 Socket.io 和服務員端 Socket.io

客戶端 Socket.IO

進入 bootstrap.js

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://yourdomain.app:6001'
});

進入 app.blade.php head 中增長

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

服務端 laravel-echo-server

yarn add laravel-echo-server

或者 npm install laravel-echo-server

安裝完成後 生成服務端的配置文件 啓動後會讀取這個配置文件

laravel-echo-server init

個人配置文件

{
    "authHost": "http://delo.app",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": false,
    "host": "delo.app",
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": ""
}

若是不運行 laravel-echo-server init 的話 能夠新建一個 laravel-echo-server.json 的文件 複製上面的內容進去 修改爲你的主機就能夠了
最後在 app.blade.php 中引入

<script src="//yourdomain:6001/socket.io/socket.io.js"></script>

啓動

laravel-echo-server start

ok 最後註冊兩個帳號開始實驗吧

你可能發現 在一個瀏覽器每刷新一次後，另外一個瀏覽器的在線數都會加 1 ，可是用 pusher 的話就不會出現這個問題（這是爲何？）。奇怪

如何解決呢 其中走了好多彎路

剛開始的時候 想的是數組去重的方法

在 app.js 中你會發現

Echo.join('chatroom')
            .here((users) => {
                this.usersInRoom = users;
            })
            .joining((user) => {
                this.usersInRoom.push(user);
            })
            .leaving((user) => {
                this.usersInRoom = this.usersInRoom.filter(u => u != user)
            })
            .listen('MessagePosted', (e) => {
                this.messages.push({
                    message: e.message.message,
                    user: e.user
                });
            });

原本想着百度一個數組的去重方法 像這樣的

Array.prototype.unique = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique());

但通過 leo 的指點 有個插件很是好用 lodash 安裝後

只需這樣

this.usersInRoom=_.uniq(this.usersInRoom）

接下來 又是一個奇怪的事情 console.log(this.usersInRoom) 發現新增長的居然是一個對象。數組去重就不行了。

我厚着臉皮向 overtrue 發出了呼喚 。。

向超神簡單的描述一番後。 超神說 "返回的應該是對象，能夠考慮用 ID" 撥雲見日

this.usersRoom=users

users 既然是對象的話，讓它返回 id 就能夠了

users 是在哪裏返回的呢，在BroadcastServiceProvider發現

require base_path('routes/channels.php');

進入 routes/channels.php

Broadcast::channel('chatroom', function ($user) {
    return $user;
});

修改成

Broadcast::channel('chatroom', function ($user) {
        return $user->id;
    });

ok 柳暗花明！

總結： 雖然寫了基於 pusher 和 redis 廣播的兩個小 demo，但仍是遊離於配置層面。底層的東西仍是朦朦朧朧的。但對於剛入門的新手來講，這是比較有用的。由於我比較喜歡，先把東西呈現出來，而後再去深刻。

一個 demo 愛好者