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 包形式提供。

  1. 请前往 nim-web-sdk-ng 下载 npm 包。

  2. 执行如下命名进行安装。

    > 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: 初始化并登录

  1. 创建聊天室实例(当前版本仅支持通过new创建)并进行初始化,初始化参数见ChatroomInitializeOptions

  2. 注册聊天室相关事件回调,监听聊天室连接状态及其他事件。具体事件和示例见ChatroomEventInterface

  3. 调用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

相关文档

聊天室消息收发相关说明,请参见聊天室消息管理

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 实现流程
  • 步骤1: 安装 npm 包
  • 步骤2:引入聊天室 SDK
  • 步骤3: 初始化并登录
  • 步骤4:退出登录或销毁实例
  • 退出登录
  • 销毁实例
  • 后续步骤
  • 相关文档