快速实现聊天室登录

更新时间: 2024/03/15 14:03:59

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

前提条件

已通过 IM 服务端的 HTTPS API 创建聊天室,并记录返回的 roomid(即聊天室 ID)。详情请参见创建聊天室

目前不支持通过 SDK 下的方法建立和解散聊天室。

操作流程

uml diagram

步骤1:获取 App Key

如果您尚未创建获取 App Key 和开通 IM 即时通讯服务,在开始聊天室 SDK 集成前,请先完成如下步骤。

  1. 网易云信控制台创建应用。详情请参见创建应用
  2. 获取 App key。详情请参见获取 App key

步骤2:获取 Token

登录 IM SDK 时,需要传入 Token。获取 Token 的具体方法请参见登录鉴权

步骤3: 安装 npm 包

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

  1. 请前往 nim-web-sdk-ng 下载 npm 包。
  2. 执行如下命名进行安装。
> npm install nim-web-sdk-ng@"<1"

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

步骤4:引入聊天室 SDK

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

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

步骤5 获取聊天室地址

可通过如下两种方式获取聊天室地址。

  • (推荐)通过 IM 服务端的 HTTPS 请求获取聊天室地址,请求时传入创建聊天室时获取的roomid(即聊天室 ID)。详情请参见请求聊天室地址

  • 实例连接里获取 nim.plugin.getChatroomAddress

    示例代码如下:

    jsimport NIMSDK from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK'
    import ChatroomSDK from 'nim-web-sdk-ng/dist/CHATROOM_BROWSER_SDK'
    
    const nim = new NIMSDK({
      //.....
    })
    const chatroomAddresses = await nim.plugin.getChatroomAddress({ chatroomId: "TARGET_CHATROOM_ID" })
    

    上述示例代码中chatroomId需要传入的值即本文前提条件中提到的 roomid 的值。

步骤6:初始化及登录

初始化聊天室 SDK 并选择如下任意一种模式登录聊天室。初始化时需配置初始化参数事件监听。登录成功则触发 logined 事件回调。

登录模式
说明
常规登录 以固定成员身份登录聊天室。通过初始化聊天室实例时将入参isAnonymous设为false实现。
匿名登录 以游客身份登录聊天室。通过初始化聊天室实例时将入参isAnonymous设为true实现。必须填写用户昵称(非匿名方式为选填),建议填写头像。第一次使用匿名方式登录聊天室时(新建实例),无需填写account参数,但需要在登录以后从聊天室实例中获取 SDK 生成的该参数。
  • 进入聊天室时必须建立新的连接,退出聊天室或者被踢会断开连接;在聊天室中掉线会有自动重连,您需要监听聊天室连接状态来做出正确的界面表现。
  • 支持建立多个连接,同时进入多个聊天室。
  • 当发生掉线时,聊天室 SDK 会自动进行重连。
  • 初始化并以常规模式登录的示例代码如下:

    const chatroom = new ChatroomSDK({
      "appkey": "YOUR_APPKEY",
      "token": "YOUR_TOKEN",
      "account": "YOUR_ACCOUNT"
      "isAnonymous": false,
      "chatroomId": "YOUR_CHATROOM_ID",
      "chatroomAddresses": [
        "YOUR_CHATROOM_ADDR"
      ]
    });
    const eventList = [
      // about login
      'logined', 'willReconnect', 'disconnect', 'kicked',
      
      // multi client login notification
      'multiPortLogin', ,
      
      // receive chatroom message
      'chatroomMsg'
    
    ]
    eventList.forEach((key: any) => {
      chatroom.on(key, (res: any) => {
        console.log(`receive ${key} event:`, res);
      });
    })
    
    await chatroom.connect()
    
  • 初始化并以匿名模式登录的示例代码如下:

    const sdk = new ChatroomSDK({
      "appkey": "YOUR_APPKEY",
      "token": "YOUR_TOKEN",
      "account": "YOUR_ACCOUNT"
      "isAnonymous": true,
      "chatroomId": "YOUR_CHATROOM_ID",
      "chatroomAddresses": [
        "YOUR_CHATROOM_ADDR"
      ],
      chatroomNick: 'YOUR_NICK',
      chatroomAvatar: 'YOUR_AVATAR',
    });
    
    // ...
    

退出登录或销毁实例

退出登录

登录聊天室后,可调用 disconnect 方法退出登录(即断开 SDK 与聊天室服务器的连接)。 示例代码如下:

jsawait chatroom.disconnect()

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

销毁实例

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

示例代码如下:

jsawait chatroom.destroy()

销毁后,无法再通过 connect 方法重新登录,需要重新建立实例对象。

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 操作流程
  • 步骤1:获取 App Key
  • 步骤2:获取 Token
  • 步骤3: 安装 npm 包
  • 步骤4:引入聊天室 SDK
  • 步骤5 获取聊天室地址
  • 步骤6:初始化及登录
  • 退出登录或销毁实例
  • 退出登录
  • 销毁实例