欢迎咨询微：shiliukeji007
利用腾讯云IM实现直播弹幕功能
实现代码逻辑：集成SDK—>创建SDK实例—>登录SDK—>监听SDK—>加入群组—>创建消息实例并发送
一、准备工作
1．登录腾讯即时通信IM控制台https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2Fim
2．单击【+添加新应用】
3．在【创建应用】对话框中输入您的应用名称，单击【确定】。创建完成后，可在控制台总览页查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间
4．记录该应用的 SDKAppID 信息
二、创建AVChatRoom
1．音视频聊天室（AVChatRoom）有以下特点:
（1）适用于互动直播场景，群成员人数无上限
（2）支持针对涉黄、涉政以及不雅词的安全打击，满足安全监管需求
（3）支持向全体在线用户推送消息（群系统通知）
（4）Web 和微信小程序端支持以游客身份（即不登录）接收消息
（5）申请加群后，无需管理员审批，直接加入
2．适用场景
（1）直播弹幕
（2）网红带货
（3）教学白板
3．使用限制
（1）不支持 撤回消息
（2）群主不可以退群，群主退群只能通过解散群组的方式。
（3）不支持移除群成员。
4．创建—可以通过控制台创建群组，也可以通过调用 创建群组 API 创建群组。
（1）登录 即时通信 IM 控制台，单击目标应用卡片
（2）在左侧导航栏选择【群组管理】，单击【添加群组】
（3）输入群名称，选填群主 ID，选择【群类型】为【互动直播聊天室】。
（4）单击【确定】，待群组创建成功后，记录其【群ID】
三、集成SDK
可以通过 NPM 或 Script 集成 SDK，推荐使用 NPM 集成
小程序： npm install tim-wx-sdk --save-dev
web： npm install tim-js-sdk --save-dev
四、创建SDK示例
import TIM from 'tim-wx-sdk';
import { genTestUserSig } from 'GenerateTestUserSig.js'
let tim = null;
//创建实例
creatTim() {
var that = this;
var options = {
SDKAppID: 0// 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
tim = TIM.create(options); // SDK 实例通常用 tim 表示
console.log(tim);
// 设置 SDK 日志输出级别，详细分级请参考 setLogLevel 接口的说明
tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
that.timLogin();
}
五、登录SDK
用户登录 IM SDK 才能正常收发消息，登录需要用户提供 UserID、UserSig 等信息。
timLogin() {
var that = this;
var userid = uni.getStorageSync('userid'); // 小程序用户的自定义userid
var userSig = genTestUserSig(userid).userSig;
// 生成文档 https://cloud.tencent.com/document/product/269/32688
console.log(userSig);
var promise = tim.login({
userID: userid,
userSig: userSig
});
promise.then(function (imResponse) {
console.log(imResponse.data); // 登录成功
that.timListener();
}).catch(function (imError) {
console.warn('login error:', imError); // 登录失败的相关信息
});
}
六、监听SDK事件
登录成功后，需要先等 SDK 处于 ready 状态才能调用 sendMessage 等需要鉴权的接口，可以通过监听事件 TIM.EVENT.SDK_READY 获取 SDK 状态。
timListener() {
var that = this;
//sdk是否准备好
tim.on(TIM.EVENT.SDK_READY, this.onReadyStateUpdate, this);
//监听消息接受
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function (event) {
console.log(event);
var length = event.data.length;
var message;
for (var i = 0; i < length; i++) {
// Message 实例的详细数据结构请参考 Message
// 其中 type 和 payload 属性需要重点关注
message = event.data[i];
switch (message.type) {
case TIM.TYPES.MSG_TEXT:
// 收到了文本消息
that._handleTextMsg(message);
break;
case TIM.TYPES.MSG_CUSTOM:
// 收到了自定义消息
that._handleCustomMsg(message);
break;
case TIM.TYPES.MSG_GRP_TIP:
// 收到了群提示消息，如成员进群、群成员退群
that._handleGroupTip(message);
break;
case TIM.TYPES.MSG_GRP_SYS_NOTICE:
// 收到了群系统通知，通过 REST API 在群组中发送的系统通知请参考 在群组中发送系统通知 API
that._handleGroupSystemNotice(message);
break;
default:
break;}
}
});
},
// 收到了文本消息
_handleTextMsg: function _handleTextMsg(message) {
console.log(message);
var obj = {
nick: message.nick,
text: message.payload.text
};
this.textList.push(obj);
console.log(message.payload.text); // 文本消息内容
},
// 收到了自定义消息
_handleCustomMsg: function _handleCustomMsg(message) {
console.log(message.payload);
},
// 收到了群提示消息，如成员进群、群成员退群
_handleGroupTip: function _handleGroupTip(message) {
switch (message.payload.operationType) {
case TIM.TYPES.GRP_TIP_MBR_JOIN: // 有成员加群
break;
case TIM.TYPES.GRP_TIP_MBR_QUIT: // 有群成员退群
break;
case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT: // 有群成员被踢出群
break;
case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN: // 有群成员被设为管理员
break;
case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN: // 有群成员被撤销管理员
break;
case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED: // 群组资料变更
break;
case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED: // 群成员资料变更，例如群成员被禁言
break;
default:
break;
}
},
// 收到了群系统通知，通过 REST API 在群组中发送的系统通知请参考 在群组中发送系统通知 API
_handleGroupSystemNotice: function _handleGroupSystemNotice(message) {
console.log(message.payload.userDefinedField);
},
七、sdk准备好后加入聊天群组
onReadyStateUpdate: function onReadyStateUpdate() {
var that = this;
console.log("登录成功监听");
// 加入直播聊天
var promise = tim.joinGroup({
groupID: '群组ID控制台查看'
});
promise.then(function (imResponse) {
console.log(imResponse);
switch (imResponse.data.status) {
case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
break;
case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
console.log(imResponse.data.group); // 加入的群组资料
var nick = uni.getStorageSync('username');
var avatar = uni.getStorageSync('userimg');
// 调用 updateMyProfile 设置自己的 nick（昵称） 和 avatar（头像URL）
var _promise = tim.updateMyProfile({
nick: nick,
avatar: avatar,
allowType: TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
});
_promise.then(function (imResponse) {
console.log(imResponse.data); // 更新资料成功
}).catch(function (imError) {
console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
});
break;
case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
break;
default:
break;
}
}).catch(function (imError) {
console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
});
},
八、创建消息实例并发送
sendMsg: function sendMsg() {
// 发送文本消息，Web 端与小程序端相同
// 1. 创建消息实例，接口返回的实例可以上屏
console.log('send');
var that = this;
// 弹幕信息
var message = tim.createTextMessage({
to: '群组ID',
conversationType: TIM.TYPES.CONV_GROUP,
// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息
// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
priority: _timWxSdk.default.TYPES.MSG_PRIORITY_NORMAL,
payload: {
text: that.text // 绑定弹幕聊天框内容
}
});
console.log(message);
// 2. 发送消息
var promise = tim.sendMessage(message);
promise.then(function (imResponse) {
// 发送成功
console.log(imResponse);
var obj = {
nick: uni.getStorageSync('username'),
text: that.text
};
that.textList.push(obj);// 发送成功后填充到我们的弹幕数组中显示
that.showMsg = false;
}).catch(function (imError) {
// 发送失败
console.warn('sendMessage error:', imError);
});
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
