当前位置:首页 » 《关注互联网》 » 正文

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

2 人参与  2021年09月09日 10:03  分类 : 《关注互联网》  评论

点击全文阅读


目录

    • 背景
    • 效果展示
      • 创建聊天会话,已读回执
      • 发送,查看,保存媒体资源,上传进度回调
      • 发送语音消息和表情
      • 视频聊天,消息通知栏点击回调
      • 切换状态,深色模式,侧滑删除置顶,保存草稿
    • 系统架构
      • 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($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 客户端复杂的请求。关注我的公众号,查看更多前沿资讯教程和开源项目。

在这里插入图片描述

项目地址

追求极致 大气之作

  • 码云
  • GitHub

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/27419.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 我在回忆里万劫不复精彩节选(秦见鹿谢梵声)_我在回忆里万劫不复精彩节选
  • 迟迟白日晚全书+后续(路星延宋栀年)_(迟迟白日晚全书+后续)迟迟白日晚全书+后续列表_笔趣阁(路星延宋栀年)
  • 往梦难复温+全书+后续(沈淮霆宋思予)列表_往梦难复温(沈淮霆宋思予)往梦难复温+全书+后续在线
  • 兰因絮果,爱恨全如玉碎全书+后续+结局(谢长乐肖风行)列表_兰因絮果,爱恨全如玉碎(谢长乐肖风行)兰因絮果,爱恨全如玉碎全书+后续+结局在线
  • 从此星辰远,归途似海深人气节选(璃月龙影)全书免费_(璃月龙影)从此星辰远,归途似海深人气节选后续(璃月龙影)
  • 全文你来时风起云涌番外+(陆翊夏天瑜赵歆)列表_全文你来时风起云涌番外+
  • 人面兽小说精彩节选免费试读_小浩言语小蕊爆款小说高能章节试读
  • 你来时风起云涌免费(陆翊夏天瑜赵歆)
  • 四海八荒苦封喉,君心似毒酒结局+番外+后续看点十足(洛虞玄澈)_四海八荒苦封喉,君心似毒酒结局+番外+后续看点十足(洛虞玄澈)洛虞玄澈免费列表_笔趣阁(洛虞玄澈)
  • 「错宠假千金,全京城权贵暴虐侯府」章节多结局预体验‌_沈轻漾楚珩完结版免费在线阅读
  • 画地为牢(池念谢宴清)_画地为牢(池念谢宴清)
  • 完结文往梦难复温列表_完结文往梦难复温(沈淮霆宋思予)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1