阅读 916

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等框架结合

具体实现步骤

  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(clientid,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 客户端复杂的请求。

项目地址

追求极致 大气之作

相关阅读

文章分类
Android
文章标签