本文已不再维护和更新，请前往实现圈组消息收发查看圈组接入说明。

准备工作

在开始接入圈组前，建议您先了解圈组的主要概念、身份组系统和主要功能等。 详情请参见什么是圈组、身份组系统和圈组主要功能。

步骤一：创建应用并开通服务、获取 App Key

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

1. 在网易云信控制台创建应用。详情请参见创建应用。
2. 获取 App key。详情请参见获取 App key 。
3. 开通 IM 即时通讯服务。详情请参考开通服务。

步骤二：获取 Token

登录圈组 SDK 时，需要传入 Token。获取 Token 的具体方法请参见账号集成与登录。

步骤三：安装 npm 包

圈组功能基于 Web IM Elite 版本，并且以 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 包目前只支持浏览器环境使用。

步骤四：初始化及登录

子步骤

1. 将圈组 SDK 引入到您的 Web 应用项目。

   import QChatSDK from 'nim-web-sdk-ng/dist/QCHAT_BROWSER_SDK'
   

2. 初始化圈组 SDK。在如下代码中填入您的App Key、Token、账号、Socket 连接地址和 debugLevel。具体参数说明请参见 圈组实例初始化参数。

   const qchat = new QChatSDK({
     appkey: '{{YOUR_APP_KEY}}',
     token: '{{YOUR_TOKEN}}',
     account: '{{YOUR_ACCOUNT}}',
     linkAddresses: ['{{YOUR_ADDRESSES}}'],
     debugLevel: 'debug'
   })
   

3. 为实例设置监听事件。

   qchat.on('logined', function (loginResult) { console.log(`login done!! ${loginResult}`) })
   

4. 登录实例。

   await qchat.login()
   

初始化及登录相关重要参数说明，请参见初始化参数介绍。

完整示例代码

初始化及登录的完整示例代码如下：

import QChatSDK from 'nim-web-sdk-ng/dist/QCHAT_BROWSER_SDK'

// 1 初始化
const qchat = new QChatSDK({
  appkey: '{{YOUR_APP_KEY}}',
  token: '{{YOUR_TOKEN}}',
  account: '{{YOUR_ACCOUNT}}',
  linkAddresses: ['{{YOUR_ADDRESSES}}'],
  debugLevel: 'debug'
})

// 2 初始化-实例设置监听事件
qchat.on('logined', function (loginResult) { console.log(`login done!! ${loginResult}`) })

// 3 实例登录
await qchat.login()

// 4 使用实例具体方法
await qchat.qchatMsg.sendMessage({
  serverId: '{{YOUR_SERVERID}}',
  channelId: '{{YOUR_CHANNELID}}',
  type: 'text',
  body: 'ddd',
})

后续功能开发

完成圈组登录后，请参见如下文档完成圈组服务器、频道、消息接收等圈组功能的开发：

• 圈组服务器管理
• 圈组服务器成员管理
• 频道管理
• 圈组消息收发
• 系统通知
• 身份组管理
• 服务端API参考
• 客户端API参考