Web IMKit 快速开始

本页在 5 个步骤内完成 Web 端 IMKit 接入：先接入 IMLib，再初始化门面，最后挂载会话列表与会话页。IMKit 只消费 IMLib 的公开数据，不重复实现通信能力。

  1. 接入 IMLib

    按 IMLib 快速开始 完成初始化与连接；IMKit 不重复建立连接。

  2. 导入 IMKit

    按「导入 SDK」安装依赖；IMKit 只依赖 IMLib 公开接口。

  3. 初始化门面

    初始化 IMLib 客户端并连接，然后创建 IMKit 门面（或调用静态 init）；门面持有主题、语言与组件实例。

  4. 挂载会话列表

    传入 conversations 与交互回调；会话数据来自 IMLib 的 getConversationList 与 CONVERSATION 事件。

  5. 挂载会话页与输入区

    传入 messages / currentUserId / hasMore；发送与已读回调转调 IMLib 对应接口。

1. 接入 IMLib​

IMKit 的所有数据都来自 IMLib 公开接口：连接、会话列表、历史消息、发送、已读回执与未读清零。先完成 IMLib 接入再使用 IMKit。

2. 导入 IMKit​

npm
npm install @ni-paas/im-web
# IMKit 入口：@ni-paas/im-web/imkit

3. 初始化门面​

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',
});

门面：IMKit；门面为单例 IMKit：mount(container, component, props) 返回 { update, destroy, on }；同一容器重复 mount 复用实例。

4. 挂载会话列表​

JavaScript (ESM)
import { IMKit } from '@ni-paas/im-web/imkit';

const list = IMKit.mount(document.getElementById('app'), 'ConversationListView', {
  conversations,
  activeTargetId: 'user2',
  options: { showPinned: true, showUnread: true, showDraft: true, showMention: true },
  onSelect: (conversation) => openChat(conversation),
});
// 复用同一容器实例（幂等），数据变化时 update
list.update({ conversations: await client.getConversationList() });

5. 挂载会话页与输入区​

JavaScript (ESM)
IMKit.mount(document.getElementById('chat'), 'ChatView', {
  conversationType: 1,
  targetId: 'user2',
  messages,
  currentUserId: 'alice',
  hasMore: true,
  showReadCount: true,
  onLoadMore: () => loadMore(),
  onSendText: (text, extras) => client.sendTextMessage(1, 'user2', text),
  onTyping: (typing) => client.sendTypingStatus(1, 'user2', typing),
});

下一步​