实现聊天室登录（不含 UI） - IM 即时通讯(Web 含圈组)

开发者中心

IM 即时通讯(Web 含圈组)

集成开发

实现聊天室登录（不含 UI）

更新时间： 2024/03/14 19:21:10

您可参考如下操作流程快速登录聊天室。进行聊天室开发前，必须先实现聊天室 SDK 与服务端聊天室地址的连接（即初始化和登录聊天室）。登录后，您可按需登出或者销毁聊天室实例。

前提条件

已在云信控制台创建应用，获取 App Key。
已注册云信 IM 账号，获取 accid 和 token。
已通过 IM 服务端 API 创建聊天室，并记录返回的 roomid（即聊天室 ID）。详情请参见创建聊天室。
已通过 IM 服务端 API 获取聊天室地址，请求时传入创建聊天室时获取的roomid（即聊天室 ID）。详情请参见获取聊天室地址。

请保存获取到的聊天室 ID 和聊天室地址，初始化 SDK 时需要传入。

实现流程

步骤1: 安装 npm 包

聊天室功能基于 Web IM SDK，Web IM SDK 以 npm 包形式提供。

请前往 nim-web-sdk-ng 下载 npm 包。
执行如下命名进行安装。
```
> npm install nim-web-sdk-ng@latest

> npm ls nim-web-sdk-ng
└── nim-web-sdk-ng@0.4.0 
```
- 请安装 0.4.0 及以上版本的 npm 包。
- npm 包目前只支持浏览器环境使用。

步骤2：引入聊天室 SDK

执行如下命令将聊天室 SDK 引入至您的 Web 应用项目。

jsimport ChatroomSDK from 'nim-web-sdk-ng/dist/CHATROOM_BROWSER_SDK'

步骤3：初始化并登录

创建聊天室实例（当前版本仅支持通过new创建）并进行初始化，初始化参数见ChatroomInitializeOptions。
注册聊天室相关事件回调，监听聊天室连接状态及其他事件。具体事件和示例见ChatroomEventInterface
调用connect方法与聊天室建立连接并登录聊天室。

登录成功则触发 logined 事件回调。

进入聊天室时必须建立新的连接，退出聊天室或者被踢会断开连接。
支持建立多个连接，同时进入多个聊天室。
当发生掉线时，聊天室 SDK 会自动进行重连。需要监听聊天室连接状态来做出正确的界面表现。

示例代码：

// 当前版本仅支持通过 new 创建实例
const chatroom = new ChatroomSDK({
  // ...初始化配置信息
  "appkey": "YOUR_APPKEY", // 传入在云信控制台获取的 App Key
  "token": "YOUR_TOKEN", // 传入 token
  "account": "YOUR_ACCOUNT" // 传入云信 IM 账号（accid）
  "isAnonymous": false, // 设置为非匿名模式登录
  "chatroomId": "YOUR_CHATROOM_ID", // 传入聊天室 ID
  "chatroomAddresses": [ 
    "YOUR_CHATROOM_ADDR"
  ] // 传入聊天室地址，如传入多个聊天室地址，登录后同时进入这些聊天室 
});
const eventList = [
  // about login
  'logined', 'willReconnect', 'disconnect', 'kicked',
  
  // multi client login notification
  'multiPortLogin', ,
  
  // receive chatroom message
  'chatroomMsg'

  // about tag
  'tagsUpdate'

]
eventList.forEach((key: any) => {
  chatroom.on(key, (res: any) => {
    console.log(`receive ${key} event：`, res);
  });
})

await chatroom.connect()

以上提供了非匿名模式初始化并登录聊天室的示例。更多说明请参见初始化并登录聊天室。

步骤4：退出登录或销毁实例

退出登录

登录聊天室后，可调用 disconnect 方法退出登录（即断开 SDK 与聊天室服务器的连接）。

jsawait chatroom.disconnect()

断开聊天室连接后，可以再次调用connect方法建立连接。

销毁实例

登录聊天室后，可调用 destroy 方法销毁聊天室实例。

jsawait chatroom.destroy()

销毁后，无法再通过connect方法重新登录，需要重新创建聊天室实例。

后续步骤

为保障通信安全，如果您在调试环境中的使用的是云信控制台生成的测试用 IM 账号和 token，请确保在后续的正式生产环境中，将其替换为通过 IM 服务端 API 生成的正式 IM 账号（accid）和 token。