Web / H5 快速接入 | 泡泡 IM 开发文档

Web SDK 是一套可以直接放进网站的聊天界面，包含消息列表、通讯录和聊天窗口。普通网页、Vue、React 等项目都可以使用，电脑和手机会自动适配。
按下面步骤完成配置、放入页面并登录，就能使用 SDK 自带的聊天功能。 需要从自己的业务按钮打开聊天、展示未读角标等，再看进阶控制。
先完成认证与登录，并用后端示例准备好你自己的 POST /api/im-auth。本文的“宿主”就是你自己的网站或 App；Token 是当前用户进入聊天的临时凭证，authProvider 是你提供的“获取凭证”函数。示例中的 https://im.example.com 是 Popo IM 服务地址，请换成实际部署地址。
后端同事负责准备取凭证接口；客户端同事按下面步骤接入。/api/im-auth 是示例接口名，需要由你的后端实现，不能直接当成 Popo IM 自带接口。已有 Web 页面需要生成 Windows 或 macOS 软件时，查看打包桌面客户端。
构建使用 Node.js 22.12 或更新版本。配套 Web 宿主内的 sdk/ 包含 SDK 源码及构建所需的共享模块：
构建生成 sdk/dist/im-kit.iife.js、im-kit.es.js 和类型声明。普通网页可将 IIFE 脚本放入自己的静态目录；ESM 接入需要保留整个 dist/，包括按需加载的分块。
把构建生成的 im-kit.iife.js 放到网站的 /kit/ 目录，再在需要显示聊天的页面加入下面代码。createIM() 创建 SDK；authProvider 只负责向你的后端拿当前用户的凭证，SDK 会在登录及续期时调用它。
serverUrl 是部署根地址，SDK 自行追加 /app/sdk/*，不要填成某一个业务接口。生产环境推荐将宿主认证、SDK HTTP、WebSocket 和媒体代理到同源 HTTPS 地址；跨域部署还需由服务端配置正确的来源与资源访问策略。
mount() 把聊天界面显示到 #chat 容器中；login() 获取当前用户的凭证并加载聊天数据。这段代码在你的用户登录成功、页面容器已显示后执行，放在 async 函数中并在调用处捕获错误。容器必须已插入页面且具有明确高度。SDK 自动在桌面多栏工作台与手机全屏导航之间适配；消息和联系人入口已包含在工作台中，无需另建两个根实例。
logout() 会清理当前账号的聊天缓存；destroy() 用于离开整个聊天组件，会保留可恢复缓存。销毁后再次使用，需要重新创建实例。网络失败时保留已有界面，通过产品的通用 Toast 提示用户重试。
先用陈悦和林舟两个账号验证文字、竖屏图片及视频消息，再检查窄屏返回、未读清除、断网恢复和切换账号；使用浮层时再检查收起与重开。语音与通话需要允许及拒绝设备权限各验证一次。
聊天已经能正常使用，就可以在这里结束。只有需要把聊天与自己的业务功能联动时，再查看 Web / H5 进阶控制：按场景找到方法，了解用途后再看参数，不必从头读完整页。