前言:
腾讯云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);
});
},