Web IMKit 初始化
IMKit 不单独建立连接:先初始化 IMLib 客户端并 connect,再初始化 IMKit 门面。门面持有主题、语言、自定义渲染器与组件实例。
初始化顺序
| 步骤 | 动作 | 说明 |
|---|---|---|
| 1 | IMLib 初始化 | init(options):appkey / serverUrl(幂等) |
| 2 | IMLib 连接 | connect(token):成功后触发 CONNECTED |
| 3 | IMKit 门面初始化 | 静态 init 或构造门面:注入客户端、主题、locale、renderers |
| 4 | 挂载组件 | mount(container, component, props) / Widget / Fragment |
门面与挂载 API
| 项 | 值 |
|---|---|
| 门面 | IMKit |
| 挂载 | IMKit.mount(container, component, props) |
| 导出组件 | IMKit、ConversationListView、ChatView、MessageBubble、MessageInput、Avatar、UnreadBadge、TimeSeparator、MessageStatusIndicator、Theme、IMLocalStore |
| UI 框架 | 纯 DOM 组件(无框架依赖),CSS 变量主题,IMKit.mount(container, component, props) |
初始化示例
JavaScript (ESM)
import { IMKit } from '@ni-paas/im-web/imkit';
IMKit.setup({
container: document.getElementById('app'),
appkey: 'YOUR_APP_KEY',
serverUrl: 'https://im.example.com',
locale: 'zh-CN',
});幂等与生命周期
- 门面挂载幂等:同一容器重复 mount 复用实例(Web / Electron / Harmony 绑定显式声明);Android
init重复调用复用同一 appkey 的 IMLib 客户端。 - 组件销毁时释放监听与定时器(输入区 typing 定时器、事件监听),避免内存泄漏与重复回调。
- 主题可在初始化后动态更新:调用门面 setup/update 或重新挂载;不需要重建 IMLib 客户端。
destroy()只销毁组件实例,不断开 IMLib 连接;IMLib 的 disconnect 由宿主控制。