学问Chat UI(4)
时间:2022-04-22
本文章向大家介绍学问Chat UI(4),主要内容包括前言、AuroraChat、使用、ChatView for React Native、配置、数据格式、ChatView介绍、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前言
写这个组件是在几个月前,那时候是因为老大讲RN项目APP的通讯聊天部分后面有可能自己实现,让我那时候尝试着搞下Android通讯聊天UI实现的部分,在这期间,找了不少的Android原生项目:蘑菇街的TeamTalk,ChatDemo,EmojiChat,考虑到扩展性与改造复杂度,选择了学习融云 IM 界面组件。其实一直想写这个项目介绍,学习需要思考与总结,如果学了以后没有总结或者思考,慢慢地时间会磨平他们。
AuroraChat
AuroraChat 是个基于融云UI库的即时通讯(IM)RN UI组件。
本 UI 组件提供了消息列表、输入视图等常用组件,支持常见的消息类型:文字、图片、语音等。
支持 Android,暂不支持iOS 平台。
功能
可以基于本 UI 库实现的功能:
- 消息列表的展示;
- 支持多种消息类型;
- 对每种消息类型的点击处理;
- 支持用户头像。
- 消息输入:
- 支持多种消息类型;
- 语音输入组件;
- 相册照片选取组件;
当前支持展示与输入的消息类型:
- 文字
- 图片
- 语音
使用
当前提供的组件:
Android
- EditExtension (关于输入组件的布局)
- AutoRefreshListView (关于消息如何适配ListView)
React Native
ChatView for React Native
配置
- 用法
import {DeviceEventEmitter} from "react-native";
import ChatView from "../rychatview";
数据格式
加载消息列表UI,需要传递一定格式的消息对象
-
message
对象格式:
message = { // text message
"type": "text",
"own": false,//是否为当前用户
"content": "发送文本内容",
"ts": "发送时间",
"uid": "当前用户id",
"msgid": "消息uid",
"senduserinfo": "发送者信息"
}
message = { // image message
"type": "image",
"own": false,//是否为当前用户
"content": "图片URL",
"ts": "发送时间",
"uid": "当前用户id",
"msgid": "消息uid",
"senduserinfo": "发送者信息"
}
message = { // voice message
"type": "voice",
"own": false,//是否为当前用户
"duration": "50",//时长 单位:秒
"content": "语音URL",
"ts": "发送时间",
"uid": "当前用户id",
"msgid": "消息uid",
"senduserinfo": "发送者信息"
}
message = { // chatInfo message
"userid": "用户id",
"name": "昵称",
"portraitUri": "头像URL",
"chattype": "聊天类型",//群组 私聊
"targetid": "目标id"
}
ChatView介绍
Props 属性
chatInfo
PropTypes.object:登录聊天服务器后设置初始化
curChatInfo: {
"userid": "1001",
"name": "golike",
"portraitUri":"http://img0.imgtn.bdimg.com/it/u=651843754,4204488972&fm=213&gp=0.jpg",
"chattype": "priv",
"targetid": "1002"
}
isOnRefresh
PropTypes.bool:下拉刷新的标识符
OnRefresh
PropTypes.function: () => {//重新网络请求 }
DeviceEventEmitter监听 uploadMsg事件
监听来自原生的不同消息
componentDidMount() {
//设置来自原生的消息的监听
this.subscription = DeviceEventEmitter.addListener('uploadMsg', this.onUpdateMessage);
}
componentWillUnmount() {
//移除监听器
this.subscription.remove();
}
组件内的方法
getHistoryMessage
PropTypes.function:加载历史消息
historyMsgs = [ 前面消息类型中的消息,*,...]
(historyMsgs) => {//连接消息服务器成功后获取的历史消息列表,发送给原生};
sendTextMsg
PropTypes.function:
(msg) => {//从js构造文本数据发送给原生};
sendRichTextMsg
PropTypes.function:未实现
(msg) => {//从js构造富文本数据发送给原生};
sendPicMsg
PropTypes.function:
(msg) => {//从js构造图片数据发送给原生};
sendVoiceMsg
PropTypes.function:
(msg) => {//从js构造语音数据发送给原生};
- 中小型商城系统中的分类/产品属性/扩展属性的数据库设计
- Linux下FTP虚拟账号环境部署总结
- Replace方法与正则表达式的性能比较
- 由索引节点(inode)爆满引发的问题
- As3.0中的位图(Bitmap/BitmapData)编程
- Mesos+Zookeeper+Marathon的Docker管理平台部署记录(2)--负载均衡marathon-lb
- Docker集群管理工具-Kubernetes部署记录
- AS3:小游戏“贪吃蛇”的实现
- 超实用的8个Linux命令行性能监测工具
- 用javascript替换URL中的参数值
- Gitblit版本服务器环境部署记录
- HDK扩展自定义VEX函数print
- AsyncTask和Handler对比
- sql初始化XML操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- html 上
- Android复制assets文件到SD卡
- html 下
- Android画板开发之添加文本文字
- Android获得设备状态信息、Mac地址、IP地址的方法
- Android加载Assets目录中Xml布局文件
- Android系统在shell中的df命令实现
- 面向对象版tab 栏切换案例
- 构造函数和原型
- 解决json中ensure_ascii=False的问题
- Django自定义列表 models字段显示方式
- 无人驾驶环境感知 | 01 车道线检测网络LanNet原理及实现
- 对象存储COS-数据处理能力升级!“组合拳”助力存储新时代!
- 基于python图像处理API的使用示例
- python 的topk算法实例