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

geeksoarsky

已于 2024-03-01 19:18:10 修改

阅读量2.9k

点赞数 13

文章标签： flutter 微信 websocket 即时通讯

于 2021-09-08 03:57:04 首次发布

本文链接：https://blog.csdn.net/geeksoarsky/article/details/120170785

版权

背景

基于 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 客户端复杂的请求。关注我的公众号，查看更多前沿资讯教程和开源项目。