目錄
- 背景
- 效果展示
- 創建聊天會話，已讀回執
- 發送，查看，保存媒體資源，上傳進度回呼
- 發送語音訊息和表情
- 視頻聊天，訊息通知欄點擊回呼
- 切換狀態，深色模式，側滑洗掉置頂，保存草稿
- 系統架構
- Flutter 客戶端
- Laravel 服務器端
- 原理
- 專案地址
背景
基于 Flutter (前端) + Laravel (后端) 開發的一個微信風格的即時通訊系統，已完成核心功能，界面美觀，操作平滑，秒接視頻聊天，本系統未接入任何第三方 IM 的 SDK，視圖、資料處理和介面全部自行設計和編碼實作，意味著高度可拓展，可定制，開發歷時8天，速度很快是因為我搭建好了整個App的開發框架，一勞永逸，系統直接整合在了我的開源專案中，文末有鏈接，如果覺得不錯，幫忙點個 Star 吧！
效果展示
創建聊天會話，已讀回執
發送，查看，保存媒體資源，上傳進度回呼
發送語音訊息和表情
振幅不顯示是模擬器問題，真機振幅顯示正常
視頻聊天，訊息通知欄點擊回呼
一套代碼實作雙方呼叫
切換狀態，深色模式，側滑洗掉置頂，保存草稿
系統架構
Flutter 客戶端
核心組件：
- 狀態管理：get: ^4.3.8
- Socket 長連接：web_socket_channel: ^2.1.0
- 持久化存盤：shared_preferences: ^2.0.7
- 網路請求：dio: ^4.0.0
- 權限處理：permission_handler: ^8.1.4+2
- 媒體資源：wechat_assets_picker: ^6.1.1 | wechat_camera_picker: ^2.4.1 | extended_image: ^4.2.1
- 視頻播放截圖：video_player: ^2.1.15 | chewie: any | video_compress: ^3.1.0
- 錄音：flutter_plugin_record: ^1.0.1
- 音視頻通話： agora_rtc_engine: ^4.0.6
Laravel 服務器端
核心組件：
- Socket 長連接：workerman/gateway-worker | workerman/gatewayclient
- 鑒權：tymon/jwt-auth
- 阿里云存盤：johnlui/aliyun-oss-laravel7
原理
WebSocket 協議支持服務端主動推送資訊給客戶端，我們的系統可以說是 WebSocket 協議從應用在 Web 頁面到應用在 App 客戶端的一次成功實踐，
參考：GatewayWorker2.x 3.x 手冊 – 與ThinkPHP等框架結合
具體實作步驟
-
Flutter 客戶端通過 web_socket_channel 建立與 GatewayWorker 的 websocket
連接 -
GatewayWorker 發現有客戶端發起連接時，將對應連接的 client_id 發給 Flutter 客戶端
-
Flutter 客戶端收到 client_id 后觸發一個 Http 請求將 client_id 發到 Laravel 服務器端
-
Laravel 服務器端收到 client_id 后呼叫初始化方法 init() ，利用 GatewayClient 呼叫Gateway::bindUid($client_id, $uid) 將 client_id 與當前 uid ( 用戶id ) 系結，
-
Flutter 客戶端發起的所有請求都直接 post/get 到 Laravel 框架統一處理，包括發送訊息
-
Laravel 框架處理業務程序中需要向某個uid 或者某個群組發送資料時，直接呼叫 GatewayClient 的介面Gateway::sendToUid ，Gateway::sendToGroup 等發送即可
筆者之前使用 Layim + GatewayWorker 開發過 Web 聊天室，專案地址：webim-layim，因為 LayIM 是無狀態管理的，所以很難拓展就漸漸放棄了，
反觀 Flutter 本身就有 Widget 樹重繪機制，我們再使用 Getx 進行更方面統一狀態管理，區域重繪視圖保證性能，整個系統開發起來非常流暢，Laravel 服務器端有做了很多修改和拓展，以適配 Flutter 客戶端復雜的請求，關注我的公眾號，查看更多前沿資訊教程和開源專案，
專案地址
追求極致 大氣之作
- 碼云
- GitHub
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/298632.html
標籤：其他
上一篇：校園網內網穿透，搭建校園網vpn