国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

lanffy / 3695人閱讀

摘要:我厚著臉皮向發(fā)出了呼喚。。向超神簡單的描述一番后。底層的東西還是朦朦朧朧的。但對于剛?cè)腴T的新手來說,這是比較有用的。

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

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

當然也可以獨立出來,只需要把驅(qū)動換成 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

配置數(shù)據(jù)庫及 key

cp .env.example .env

art key:generate

配置驅(qū)動

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 中增加


服務端 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 的文件 復制上面的內(nèi)容進去 修改成你的主機就可以了
最后在 app.blade.php 中引入

    

啟動

            
            laravel-echo-server start

ok 最后注冊兩個賬號開始實驗吧

你可能發(fā)現(xiàn) 在一個瀏覽器每刷新一次后,另一個瀏覽器的在線數(shù)都會加 1 ,但是用 pusher 的話就不會出現(xiàn)這個問題(這是為什么?)。奇怪

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

剛開始的時候 想的是數(shù)組去重的方法

在 app.js 中你會發(fā)現(xiàn)

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
                });
            });

本來想著百度一個數(shù)組的去重方法 像這樣的

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());

但經(jīng)過 leo 的指點 有個插件非常好用 lodash 安裝后

只需這樣

this.usersInRoom=_.uniq(this.usersInRoom)

接下來 又是一個奇怪的事情 console.log(this.usersInRoom) 發(fā)現(xiàn)新增加的竟然是一個對象。數(shù)組去重就不行了。

我厚著臉皮向 overtrue 發(fā)出了呼喚 。。

向超神簡單的描述一番后。 超神說 "返回的應該是對象,可以考慮用 ID" 撥云見日

this.usersRoom=users

users 既然是對象的話,讓它返回 id 就可以了

users 是在哪里返回的呢,在BroadcastServiceProvider發(fā)現(xiàn)

 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 柳暗花明!

總結(jié): 雖然寫了基于 pusher 和 redis 廣播的兩個小 demo,但還是游離于配置層面。底層的東西還是朦朦朧朧的。但對于剛?cè)腴T的新手來說,這是比較有用的。因為我比較喜歡,先把東西呈現(xiàn)出來,然后再去深入。

一個 demo 愛好者

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/23168.html

相關(guān)文章

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

    摘要:我厚著臉皮向發(fā)出了呼喚。。向超神簡單的描述一番后。底層的東西還是朦朦朧朧的。但對于剛?cè)腴T的新手來說,這是比較有用的。 一個基于Laravel+Vue+Redis 實時聊天的小demo 這篇是基于一個基于 Laravel5.4+Vue+Pusher 實時聊天的小 demo 當然也可以獨立出來,只需要把驅(qū)動換成 Redis 就可以了 GitHub 直達 https://github.com...

    chengjianhua 評論0 收藏0
  • 全棧開發(fā)——動手打造屬于自己的直播間(Vue+SpringBoot+Nginx)

    摘要:經(jīng)過琢磨,其實是要考慮安全性的。具體在以下幾個方面跨域連接協(xié)議升級前握手攔截器消息信道攔截器對于跨域問題,我們可以通過方法來設置可連接的域名,防止跨站連接。 前言 大學的學習時光臨近尾聲,感嘆時光匆匆,三年一晃而過。同學們都忙著找工作,我也在這里拋一份簡歷吧,歡迎各位老板和獵手誠邀。我們進入正題。直播行業(yè)是當前火熱的行業(yè),誰都想從中分得一杯羹,直播養(yǎng)活了一大批人,一個平臺主播粗略估計就...

    e10101 評論0 收藏0
  • 造個輪子,基于 Laravel5.4 的下一代 PHP 開發(fā)框架 (API/SPA/Vue2/iVi

    摘要:像操作系統(tǒng)一樣,你可以通過安裝軟件,成為適用于你的電腦。先進的技術(shù)方案,使得你無需擔心后期功能拓展與迭代問題,大大降低了維護成本。對于一個超過三年生命周期的項目來說,最適合不過。總之,是新的技術(shù)方向標,能讓每個藝術(shù)家像構(gòu)建工程一樣構(gòu)建程序。 這是我們團隊的一個非盈利項目,以Apache2.0協(xié)議開源...不限制商用 Notadd是什么 Notadd 是基于Laravel 和 Vue 的...

    Rocture 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<