腾讯云im:用户端来实现群组消息的功能

news2024/11/19 20:32:44

前言:

        腾讯云im如果放在服务端来实现是非常便捷的,但是也受腾讯im的并发等限制,这里提供  用户端,也就是前端  来实现群组消息的相关功能。

实现效果:

实现具体功能需求:

1、群组中有主播、用户、助手、导购等不同权限的人员,可以互发消息

2、主播可以在web端和小程序端同时登录(跨端)

3、当其中一个人,比如用户发送消息,其他人要收到未读消息,并展示未读小红点

前提条件:腾讯云控制入口点我

1、你的腾讯账户必须是  旗舰版

2、必须打开控制台配置:功能配置-》群组配置-》群功能配置-》群消息已读回执

具体的方案:

1、调用sdk 实现创建群,然后把群信息给后端保存库里

2、调用sdk 实现消息的互发,注意消息格式可以自定义

3、调用sdk 初始化获取是否有群组的未读消息,来控制小红点

4、消息互发的时候,监听他的实时未读消息,控制小红点

5、点击已读,调用sdk发送消息的已读方法

6、已读后,如果有跨端需求,自己给自己在发条消息,来告诉不同端的自己

7、销毁群(注意这里  用户端/前端  实现不了,因为sdk只提供了退出群的功能,没有销毁

具体的功能:

1、创建群组

tim.createGroup

// 创建好友工作群
    let promise = tim.createGroup({
      type: TIM.TYPES.GRP_WORK, //工作群
      name: 'haoxing-demo',
      introduction:'浩星的测试群',//群简介
      notification:'浩星的测试群',//群公告
      maxMemberNum:200, //最大群成员数量
      memberList: [
        {
          userID: "164315894311084****",
          // 群成员维度的自定义字段,默认情况是没有的,需要开通,详情请参阅自定义字段
          memberCustomField: [{nick: "冰雨如梦"}]
        },{
          userID: "162902479500371****",
          // 群成员维度的自定义字段,默认情况是没有的,需要开通,详情请参阅自定义字段
          memberCustomField: [{nick: "NULL"}]
        },{
          userID: "158482702290129****",
          // 群成员维度的自定义字段,默认情况是没有的,需要开通,详情请参阅自定义字段
          memberCustomField: [{nick: "浩星"}]
        },
      ] // 如果填写了 memberList,则必须填写 userID
    });
    promise.then(function(imResponse) { // 创建成功
      console.log(imResponse.data.group); // 创建的群的资料
      //groupID: "@TGS#1WC4LVRMO"


      // 创建群时指定了成员列表,但是成员中存在超过了“单个用户可加入群组数”限制的情况
      // 一个用户 userX 最多允许加入 N 个群,如果已经加入了 N 个群,此时创建群再指定 userX 为群成员,则 userX 不能正常加群
      // SDK 将 userX 的信息放入 overLimitUserIDList,供接入侧处理
      console.log(imResponse.data.overLimitUserIDList); // 超过了“单个用户可加入群组数”限制的用户列表,v2.10.2起支持
    }).catch(function(imError) {
      console.warn('createGroup error:', imError); // 创建群组失败的相关信息
    });

2、群组中添加某个用户

tim.addGroupMember  群加人

tim.joinGroup   用户申请加群

3、查询群组详细信息,可以判断是否创建该群

tim.getGroupProfile

4、群组内用户互发消息

tim.createTextMessage

tim.sendMessage

// 发送群消息
let message = tim.createTextMessage({
  to: '@TGS#32C53VPMP', //群id
  conversationType: TIM.TYPES.CONV_GROUP, //类型
  payload: {
    text: '我是额外的!!!',
    source:'前端自己发送信息!'
  },
  // v2.18.0起支持群消息已读回执功能,如果您发消息需要已读回执,需购买旗舰版套餐,并且创建消息时将 needReadReceipt 设置为 true
  needReadReceipt: true
});
// 发送消息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
	// 发送成功
	console.log(imResponse);
}).catch(function(imError) {
	// 发送失败
	console.warn('sendMessage error:', imError);
});

5、群组内 监听自己的消息的未读情况

tim.on(TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED, onMessageReadReceiptReceived);

6、获取群组的未读消息

tim.getConversationList

7、跨端问题解决

        因为im本身只支持跨端消息,也就是用户端发送一条消息,你的web端登录的主播账户和小程序端登录的主播账户,都可以同时收到消息,但是,我想在web端收到消息后调用已读方法,让小程序端也知道已经已读了,更新数据,这就实现不了了。

实现方法:

        创建一个C2C的聊天,自己给自己发条消息,只要两边都同时在线,是可以收到的

sendNoReadFun(){
      // 发送其他端消息
      let message = this.tim.createTextMessage({
        to: "1572546702042263554", //web端和小程序端同一个userid
        conversationType: TIM.TYPES.CONV_C2C,
        payload: {
          text: '我点击了已读,你收到了嘛',
        },
        // v2.18.0起支持群消息已读回执功能,如果您发消息需要已读回执,需购买旗舰版套餐,并且创建消息时将 needReadReceipt 设置为 true
        needReadReceipt: true
      });
      // 发送消息
      let promise = this.tim.sendMessage(message);
      promise.then(function(imResponse) {
        // 发送成功
        console.log(imResponse);
        debugger
      }).catch(function(imError) {
        // 发送失败
        console.warn('sendMessage error:', imError);
      });
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/444609.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android 实现单指滑动、双指缩放照片

一、前景提示 最近接到一个查看大图的需求,现在图片展示还不够大,要求还要能缩小能放大还能保存照片。直接开始Google实现方式。 二、实现功能 根据查询到的结果分为两种,一个是使用手势监听来实现,第二种监听触摸事件来实现 …

引入Tuning function design的自适应反步控制方法 下篇

引入Tuning function design的自适应反步控制方法 下篇 目录 引入Tuning function design的自适应反步控制方法 下篇利用Turning function解决高阶不匹配系统的控制器设计问题问题描述控制器设计小结总结上一篇文章写了如何通过推迟参数设计的方法来解决不匹配条件下的系统反步…

怎样把flv转换成mp4,4种方法轻松学

怎样把flv转换成mp4?当我们下载到视频格式是flv的时候,我们就要想着把flv转换成mp4?为什么这么说呢?因为FLV流媒体格式是一种全新的视频格式,全称为Flash Video。由于它形成的文件极小、加载速度极快,使得网…

这里有小白最关心的亚马逊防关联问题

账号的安全问题,很多时候和关联问题相关,一旦被检测到关联就会导致账号被永久封号。亚马逊更是官方出过规定,一个卖家只能开一个账号,如果同一个ip登录两个以上的账户,就很容易导致关联。这样讲可能会有点模糊&#xf…

微服务_微服务的架构演进之路

目录 一、前言 二、单体架构 三、分布式架构 四、微服务 五、SpringCloud 六、服务拆分 5.1服务拆分原则 5.2服务拆分示例 一、前言 微服务是一种软件开发架构风格,它将单个应用程序拆分成多个小型服务,每个服务都具有自己的特定功能。这些服务…

用TS写出20个数组方法的声明

前言 前段时间看直播看到狼叔直播驳斥”前端已死论“,前端死没死不知道,反正前端是拿不到以前那么多工资了;好,进入正题,狼叔在直播间提到要求前端写出20个数组上的方法,这确实不太简单,但是只…

(补)4.13每日一题

给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 题目连接:https://leetcode.cn/problems/longest-substring-without-repeating-characters/ 解题 开始我把这个题目想简单了,我想的是输入一个字符串,从第一…

Day946.厂商定制的Android系统为什么也要解耦? -系统重构实战

厂商定制的Android系统为什么也要解耦? Hi,我是阿昌,今天学习记录的是关于厂商定制的Android系统为什么也要解耦?的内容。 一、Android 系统架构 AOSP,全称是 Android Open Source Project,中文译为“An…

永磁同步电机流频比(I/F)控制及Matlab/Simulink仿真分析

文章目录 前言一、流频比I/F控制原理二、永磁同步电机I/F控制系统Matlab/Simulink仿真分析2.1.仿真电路分析2.1.1 I/F控制算法2.1.2 电流环2.1.3 输出处理2.1.4 主电路 2.2 仿真结果分析 总结 前言 本章节采用流频比I/F控制方法驱动永磁同步电机的转动,首先分析流频…

传统机器学习(二)逻辑回归算法(一)

传统机器学习(二)逻辑回归算法(一) 1.1 算法概述 1.1.1 逻辑回归及其梯度推导 ​ 线性回归的任务,就是构造一个预测函数来映射输入的特征矩阵x和标签值y的线性关系,而构造预测函数的核心就是找出模型的参数,著名的最小二乘法就是用来求解线性回归中参…

J-Link不能连接目标MCU几点常见原因

J-Link是嵌入式软件最常用的工具之一,但是,在使用这个工具时,也会遇到各种各样的问题。 J-Link的连接 使用J-Link,首先第一步硬件连接,确认J-Link和PC机之间是否连接正常,并确认上位机能和 J-Link 建立正…

ZedGraph 绘制动态曲线

文章目录 前言:开发环境:1 下载ZedGraph 控件并设置图形界面2 功能实现3 需求升级4 小结 话不多数,先上一个效果图: 前言: 需要采集一些设备的数据以图表的形式展示出来,研究数据的走向是否平稳&#xff0…

mac Homebrew方式安装 activemq

两种方式安装 activemq 一、通过Homebrew管理安装 1. 确保homebrew可用 查看brew版本 brew -v 如果报错,则可能是未启用brew,需要安装或更新 更新并重新查看是否安装成功 brew update brew -v 2. 安装 activemq:下载activemq前 会先下载相…

Direct3D 12——纹理——寻址模式

可将经过常数插值或线性插值的纹理定义为一个返回向量值的函数T(u, v) (r,g,b,a),即给 定纹理坐标(u,v)∈[0,1]^2,则上述纹理函数T将返回颜色(r,g, b, a)。 Direct3D允许…

MLCC周期性分析:当前时点处于周期反转前夜

MLCC是电子工业大米,供需波动导致行业成周期性波动 MLCC是最常用的被动元器件之一,终端下游涵盖消费电子、家电、汽车、通信等。在5g、汽车电子、智能硬件的推动下,MLCC行业需求稳步增长。供给端来看,中国大陆厂商合计市场份额不…

MFC加载动态gif图片文件C++语言,基于MFC的动画播放控件

MFC加载动态gif图片,使用VS2015环境 一、将下载的PictureEx.h和PictureEx.cpp放在工程文件的目录下,动态gif图片放在工程文件的res文件夹下;(GIF动图下载 https://icons8.com/preloaders/en/search/move) &#xff08…

企业级VUE前端项目各目录文件的作用

概述 本文项目是基于Vue CLI3构建工具(基于 webpack)生成的脚手架项目。Vue CLI 现已处于维护模式,VUE官方推荐使用 create-vue(基于 Vite)构建工具。 vue-cli2.0与3.0在目录结构方面,有明显的不同,vue-cli3.0移除了…

Linux性能优化实战

1. TCP/IP报文详解 TCP/IP 定义了电子设备如何连入因特网,以及数据如何在它们之间传输的标准。协议采用了4层的层级结构,每一层都呼叫它的下一层所提供的协议来完成自己的需求。TCP负责发现传输的问题,一有问题就发出信号,要求重…

根据cadence设计图学习硬件知识day04了解一些芯片

1.PI3PCIE3212 (双向信道多路复用器/多路分解器开关) PI3PCIE3212是PCIe Gen3.0、8Gbps、4对2差分,PCI ExpressR 3.0性能,8.0Gbps 双向信道多路复用器/多路分解器开关。由于其低的位对位偏斜,高的通道对通道噪声隔离…

邂逅Node.js开发

目录: 1 Node.js是什么? 2 Node的应用场景 3 Node安装和管理 4 JavaScript代码执行 5 Node的输入和输出 6 Node的全局对象 node命令是可以直接运行js脚本的,在某文件夹底下只要有js文件,就可以通过命令提示符运行该js文件。格式是 &…