聊天工具详细介绍

目录

1. 项目难点
2. 基本功能
3. 录屏
4. 截屏

项目难点

• 小部分用户网络差，优化启动加载速度
  1. http: http2.0多路复用，多接口同时请求 、https以支持service worker，js、css及静态资源服务端设置缓存时间
  2. 包大小优化：功能简单的不使用第三方包、阿里云上传sdk、图片压缩、二维码识别包等动态加载，开启gzip
  3. 在 js css 加载成功之前先在 index.html 上显示加载动画，不阻塞渲染，优化体验
• 好友、群、未读列表需要做到 5000+，优化 html 结构
  1. 减少遍历，使用虚拟滚动减少 html 代码优化性能。
  2. 未读列表定时更新页面，减少渲染，防止同时收到大量消息影响体验和性能
  3. 排序功能使用本地排序，减少服务器压力
• 消息推送必须及时
• 较多全局数据共享
• 推送服务连接状态
  尝试使用 Websocket 和 EventSource 两种长连接
• 错误捕捉和查询
  使用 Kibana 收集日志，出现问题时快速定位原因

基本功能

1. 未读列表
├── 扫一扫(https下可直接启动摄像头识别二维码)
│   ├── 二维码
│   ├── 好友名片
│   └── 群聊名片
├── 搜索功能
│   ├── 本地好友
│   ├── 本地群聊
│   ├── 本地聊天记录
│   └── 群发助手
├── 消息免打扰
├── 消息静音
├── 置顶好友
└── 置顶群聊
2. 好友列表
├── 好友备注
├── 新的好友
├── 标签（给友设置分组标签）
├── 添加好友
├── 聊天页面功能
│   ├── 1. 发送照片、视频
│   ├── 2. 发送名片
│   ├── 3. 红包、转账
│   │   ├── 群红包有拼手气、普通红包
│   │   └── 群转账可指定某人转账
│   ├── 4. 视频:语音通话 WebRTC
│   ├── 5. 发送录音
│   ├── 消息类型
│   │   ├── 分享
│   │   ├── 分享数据
│   │   ├── 图片
│   │   ├── 录音
│   │   ├── 红包
│   │   ├── 表情
│   │   ├── 视频
│   │   ├── 语音、视频相关
│   │   ├── 转账
│   │   └── 通知
│   │       ├── 修改群名称
│   │       ├── 撤回提示
│   │       ├── 消息时间
│   │       ├── 管理员移除成员
│   │       ├── 群公告
│   │       ├── 群解散
│   │       ├── 进、出群
│   │       └── 邀请进群
│   ├── 消息菜单
│   │   ├── 删除
│   │   │   ├── 服务器不删除
│   │   │   └── 本地删除，但当前端无法再从服务器获取
│   │   ├── 复制
│   │   ├── 多选
│   │   ├── 撤回
│   │   │   └── 服务器和本地都进行删除
│   │   ├── 收藏为表情
│   │   └── 转发
│   ├── 管理
│   │   ├── 免打扰
│   │   ├── 清空聊天记录
│   │   │   └── 服务器、本地删除聊天记录
│   │   └── 置顶
│   └── 表情功能
│       ├── 收藏表情
│       ├── 游戏表情
│       │   ├── 石头剪刀布
│       │   └── 骰子
│       └── 默认 Emoji 表情
└── 通讯录本地字母排序
3. 群聊列表
├── 群功能
│   ├── 免打扰
│   ├── 开启群共享链接（无需进群看群消息）
│   ├── 我在群的昵称
│   ├── 清空聊天记录
│   ├── 置顶
│   ├── 群二维码
│   ├── 群公告、群介绍
│   ├── 群管理
│   │   ├── 发言字数限制
│   │   ├── 发言频率（几秒内发言几次）
│   │   ├── 增、删群管理
│   │   ├── 查看在线用户
│   │   ├── 清空聊天记录（清空所有人的聊天记录）
│   │   ├── 禁言管理
│   │   ├── 管理日志
│   │   ├── 管理非活用户
│   │   ├── 群头像、群名称
│   │   ├── 群头衔
│   │   │   ├── 介绍：发言时昵称前带一个 Tag 标签
│   │   │   ├── 头衔名称
│   │   │   ├── 头衔颜色
│   │   │   ├── 权限开关：1. 允许邀请好友加群
│   │   │   ├── 权限开关：2. 不受全员禁言限制
│   │   │   └── 权限开关：3. 不受发言频率限制
│   │   ├── 群管理发言字体颜色
│   │   ├── 群转让
│   │   └── 隐私设置
│   │       ├── 介绍：均为开关
│   │       ├── 允许发送名片
│   │       ├── 允许成员查看管理信息
│   │       ├── 允许成员查看群主信息
│   │       ├── 允许成员邀请好友加群
│   │       ├── 允许查看群成员信息
│   │       ├── 允许通过群号找到群
│   │       └── 加群验证开关
│   └── 邀请、移除成员
├── 群名称本地字母排序
├── 群搜索
├── 群收藏（游客群）
└── 群通知
4. 我的
├── 设置
│   ├── 交易管理
│   │   ├── 打开红包功能
│   │   └── 打开转账功能
│   ├── 存储空间
│   │   └── 清除本地indexedDB缓存
│   ├── 新消息通知
│   │   ├── 声音开关
│   │   └── 音效选择
│   ├── 账号安全
│   └── 隐私设置
│       ├── 允许好友邀请我加群
│       ├── 允许通过号码找到我
│       ├── 加我为好友时需要验证
│       └── 通讯录黑名单
└── 资料设置
    ├── 其它普通资料修改
    └── 头像上传
        ├── 图片压缩再上传
        ├── 头像缩放
        ├── 头像裁剪
        └── 第三方库普遍太大，自己写了一个

聊天工具录屏

聊天工具截屏

(1) 聊天内容

(2) 发红包

(3) 搜索功能

(4) 群发助手

(5) 群聊天信息

(6) 群管理

(7) 群头衔

(8) 群禁言

(9) 群操作日志