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 账号
升级服务
服务协议

圈组消息收发

更新时间: 2023/03/14 17:07:40

QChat SDK 的QChatMsgServiceInterface接口提供圈组消息收发的方法,支持支持文本、图片、语音、视频、文件、地理位置等消息类型。定义圈组消息的结构为QChatMessage

功能介绍

消息类型
API关键字
说明
文本消息 text 消息内容为普通文本
图片消息 image 消息内容为图片 URL 地址、尺寸、图片大小等信息
语音消息 audio 消息内容为语音文件的 URL 地址、时长、大小、格式等信息
视频消息 video 消息内容为视频文件的 URL 地址、时长、大小、格式等信息
文件消息 file 消息内容为文件的 URL 地址、大小、格式等信息
位置消息 location 消息内容为地理位置标题、经度、纬度信息
提示消息 tip 又叫做 Tip 消息,没有推送和通知栏提醒,主要用于会话内的通知提醒,例如进入会话时出现的欢迎消息,或是会话过程中命中敏感词后的提示消息等场景
通知消息 notification 主要用于圈组的事件通知
自定义消息 custom 开发者自定义的消息类型,例如红包消息、石头剪子布等形式的消息

技术原理

下图展示了集成并初始化 NIM SDK 后,实现圈组消息收发的基本工作流。图中的 QChat 即为 NIM SDK 的圈组组件,云信服务端包含 IM 服务端和圈组服务端。

Web&PC圈组消息收发_消息收发.png

  • 上图仅以静态 Token 登录为例展示消息收发流程。网易云信 IM 还支持动态 Token 登录鉴权和第三方回调登录鉴权,相关详情请参见登录鉴权
  • 圈组服务端圈组服务器是两个不同概念,前者指云信服务器内提供圈组功能的服务端,后者为圈组的特殊概念,对应 Discord 的 Server, 为社群本身。

上图中的流程可归纳为如下 5 步:

  1. 账号集成与登录。
    1. 开发者将应用的用户账号传入云信 IM 服务端,注册云信 IM 账号。
    2. 云信 IM 服务端返回 Token 给应用服务端。
    3. 应用客户端登录应用服务端。
    4. 应用服务端将 Token 返回给应用客户端。
    5. 用户A 和用户B 带 Token 登录云信 IM 服务端。
  2. 用户A 创建圈组服务器,并在服务器内创建频道。
  3. 用户B 加入圈组服务器。
  4. 用户A 在频道发送一条消息到云信圈组服务端。
  5. 云信圈组服务端投递消息至频道,用户B 接收消息。

前提条件

  • 已开通圈组功能。如未开通,可通过云信官网首页提供的在线聊天、电话等方式联系商务经理开通。
  • 已完成圈组初始化。

如果频道所属的服务器的成员人数超过 2000 人阈值,接收方还必须先订阅该频道,才能收到该频道的消息。如果未超过 2000 人阈值,无需订阅也能收到消息。订阅相关说明,请参见圈组订阅机制

实现流程

实现消息收发

API 调用时序

uml diagram

具体流程

本节仅对上图中标为橙色的流程进行说明,其他流程请参考相关文档。例如:

  1. 接收方在登录圈组前,注册message事件回调函数,监听消息接收事件。

    示例代码如下:

    const qchat = new QChat({
      // 初始化参数
    })
    qchat.on('message',(message)=>{})
    
  2. 发送方调用sendMessage方法发送消息,调用时通过类型枚举type设置消息的类型。

    如果您希望在发送消息前提前得到QChatMessage以便于插入界面中,请使用SendMessageOptions里的onSendBefore回调方法。

    消息发送方需要拥有发送消息的权限(sendMsg)。


    该方法的部分重要参数说明如下(全量请参见SendMessageOptionsIUploadFileOptions):

    参数
    类型
    说明
    antiSpamInfo QChatMessageAntiSpamInfo 配置安全通(易盾反垃圾)相关的各项参数。如果您配置了这些参数,在发送消息时,会对发送的文本和附件进行内容审核(反垃圾检测)。根据您在云信控制台预设的拦截/过滤规则,如果检测到违规内容,消息可能发送失败或者敏感信息被过滤。安全通相关机制请参见安全通圈组的安全通功能属于增值功能,需要在开通圈组功能后再额外开通。如尚未开通,请通过云信官网首页提供的联系方式咨询商务经理开通。
    mentionAll boolean 是否@所有人,false:否,true:是用户需要拥有@所有人权限(remindAll)才能@所有人。
    mentionAccids string @部分人,如果将该消息设置为@所有人(即mention_all设置为true)或者@身份组(即mention_role_ids 不为空),则本参数无效)用户需要拥有@他人权限(remindOther)才能@部分人。
    mentionRoleIds string @的身份组列表,最多@ 10 个身份组。如果将该消息设置为@所有人(即mention_all设置为true),则本参数无效 用户需要拥有@身份组权限(mentionedRole)才能@身份组。
    onSendBefore function 发送前的回调函数,用于发送消息前获取消息对象(QChatMessage)。通过该回调函数获取的消息对象还没有服务端消息 ID(idServer) 和准确的消息发送成功时间戳(time),并且status也只是在发送中(sending)。如果您希望在发送消息前提前获取到消息对象以便于插入界面中,请使用该回调方法

    发送各类型消息的示例代码如下:

    文本
    // 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"]
    })
    
    图片
    // image message
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "image",
      // Get First File from DOM
      "file": document.getElementById('fileInput').files[0],
      "onUploadStart": function(task) { console.log('onUploadStart', task) },
      "onUploadProgress": function(progress) { console.log('onUploadProgress', progress) },
      "onUploadDone": function(file) { console.log('onUploadDone', file) },
      "onSendBefore": function(msg) { console.log('onSendBefore', msg)  }
    })
    
    // trigger order:
    // onUploadStart -> onUploadProgress -> onUploadDone -> onSendBefore
    
    语音
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "audio",
      // Get First File from DOM
      "file": document.getElementById('fileInput').files[0],
      "onUploadStart": function(task) { console.log('onUploadStart', task) },
      "onUploadProgress": function(progress) { console.log('onUploadProgress', progress) },
      "onUploadDone": function(file) { console.log('onUploadDone', file) },
      "onSendBefore": function(msg) { console.log('onSendBefore', msg)  }
    })
    // trigger order:
    // onUploadStart -> onUploadProgress -> onUploadDone -> onSendBefore
    
    视频
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "video",
      // Get First File from DOM
      "file": document.getElementById('fileInput').files[0],
      "onUploadStart": function(task) { console.log('onUploadStart', task) },
      "onUploadProgress": function(progress) { console.log('onUploadProgress', progress) },
      "onUploadDone": function(file) { console.log('onUploadDone', file) },
      "onSendBefore": function(msg) { console.log('onSendBefore', msg)  }
    })
    
    // trigger order:
    // onUploadStart -> onUploadProgress -> onUploadDone -> onSendBefore
    
    文件
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "file",
      // Get First File from DOM
      "file": document.getElementById('fileInput').files[0],
      "onUploadStart": function(task) { console.log('onUploadStart', task) },
      "onUploadProgress": function(progress) { console.log('onUploadProgress', progress) },
      "onUploadDone": function(file) { console.log('onUploadDone', file) },
      "onSendBefore": function(msg) { console.log('onSendBefore', msg)  }
    })
    
    // trigger order:
    // onUploadStart -> onUploadProgress -> onUploadDone -> onSendBefore
    
    位置
    // GEO message
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "geo",
      "attach": {
        "lat": 30.2083999
        "lng": 120.21201
        "title": 'Hang zhou'
      }
    })
    
    
    通知
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "notification",
      ...
    })
    
    提示
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "tip",
      ...
    })
    
    自定义
    const msg2 = await qchat.qchatMsg.sendMessage({
      "serverId": "{{YOUR_SERVERID}}",
      "channelId": "{{YOUR_CHANNELID}}",
      "type": "custom",
      ...
    })
    
  3. message事件回调触发,消息投递至接收方。

  4. 接收方调用markMessageRead方法将接收到的消息标记为已读。其参数结构MarkMesaageReadOptions需要传入serverIdChannelId和标记已读时间戳。

    • 标记已读成功后,当前消息和标记已读时间戳之前的所有消息都会被认为是已读。如果标记已读时间戳为 0,则 Channel 中的所有消息都将重新被视为未读消息。更多消息未读相关说明,请参见频道未读数管理
    • 该方法调用存在频控,200ms 内最多可调用一次。

    示例代码如下:

    await qchat.qchatMsg.markMessageRead({
      "serverId": "132305",
      "channelId": "67291",
      "time": new Date().getTime()
    })
    

实现消息重发

如果因为网络等原因发送消息失败(deliveryStatusfailed),可调用resendMessage方法(调用时传入发送失败的完整的消息体),实现消息重发。

  • 只有当QChatMessagedeliveryStatus字段为failed时才可以重发消息。
  • 如果重发消息时配置了安全通(易盾反垃圾)相关参数,系统会对发送的文本和附件进行内容审核(反垃圾检测)。根据您在云信控制台预设的拦截/过滤规则,如果检测到违规内容,消息可能发送失败或者敏感信息被过滤。安全通相关机制请参见安全通。圈组的安全通功能属于增值功能,需要在开通圈组功能后再额外开通。如尚未开通,请通过云信官网首页提供的联系方式咨询商务经理开通。

示例代码如下:

await qchat.qchatMsg.resendMessage({
  "serverId": "{{YOUR_SERVERID}}",
  "channelId": "{{YOUR_CHANNELID}}",
  "type": "text",
  "body": "121266",
  "mentionAll": true,
  "msgIdClient": "acb03e935be4b338dd5a3b1998e8170b",
  "fromAccount": "11011",
  "fromClientType": "Web",
  "fromDeviceId": "dcb71ec37ba8ef59a97abadb7189b100",
  "fromNick": "ssss",
  "time": 1644568398632,
  "updateTime": 1644568398632,
  "msgIdServer": "853754",
  "status": 0,
  "historyEnable": true,
  "deliveryStatus": "failed"
})

实现消息抄送

消息抄送服务可以将圈组消息或事件等数据,实时同步至您预设的服务器。

  1. 在云信控制台开通消息抄送

  2. 调用sendMessage方法发送消息时,传入 env, callbackExt, routeEnable 等参数,可实现发送消息的同时将该消息实时同步至指定的环境(即您预设的服务器地址)。相关参数具体定义请参见QChatMsgServiceInterface-SendMessageOptions


    假设您在云信控制台配置的抄送环境为 prod,抄送地址为 callbackext123,则发送消息抄送的示例代码如下:

    const msg = await qchat.qchatMsg.sendMessage({
      serverId: '{{YOUR_SERVERID}}',
      channelId: '{{YOUR_CHANNELID}}',
      type: 'text',
      body: 'This is a test message',
      env: 'prod',
      routeEnable: true
    })
    console.log(msg.env, msg.routeEnable, msg.callbackExt)
    // "prod" true "callbackext123"
    

    您也可通过云信 IM 服务端实现圈组消息抄送,具体介绍请参见圈组消息抄送

相关参考

相关控制台配置

  • 每个频道上的 消息未读数 (包括@消息的未读数)默认最多显示为 99+ 。

    最大未读数可在云信控制台配置在云信控制台选择应用,进入IM 免费版/专业版 > 功能权限开通 > 拓展配置 > 圈组 > 所有未读消息(包括@)的消息计数即可配置。
  • @消息的未读数的有效期,默认为 7 天。

    可在云信控制台配置该有效期在云信控制台选择应用,进入IM 免费版/专业版 > 功能权限开通 > 拓展配置 > 圈组 > 未读的@消息数-周期即可配置。

API 参考

API
说明
message 消息接收回事件调函数
messageUpdate 消息更新事件回调函数
sendMessage 发送消息
markMessageRead 将消息标记为已读
resendMessage 重发消息
此文档是否对你有帮助?
有帮助
我要吐槽
  • 功能介绍
  • 技术原理
  • 前提条件
  • 实现流程
  • 实现消息收发
  • API 调用时序
  • 具体流程
  • 实现消息重发
  • 实现消息抄送
  • 相关参考
  • 相关控制台配置
  • API 参考