IM 即时通讯(增强版)
Web
动态与公告
IM UIKit 更新日志
NIM SDK 更新日志
新手接入指南
产品介绍
简介
产品优势
主要功能
功能介绍
账号集成与登录
基础消息功能
群组功能
聊天室功能
圈组功能
多端登录与互踢策略
海外数据中心
IM 平滑迁移方案
接口及业务限制
体验 Demo
下载 SDK 与 Demo 源码
快速开始
跑通 IM Demo 源码
实现单聊消息收发(不含 UI)
实现聊天室登录(不含 UI)
实现圈组消息收发(不含 UI)
含 UI 集成
什么是 IM UIKit
IM UIKit 功能列表
快速集成 IM UIKit
非React框架快速集成
非React框架集成 IM UIKit
非 React 框架自定义示渲染
组件导入
初始化
全局上下文
登录相关
会话列表相关
集成会话列表界面
自定义会话列表界面 UI
会话消息相关
集成会话界面
实现自定义消息收发
自定义会话界面 UI
用户资料相关
集成用户资料组件
通讯录相关
集成通讯录界面
自定义通讯录界面 UI
搜素组件相关
集成搜索组件
自定义搜索组件 UI
主题样式设置
语言设置
初始化(兼容 NIM SDK)
常见问题
如何解决样式冲突
不含 UI 集成
集成 SDK
IM 登录与初始化相关
初始化并登录 IM
注销登录与销毁实例
多端登录与互踢
消息收发
历史消息
消息扩展
最近会话
服务端会话服务
用户资料托管
好友关系托管
在线状态订阅
系统通知
群组功能
群组概述
群组管理
群成员管理
群消息管理
超大群功能
超大群概述
超大群管理
超大群成员管理
超大群消息管理
反垃圾
聊天室功能
聊天室概述
聊天室初始化与登录相关
初始化并登录聊天室
注销登录与销毁实例
聊天室标签功能
聊天室消息管理
聊天室成员管理
聊天室信息管理
聊天室队列服务
圈组功能
圈组概述
初始化与登录
通用接口校验说明
服务器相关
服务器概述
服务器管理
服务器成员管理
游客功能
服务器未读数管理
频道相关
频道概述
频道管理
频道黑白名单
频道分组
频道分组黑白名单
频道未读数管理
实时互动频道
搜索服务器与频道
身份组相关
身份组概述
身份组应用场景
服务器身份组
频道身份组
频道用户定制权限
频道分组身份组
自定义权限项
成员权限查询与判定
身份组相关查询
圈组订阅机制
圈组消息相关
圈组消息收发
圈组消息撤回
圈组消息更新
圈组消息删除
消息正在输入
获取频道最后一条消息
会话消息回复(Thread)
圈组快捷评论
圈组消息搜索
查询历史消息
查询@我的消息
圈组系统通知相关
圈组系统通知概述
圈组系统通知收发
圈组系统通知更新
圈组内容审核
圈组第三方回调
圈组相关抄送
圈组各端接口命名差异
融合存储方案
最佳实践
聊天室重要消息投递
API 参考
NIM SDK API 参考
状态码
IM 控制台指南
创建应用
注册 IM 账号
升级服务
服务协议

集成会话界面

更新时间: 2023/04/04 10:47:51

聊天(会话消息)组件(chat-kit)主要功能为传递用户间消息、展示消息、控制聊天,同时提供了聊天输入框、聊天内容展示和控制、聊天设置等功能。

界面效果

会话消息界面930.png

界面集成

在您的 React 项目中导入会话消息组件,并设置会话消息界面尺寸,即可集成 IM UIKit 默认的会话消息界面。

示例代码如下:

import React from 'react'
import { ChatContainer } from '@xkit-yx/im-kit-ui'

import '@xkit-yx/im-kit-ui/es/style'

const Page1 = () => {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ChatContainer />
    </div>
  )
}

IM UIKit 默认的会话消息界面,支持如下功能:

  • 聊天输入框
    • 发送消息
    • 发送表情
    • 发送图片
    • 发送文件
  • 聊天内容展示和控制
    • 聊天消息、好友资料展示
    • 聊天消息撤回、删除、重新编辑
    • 聊天好友拉黑/解除拉黑、删除/添加
  • 聊天设置
    • 单聊设置,创建群聊
    • 群聊设置,群解散/群退出、群资料展示与修改、群成员添加/移除、群权限设置等
  • 您可在云信控制台访问应用->功能管理->功能配置->消息撤回配置中设置消息撤回的时限。设置的时限最小为 120 秒。
  • 如需实现消息删除功能,请先通过云信官网首页提供的联系方式咨询商务经理开通该功能。

相关信息

如果默认界面无法满足您的业务需求,您可参考自定义会话界面 UI 进行自定义。

此文档是否对你有帮助?
有帮助
我要吐槽
  • 界面效果
  • 界面集成
  • 相关信息