快速上手
Global IM UIKit 基于 IMLib SDK 开发,在 IMLib SDK 基础上提供会话和消息相关的 UI 界面,可用于快速实现 Web 聊天界面的搭建。Global IM UIKit 提供了易于使用的构建组件和 UI 交互。
本教程介绍了快速集成 Global IM UIKit 的基本流程和 Global IM UIKit 提供的 UI 界面。
浏览器兼容说明
Chrome | Safari | Edge | 微信 浏览器 |
---|---|---|---|
68 + | 13 + | 100 + | × |
当前仅支持 Chrome、Safari、Edge 浏览器,暂未对移动端等竖屏 H5 浏览器进行 UI 兼容。
前置条件
-
注册开发者账号。注册成功后,控制台会默认自动创建您的首个应用,默认生成开发环境下的 App Key,使用国内数据中心。
-
获取开发环境的应用 App Key。如不使用默认应用,请参考 如何创建应用,并获取对应环境 App Key 和 App Secret。
提示每个应用具有两个不同的 App Key,分别对应开发环境与生产环境,两个环境之间数据隔离。在您的应用正式上线前,可切换到使用生 产环境的 App Key,以便上线前进行测试和最终发布。
Demo 项目
融云提供了一个 Web 端 Demo 项目,集中演示了 Global IM UIKit 的功能。
https://github.com/rongcloud/web-global-im-uikit-quickdemo
- Global IM UIKit 暂未适配 H5 移动端竖屏设备。
- 目前仅支持单聊、群聊、系统会话类型,暂不支持聊天室和超级群会话。
- 不支持 IMLib v4 Adapter,且不支持 IMLib v2 Adapter。
安装依赖
安装 Global IM UIKit 需要同时集成即时通讯能力库 IMLib SDK。
NPM
推 荐您通过包管理器安装 Global IM UIKit SDK,以获取更好的 IDE 语法提示支持及开发体验。
# 安装 IMLib
npm install @rongcloud/engine @rongcloud/imlib-next --save
# 安装 IMKit
npm install @rongcloud/global-im-uikit --save
@rongcloud/engine | |
@rongcloud/imlib-next@latest | |
@rongcloud/global-im-uikit |
CDN 文件
如果您不想通过包管理器安装 Global IM UIKit SDK,也可以通过 CDN 的方式引入,但是这种方式不支持 IDE 语法提示。
<!-- 引入 IMLib -->
<script src="https://cdn.ronghub.com/RongIMLib-5.9.5.prod.js"></script>
<!-- 引入 Global IM UIKit -->
<script src="https://cdn.ronghub.com/RCIMKit-1.0.0.prod.js"></script>
Vue 工程特殊配置
由于 Global IM UIKit 中使用 Web Components 定义自定义 UI 组件,而 Vue 会将任何非原生的 HTML 标签优先当作 Vue 组件处理,因此,当您使用 Vite、Vuc-cli 等构建工具时,需要对 Vue 项目进行配置,以便于编译识别。
SDK 中所有内部标准组件均以 rc-
开头。
vite
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('rc-'),
}
}
})
]
}
vue-cli
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => ({
...options,
compilerOptions: {
isCustomElement: tag => tag.startsWith('rc-')
}
}))
}
}