摘要:即時交互的應用在現代的應用中很多場景都需要運用到即時通訊,比如說最常見的支付回調,與三方登錄。在生成事件時,已經自動添加了該命名空間,該契約只約束方法。會將事件中的允許公開訪問的數據通過給定的頻道發布出去。
即時交互的應用
在現代的 Web 應用中很多場景都需要運用到即時通訊,比如說最常見的支付回調,與三方登錄。這些業務場景都基本需要遵循以下流程:
客戶端觸發相關業務,并產生第三方應用的操作(比如支付)
客戶端等待服務端響應結果(用戶完成第三方應用的操作)
第三方應用通知服務端處理結果(支付完成)
服務端通知客戶端處理結果
客戶端依據結果做出反饋 (跳轉到支付成功頁面)
在過去,為了實現這種即時通訊,能讓客戶端正確響應處理結果,最為常用的技術就是輪詢,因為 HTTP 協議的單向性,客戶端只能一遍一遍的主動詢問服務端的處理結果。這種方式有顯見的缺陷,占用服務端資源不說,還不能實時獲得服務端處理結果。
現在,我們可以使用 WebSocket 協議來處理實時交互,它是一種雙向協議,允許服務端主動推送信息到客戶端。本篇我們將借助 Laravel 強大的事件系統來構建實時的交互。你將需要用到以下知識:
Laravel Event
Redis
Socket.io
Node.js
Redis在開始之前,我們需要開啟一個 redis 服務,并在 Laravel 應用中進行配置啟用,因為在整個流程中,我們需要借助 redis 的訂閱和發布機制來實現即時通訊。
Redis 是一個開源高效的鍵值對存儲系統。它通常作為一個數據結構服務器來存儲鍵值對,它可以支持字符串,散列,列表,集合和有序結合。在 Laravel 中使用 Redis 你需用通過 Composer 來安裝 predis/predis 包文件。
配置Redis 在應用中的配置文件存儲在 config/database.php,在這個文件中,你可以看到一個包含了 Redis 服務信息的 redis 數組:
"redis" => [ "cluster" => false, "default" => [ "host" => "127.0.0.1", "port" => 6379, "database" => 0, ], ]
如果你修改了 redis 服務的端口,請保持配置文件中的端口一致。
Laravel Event這里我們需要借助 Laravel 強大的事件廣播能力:
配置廣播事件
很多現代化的應用中,會使用 Web Sockets 來實現實時交互的用戶接口。當一些數據在服務端變更時,一條消息會通過 WebSocket 連接來傳遞到客戶端進行處理。
為了幫助你構建這種類型的應用。Laravel 使通過 WebSocket 連接進行廣播事件變的非常簡單。Laravel 允許你廣播事件來共享事件的名稱到你的服務端和客戶端的 JavaScript 框架。
所有的事件廣播配置選項都被存儲在 config/broadcasting.php 配置文件中。Laravel 附帶了幾種可用的驅動如 Pusher,Redis,和 Log,我們將使用 Redis 作為廣播驅動,這里需要依賴 predis/predis 類庫。
由于默認的廣播驅動使用的是 pusher,所以我們需要在 .env 文件中設置 BROADCAST_DRIVER=redis。
我們創建一個 WechatLoginedEvent 事件類用來在用戶掃描微信登錄后進行廣播:
token = $token; $this->channel = $channel; } /** * Get the channels the event should be broadcast on. * * @return array */ public function broadcastOn() { return [$this->channel]; } /** * Get the name the event should be broadcast on. * * @return string */ public function broadcastAs() { return "wechat.login"; } }
其中你需要注意 broadcastOn 方法應返回一個數組,它表示所需廣播的頻道,而 broadcastAs 返回的是一個字符串,它表示廣播所觸發的事件,Laravel 默認的是返回事件類的全類名,這里是 AppEventsWechatLoginedEvent.
最重要的是你需要手動的讓該類實現 ShouldBroadcast 契約。Laravel 在生成事件時,已經自動添加了該命名空間,該契約只約束 broadcastOn 方法。
事件完成接下來就是觸發事件了,簡單的一行代碼就可以:
event(new WechatLoginedEvent($token, $channel));
這個操作會自動的觸發事件的執行并將信息廣播出去。該廣播操作底層借助了 redis 的訂閱和發布機制。RedisBroadcaster 會將事件中的允許公開訪問的數據通過給定的頻道發布出去。如果你想對公開的數據擁有更多的控制,你可以在事件中添加 broadcastWith 方法,它應該返回一個數組:
/** * Get the data to broadcast. * * @return array */ public function broadcastWith() { return ["user" => $this->user->id]; }Node.js 和 Socket.io
對于發布出去的信息,我們需要一個服務來對接,讓其能對 redis 的發布能夠進行訂閱,并且能把信息以 WebSocket 協議轉發出去,這里我們可以借用 Node.js 和 socket.io 來非常方便的構建這個服務:
// server.js var app = require("http").createServer(handler); var io = require("socket.io")(app); var Redis = require("ioredis"); var redis = new Redis(); app.listen(6001, function () { console.log("Server is running!") ; }); function handler(req, res) { res.writeHead(200); res.end(""); } io.on("connection", function (socket) { socket.on("message", function (message) { console.log(message) }) socket.on("disconnect", function () { console.log("user disconnect") }) }); redis.psubscribe("*", function (err, count) { }); redis.on("pmessage", function (subscrbed, channel, message) { message = JSON.parse(message); io.emit(channel + ":" + message.event, message.data); });
這里我們使用 Node.js 引入 socket.io 服務端并監聽 6001 端口,借用 redis 的 psubscribe 指令使用通配符來快速的批量訂閱,接著在消息觸發時將消息通過 WebSocket 轉發出去。
Socket.io 客戶端在 web 前端,我們需要引入 Socket.io 客戶端開啟與服務端 6001 端口的通訊,并訂閱頻道事件:
// client.js let io = require("socket.io-client") var socket = io(":6001") socket.on($channel + ":wechat.login", (data) => { socket.close() // save user token and redirect to dashboard })
至此整個通訊閉環結束,開發流程看起來就是這樣的:
在 Laravel 中構建一個支持廣播通知的事件
設置需要進行廣播的頻道及事件名稱
將廣播設置為使用 redis 驅動
提供一個持續的服務用于訂閱 redis 的發布,及將發布內容通過 WebSocket 協議推送到客戶端
客戶端打開服務端 WebSocket 隧道,并對事件進行訂閱,根據指定事件的推送進行響應。
PS: 歡迎關注簡書 Laravel 專題,也歡迎 Laravel 相關文章的投稿 :),作者知識技能水平有限,如果你有更好的設計方案歡迎討論交流,如果有錯誤的地方也請批評指正,在此表示感謝 :)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/21861.html
摘要:打造你的即時應用二消息推送與監聽年月日接于上篇博客打造你的即時應用一項目初始化構建在上一篇博客中介紹了項目的基本構建現在進入實戰操作一消息推送創建事件類的廣播推送通過來實現下面通過命令來創建一個事件類為了配合我們的廣播系統使用需要實現接 打造你的Laravel即時應用(二)-消息推送與監聽 2019年08月04日20:16:21 XXM 接于上篇博客: 打造你的Laravel即時應用(...
摘要:配置項即時載入的服務提供者根目錄所有即時載入的服務注冊完成之后,會立即調用方法,并標記為已載入。最終就是將數組設置給的屬性將運用到所有的路由,再加載。 Laravel 配置項即時載入的服務提供者 (根目錄:/var/www/laravel/) 所有即時載入的服務注冊完成之后,會立即調用 register 方法,并標記為已載入。 隨后通過 IlluminateFoundationBoot...
摘要:在本文中,我們將了解中的懶加載和即時加載以及它如何在后臺運行。現在所有的房屋數據和在關系表中的數據都同時加載出來了,查詢的語句的是使用即時加載時僅執行個查詢。總結現在你理解了這個過程,希望它能幫助你理解懶加載和即時加載的用法和基本原理。 Laravel中的Eloquent(ORM)的工作方式很令人驚訝,并提供訪問數據庫的非常簡單的方法。在本文中,我們將了解Laravel Eloquen...
摘要:今天,讓我們深入研究下的廣播系統。廣播系統的目的是用于實現當服務端完成某種特定功能后向客戶端推送消息的功能。這種使用場景可以完美詮釋廣播系統的工作原理。另外,本教程將使用廣播系統實現這樣一個即時通信應用。 這是一篇譯文,譯文首發于 Laravel 廣播系統工作原理,轉載請注明出處。 今天,讓我們深入研究下 Laravel 的廣播系統。廣播系統的目的是用于實現當服務端完成某種特定功能后向...
閱讀 1171·2021-11-24 09:39
閱讀 2675·2021-09-28 09:35
閱讀 1070·2019-08-30 15:55
閱讀 1361·2019-08-30 15:44
閱讀 879·2019-08-29 17:00
閱讀 1969·2019-08-29 12:19
閱讀 3310·2019-08-28 18:28
閱讀 690·2019-08-28 18:10