圈组是网易云信 IM 即时通讯服务的全新能力，可用来帮助您快速构建“类Discord即时通讯社群”。本文介绍如何通过较少的代码集成 NetEase IM SDK（NIM SDK）并调用 API，在您的应用中实现圈组消息收发。

前提条件

• 已了解圈组的基础概念和能力。

• 已登录云信控制台完成以下操作。

  创建应用并获取 App Key 和 App Secret

  1. 在左侧导航栏中找到“应用”，并单击“创建”。
  
  2. 填写应用的基本信息后，单击“创建”。
  
  3. 创建应用后，可以在左侧导航栏中查看该应用，并单击 “App Key 管理”，并获取 App Key 和 App Secret。
  
  注册云信 IM 账号，获取 accid 和 token

  注册云信 IM 账号，获取 accid 和 token。accid 和 token 将用于登录云信服务端。

  1. 在左侧导航栏中单击指定应用名称，进入该应用的详情页面。
  2. 在“功能管理”中单击“账号管理”。
  
  3. 在测试页面，单击“新建账号”，并填写账号（即accid）、昵称（即 name）、密码（即 Token）后，单击“确定”。
  
  开通“圈组功能”

  在云信控制台选择应用，进入IM 免费版/专业版 > 功能权限开通 > 拓展配置 > 圈组即可配置。
  

• 已通过调用服务端 API 获取圈组服务端连接地址。

实现流程

流程概览

实现圈组消息收发的流程，可分为下图所示的 4 大步骤。

步骤1: 集成 SDK

圈组功能基于 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 包目前只支持浏览器环境使用。

3. 执行如下命令，将圈组 SDK （QChat SDK）导入到您的 Web 应用项目。

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

步骤2：初始化 SDK

创建并初始化 SDK 实例。示例代码如下：

具体初始化参数说明请参见初始化重要参数。

const qchat = new QChatSDK({
    appkey: '{{YOUR_APP_KEY}}', // 传入您的App Key
    token: '{{YOUR_TOKEN}}', // 传入您的Token
    account: '{{YOUR_ACCOUNT}}', // 传入您的accid
    linkAddresses: ['{{YOUR_ADDRESSES}}'], // 传入圈组服务端连接地址
    debugLevel: 'debug' // 设置日志级别
})

步骤3：登录圈组

```
const linkAddresses = await nim.plugin.getQChatAddress({})
```

1. 设置监听事件。

   • 发送方和接收方为 SDK 实例设置登录成功监听事件。示例代码如下：

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

   • 接收方为 SDK 实例设置消息接收监听事件。示例代码如下：

   qchat.on('message', function (msg) {console.log('receive a message', msg)})
   

2. 调用login方法与圈组服务端建立连接并登录。

   示例代码如下：

   await qchat.login()
   

步骤4：实现圈组消息收发

本节以发送方与接收方的消息交互为例，介绍在不考虑用户权限控制的情况下，使用 SDK API 快速实现圈组文本消息收发的流程。

1. 发送方调用createServer方法创建圈组服务器。为更加快速实现消息收发，创建时可将InviteMode设置为1（发送邀请后，不需要被邀请方同意，被邀请方立即加入服务器）。

   示例代码如下：

   const qchat = new QChat(options);
   qchat.qchatServer.createServer({
       "name": "Jason的健身天地", // 传入服务器名称
       ...
   })
   

   创建成功后，需记录服务器的 ID（serverId），后续步骤将需要传入serverId。

2. 发送方调用createChannel方法，调用时传入上一步中创建的圈组服务器的serverId，且将viewMode和Type分别设置为0和message，从而在圈组服务器中创建一个消息类型的公开频道。

   示例代码如下：

   const qchat = new QChat(options);
   qchat.qchatChannel.createChannel({
   "serverId": "12345",
   "name": "1"
   })
   
   

   创建成功后，需记录频道的 ID（channelId），后续步骤将需要传入channelId。

3. 发送方调用inviteServerMembers方法，邀请接收方加入服务器。

   示例代码如下：

   const qchat = new QChat(options);
   await qchat.qchatServer.inviteServerMembers({
       "serverId": '123456',
       "accids":["123"]
   })
   

4. 发送方调用sendMessage方法，调用时传入服务器与公开频道的ID，从而在公开频道中发送一条消息。

   示例代码如下：

   // text and @everyone message
   const msg = await qchat.qchatMsg.sendMessage({
   "serverId": "{{YOUR_SERVERID}}",
   "channelId": "{{YOUR_CHANNELID}}",
   "type": "text",
   "body": "This is a test message",
   "mentionAll": true
   })
   
   console.log(msg.msgIdServer)
   
   // text and @somebody message
   const msg1 = await qchat.qchatMsg.sendMessage({
   "serverId": "{{YOUR_SERVERID}}",
   "channelId": "{{YOUR_CHANNELID}}",
   "type": "text",
   "body": "This is a test message",
   "mentionAccids": ["accountId1", "accountId2"]
   })
   
   

5. SDK 触发消息接收（message）事件回调，接收方通过该回调接收消息体（QChatMessage）。

后续步骤

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

相关文档

• 初始化与登录
• 服务器概述
• 频道概述
• 搜索服务器与频道
• 身份组概述
• 圈组订阅机制
• 圈组消息收发
• 圈组系统通知管理
• 圈组内容审核
• 圈组第三方回调
• 圈组相关抄送