基于 Flutter 开发的微信风格的即时通讯系统设计与实现

我不是女神ヾ 2022-09-10 12:09 580阅读 0赞

### 目录 ###

*   *  背景
     *  效果展示
     *   *  创建聊天会话，已读回执
         *  发送，查看，保存媒体资源，上传进度回调
         *  发送语音消息和表情
         *  视频聊天，消息通知栏点击回调
         *  切换状态，深色模式，侧滑删除置顶，保存草稿
     *  系统架构
     *   *  Flutter 客户端
         *  Laravel 服务器端
         *  原理
     *  项目地址
     *  相关阅读

## 背景 ##

基于 Flutter (前端) + Laravel (后端) 开发的一个微信风格的即时通讯系统。已完成核心功能，界面美观，操作平滑，秒接视频聊天。本系统未接入任何第三方 IM 的 SDK，视图、数据处理和接口全部自行设计和编码实现，意味着高度可拓展，可定制。开发历时8天，速度很快是因为我搭建好了整个App的开发框架，一劳永逸。系统直接整合在了我的开源项目中，文末有链接。如果觉得不错，帮忙点个 Star 吧！

## 效果展示 ##

### 创建聊天会话，已读回执 ###

![在这里插入图片描述][b5f396abfbda49d2bd76e6306bd2bcee.gif_pic_center]

### 发送，查看，保存媒体资源，上传进度回调 ###

![在这里插入图片描述][321746001b234868b903e6fe3b56f436.gif_pic_center]

### 发送语音消息和表情 ###

振幅不显示是模拟器问题，真机振幅显示正常  
![在这里插入图片描述][2c77070dd3c545d7ade17174758ef81e.gif_pic_center]

### 视频聊天，消息通知栏点击回调 ###

一套代码实现双方呼叫  
![在这里插入图片描述][ee77d4f1cabc4499b7da524d3cdb19d2.gif_pic_center]

### 切换状态，深色模式，侧滑删除置顶，保存草稿 ###

![在这里插入图片描述][d76e0ec551f4471d801f152a90ffd275.gif_pic_center]

## 系统架构 ##

### 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等框架结合][GatewayWorker2.x 3.x _ _ _ThinkPHP]

具体实现步骤

1.  Flutter 客户端通过 **web\_socket\_channel** 建立与 **GatewayWorker** 的 websocket  
    连接
2.  GatewayWorker 发现有客户端发起连接时，将对应连接的 client\_id 发给 Flutter 客户端
3.  Flutter 客户端收到 client\_id 后触发一个 Http 请求将 client\_id 发到 Laravel 服务器端
4.  Laravel 服务器端收到 client\_id 后调用初始化方法 init() ，利用 GatewayClient 调用Gateway::bindUid($client\_id, $uid) 将 client\_id 与当前 uid ( 用户id ) 绑定。
5.  Flutter 客户端发起的所有请求都直接 post/get 到 Laravel 框架统一处理，包括发送消息
6.  Laravel 框架处理业务过程中需要向某个uid 或者某个群组发送数据时，直接调用 GatewayClient 的接口Gateway::sendToUid ，Gateway::sendToGroup 等发送即可

笔者之前使用 Layim + GatewayWorker 开发过 Web 聊天室，项目地址：[webim-layim][]，因为 LayIM 是无状态管理的，所以很难拓展就渐渐放弃了。  
反观 Flutter 本身就有 Widget 树刷新机制，我们再使用 Getx 进行更方面统一状态管理，局部刷新视图保证性能，整个系统开发起来非常流畅。Laravel 服务器端有做了很多修改和拓展，以适配 Flutter 客户端复杂的请求。关注我的公众号，查看更多前沿资讯教程和开源项目。

![在这里插入图片描述][4f899324ed9b40b58f6507b9b6dd17c1.gif_pic_center]

## 项目地址 ##

追求**极致** **大气**之作

*  [码云][Link 1]
 *  [GitHub][]

## 相关阅读 ##

*  [骆寻-V2.2.5的起源与发展前景分析][-V2.2.5]
 *  [哔哩哔哩——Flutter+Laravel开发的微信风格的及时通讯系统][Flutter_Laravel]

[b5f396abfbda49d2bd76e6306bd2bcee.gif_pic_center]: /images/20220829/5db47cafcaeb417fbff4e1b70b02656a.png
[321746001b234868b903e6fe3b56f436.gif_pic_center]: /images/20220829/f80b012d18c343f69066b09243eea1d2.png
[2c77070dd3c545d7ade17174758ef81e.gif_pic_center]: /images/20220829/021d831a8e4944faa09b6eeb76ad20a9.png
[ee77d4f1cabc4499b7da524d3cdb19d2.gif_pic_center]: /images/20220829/cb02b7f7bd234b179249108f7e10824a.png
[d76e0ec551f4471d801f152a90ffd275.gif_pic_center]: /images/20220829/ad8f4f4e7e3d4effb44785e7871665f4.png
[GatewayWorker2.x 3.x _ _ _ThinkPHP]: http://doc2.workerman.net/326107
[webim-layim]: https://gitee.com/geekadpt/webim-layim
[4f899324ed9b40b58f6507b9b6dd17c1.gif_pic_center]: /images/20220829/4b88e397b65a44f08ee4dcaff2c5e2ed.png
[Link 1]: https://gitee.com/geekadpt/flutter_locyin
[GitHub]: https://github.com/geekadpt/flutter_locyin
[-V2.2.5]: https://blog.csdn.net/geeksoarsky/article/details/116762340
[Flutter_Laravel]: https://www.bilibili.com/video/BV1ev411w7uj