IM 即时通讯(增强版)
Web
新手接入指南
产品介绍
简介
产品优势
主要功能
功能介绍
账号集成与登录
基础消息功能
群组功能
聊天室功能
圈组功能
多端登录与互踢策略
海外数据中心
IM 平滑迁移方案
接口及业务限制
更新日志
IM UIKit 更新日志
NIM SDK 更新日志
体验 Demo
下载 SDK 与 Demo 源码
快速开始
跑通 IM Demo 源码
实现单聊消息收发(不含 UI)
实现圈组消息收发(不含 UI)
含 UI 集成
什么是 IM UIKit
IM UIKit 功能列表
快速集成 IM UIKit
非React框架集成 IM UIKit
组件导入
初始化
全局上下文
登录相关
实现消息收发及界面自定义
集成会话列表界面
集成会话消息界面
集成用户资料组件
集成通讯录界面
集成搜索组件
非 React 框架自定义示渲染
主题样式设置
语言设置
初始化(兼容 NIM SDK)
不含 UI 集成
SDK 集成概述
小程序环境集成声明
初始化与登录
消息收发
历史消息
消息扩展
最近会话
用户资料托管
好友关系托管
在线状态订阅
系统通知
群组功能
群组概述
群组管理
群成员管理
群消息管理
超大群功能
超大群概述
超大群管理
超大群成员管理
超大群消息管理
反垃圾
聊天室功能
聊天室概述
聊天室标签功能
快速实现聊天室登录
聊天室消息管理
聊天室成员管理
聊天室信息管理
聊天室队列服务
圈组功能
圈组概述
初始化与登录
通用接口校验说明
服务器相关
服务器概述
服务器管理
服务器成员管理
游客功能
服务器未读数管理
频道相关
频道概述
频道管理
频道黑白名单
频道分组
频道分组黑白名单
频道未读数管理
实时互动频道
搜索服务器与频道
身份组相关
身份组概述
身份组应用场景
服务器身份组
频道身份组
频道用户定制权限
频道分组身份组
自定义权限项
成员权限查询与判定
身份组相关查询
圈组订阅机制
圈组消息相关
圈组消息收发
圈组消息撤回
圈组消息更新
圈组消息删除
消息正在输入
获取频道最后一条消息
会话消息回复(Thread)
圈组快捷评论
圈组消息搜索
查询历史消息
查询@我的消息
圈组系统通知相关
圈组系统通知概述
圈组系统通知收发
圈组系统通知更新
圈组内容审核
圈组第三方回调
圈组相关抄送
圈组各端接口命名差异
融合存储方案
uniapp 推送相关
最佳实践
聊天室重要消息投递
API 参考
NIM SDK API 参考
状态码
IM 控制台指南
创建应用
注册 IM 账号
升级服务
服务协议

实现圈组消息收发(不含 UI)

更新时间: 2023/03/14 11:41:13

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

前提条件

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

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

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

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

    1. 在左侧导航栏中单击指定应用名称,进入该应用的详情页面。
    2. 在“功能管理”中单击“账号管理”。
    账号管理
    3. 在测试页面,单击“新建账号”,并填写账号(即accid)、昵称(即 name)、密码(即 Token)后,单击“确定”。
    确定
    开通“圈组功能”在云信控制台选择应用,进入IM 免费版/专业版 > 功能权限开通 > 拓展配置 > 圈组即可配置。
  • 已通过调用服务端 API 获取圈组服务端连接地址

实现流程

流程概览

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

下图可能因为网络问题无法正常展示。如遇到该问题,一般刷新页面即可正常展示。

uml diagram

步骤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:登录圈组

  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,且将viewModeType分别设置为0message,从而在圈组服务器中创建一个消息类型的公开频道。

    示例代码如下:

    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

相关文档

此文档是否对你有帮助?
有帮助
我要吐槽
  • 前提条件
  • 实现流程
  • 流程概览
  • 步骤1: 集成 SDK
  • 步骤2:初始化 SDK
  • 步骤3:登录圈组
  • 步骤4:实现圈组消息收发
  • 后续步骤
  • 相关文档