Web 与 H5 接入

Web SDK 将无界面的 TypeScript 通信逻辑与浏览器网络、存储适配分开。需要默认界面时使用 Vue 3 IM UIKit，通话通过独立 Web Call 组件接入。

组件与交付

密信 IM 开发版 5.0 的 Web / H5 组件通过授权包交付，按配套清单安装以下模块：

组件	用途
`@mixinim/web-sdk`	无界面 IM 与浏览器适配
`@mixinim/web-uikit`	Vue 3 会话、聊天、通讯录和群界面
`@mixinim/web-call-sdk`	通话状态与媒体接入
`@mixinim/web-call-uikit`	默认通话展示

按授权包方式安装 ESM 与类型声明。宿主账号控制器先执行 const im = createWebImClient(config) 并保留实例，再调用下面的连接函数。config、session 和展示回调由宿主提供：

import { createWebImClient } from '@mixinim/web-sdk'
import type { ImSession } from '@mixinim/web-sdk'

export async function connectIm(
  im: ReturnType<typeof createWebImClient>,
  session: ImSession,
) {
  await im.connect(session)
}

配置包含客户 REST/WebSocket 地址、storageNamespace 与续签回调。浏览器只接收短效 IM Session；业务后端持有签名密钥。连接失败时，宿主仍持有 im，可按错误类型处理；确定放弃该实例或退出账号时执行 await im.dispose()，不要直接丢弃引用并新建实例。

订阅消息与释放

const stopMessages = im.on('messageChanged', renderMessage)
const stopIncoming = im.on('incomingMessage', handleIncoming)

// 当前账号结束时，由宿主执行：
stopMessages()
stopIncoming()
await im.dispose()

renderMessage 和 handleIncoming 是宿主回调。messageChanged 包括发送状态、历史与同步变化；incomingMessage 表示实时 Socket 普通消息，不应拿历史事件触发新消息提示音。宿主仍需考虑本人消息、免打扰和通知设置。

接入界面

Vue 3 UIKit 提供 ImChat、ImConversationList、ImMessageList、ImChatComposer、ImContacts 和 ImGroupPanel。按包说明导入 @mixinim/web-uikit/style.css，并注入已登录的同一 SDK。

会话选择、资料导航、业务功能及 Call 入口由宿主协调。Electron 也复用此 UIKit，浏览器代码不承担桌面主进程鉴权职责。

存储与多标签页

消息等状态存入按服务地址、命名空间和账号隔离的 IndexedDB。相同存储空间默认单写入者；新标签页接管时应先让旧页面释放实例。明确需要强制接管的应用可使用已提供的 takeOverExistingWriter 选项，并处理旧页面的 stale_writer 状态，不把它当作双写模式。

媒体缓存与消息存储分开。账号注销或主动清理时按应用策略调用媒体清理接口，不以删除全部浏览器数据替代正常账号切换。

目标域名联调

正式域名配置 HTTPS/WSS、REST CORS、WebSocket Origin、对象存储跨域和媒体安全上下文。上线前检查消息收发、附件访问及相机/麦克风权限。

Web 与 H5 的独立演示入口见体验中心。SDK 组件与接入资料通过授权交付。

下一步：首条消息 · 附件 · Call 接入

Web 与 H5 接入 ​

组件与交付 ​

订阅消息与释放 ​

接入界面 ​