快速实现聊天室登录
更新时间: 2024/10/17 10:03:47
您可参考如下操作流程快速登录聊天室。进行聊天室开发前,必须先实现聊天室 SDK 与服务端聊天室地址的连接(即初始化和登录聊天室)。登录后,您可按需登出或者销毁聊天室实例。
前提条件
已通过 IM 服务端的 HTTPS API 创建聊天室,并记录返回的 roomid
(即聊天室 ID)。详情请参见创建聊天室。
目前不支持通过 SDK 下的方法建立和解散聊天室。
操作流程
步骤1:获取 App Key
如果您尚未创建获取 App Key 和开通 IM 即时通讯服务,在开始聊天室 SDK 集成前,请先完成如下步骤。
- 在网易云信控制台创建应用。详情请参见创建应用。
- 获取 App key。详情请参见获取 App key 。
步骤2:获取 Token
登录 IM SDK 时,需要传入 Token。获取 Token 的具体方法请参见登录鉴权。
步骤3: 安装 npm 包
聊天室功能基于 Web IM SDK,Web IM SDK 以 npm 包形式提供。
- 请前往 nim-web-sdk-ng 下载 npm 包。
- 执行如下命名进行安装。
> 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
。示例代码如下:
js
import 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 方法重新登录,需要重新建立实例对象。