网站域名备案与解析,哪里的郑州网站建设,上海网站推广珈维,室内设计网站平台官方文档#xff1a;互动消息Web端集成方法_视频直播(LIVE)-阿里云帮助中心
以下是代码实现#xff1a;
!-- 引入阿里云互动文件 --
script srchttps://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js/script
script src互动消息Web端集成方法_视频直播(LIVE)-阿里云帮助中心
以下是代码实现
!-- 引入阿里云互动文件 --
script srchttps://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js/script
script srchttps://g.alicdn.com/code/lib/bootstrap/5.3.0/js/bootstrap.min.js/script
script crossoriginanonymous srchttps://g.alicdn.com/apsara-media-box/imp-interaction/1.3.1/alivc-im.iife.js/script
用户行为进入离开直播间、发送礼物和普通信息
dividmsgListclassmt-4refscrollContainer:style{ maxHeight: getBotHeightChatList() }
/div
// 互动
let authData ref();
async function getImToken() {getImTokenApi(uuid.value, liveId.value).then((res) {authData.value res.data;oneLoginBtnMet();});
}let userIdNum ref();
let groupIdNum ref();
const oneLoginBtnMet async () {try {// 登录await login(authData.value.liveImCode);// 加入群组await joinGroup(authData.value.groupId);// 直播间提示性文字showMessageInfo(亲爱的朋友们欢迎来到财经直播间踏入这扇财富知识的大门不论你是理财新手渴望开启投资之路还是资深玩家寻求更多机遇这里都有你想要的。新朋友们别拘谨我们会循序渐进带你领略财经世界老朋友们感谢一路相伴今天精彩依旧。市场风云变幻在这里我们一同紧盯热点剖析数据解读政策。大家有任何疑问或见解随时畅所欲言让我们在互动交流中挖掘财富密码携手驰骋财经沙场共赴财富增长之旅 );} catch (error) {console.log(一键登录加入群组, error.code, error.msg);}
};
let groupManager;
let messageManager;
let joinedGroupId;
// 登录
async function login(userId) {// 先初始化注意别忘了加 awaitawait engine.init({appId: authData.value.appId, // 开通应用后可以在控制台上拷贝appSign: authData.value.appSign, // 开通应用后可以在控制台上拷贝});// 初始化成功监听事件listenEngineEvents();// 获取登录信息groupIdNum.value authData.value.groupId;userIdNum.value authData.value.liveImCode;// 初始化成功再登录注意别忘了加 awaitawait engine.login({user: {userId, // 当前app登录的用户iduserExtension: authData.value.userName, // 用户扩展信息可以是头像、昵称等封装为json字符串},userAuth: {timestamp: authData.value.timestamp, // 服务端返回timestamp值nonce: authData.value.nonce, // 服务端返回nonce值role: authData.value.role, // 是否为admin角色如果不需要可以设置为空token: authData.value.token, // 服务端返回token值},});// 必须确保已经初始化否则会返回空值groupManager engine.getGroupManager();messageManager engine.getMessageManager();
}
// 加入群组
async function joinGroup(groupId) {if (!groupManager) {return;}await groupManager.joinGroup(groupId);joinedGroupId groupId;// 有用户加入或离开直播间 listenGroupEvents();// 处理用户互动1、礼物图片 2、礼物信息 3、普通文字 这个具体根据公司业务处理listenMessageEvents();
}function listenEngineEvents() {// 处理回调事件 AliVCIMEngineListenerProtocolengine.on(connecting, () {console.log(connecting);});engine.on(connectfailed, (err) {console.log(connect failed: ${err.message});});engine.on(connectsuccess, () {console.log(connect success);});engine.on(disconnect, (code) {console.log(disconnect: ${code});});engine.on(tokenexpired, async (cb) {// 令牌过期 获取新的登录信息的代码getImToken();});
}let memberCountValue ref(0);function listenGroupEvents() {if (!groupManager) {return;}// 在适当的时机例如进入房间后且完成登录后添加群组操作事件监听器groupManager.on(exit, (groupId, reason) {// 退出群组// showMessage(group ${groupId} close, reason: ${reason});});groupManager.on(memberchange, (groupId, memberCount, joinUsers, leaveUsers) {if (joinUsers.length ! 0) {showMessageInfo(用户 ${joinUsers[0].userId} 加入直播间);}if (leaveUsers.length ! 0) {showMessageInfo(用户 ${leaveUsers[0].userId} 离开直播间);}// numberDummy 虚拟人数// memberCount 直播间真实人数// 有用户进入或离开直播间 人数要更新let numberDummy Number(liveDetail.value.dummy);let memberCountValueNew numberDummy memberCount;memberCountValue.value memberCountValueNew;});groupManager.on(mutechange, (groupId, status) {console.log(groupId, groupId);console.log(status, status);// 群组的禁言状态发生了变化// showMessage(有用户被禁言!);// 禁言这里后端单独写了websocket接口处理});groupManager.on(infochange, (groupId, info) {// 有人离开了群组showMessage(group ${groupId} info change);});
}function showMessage(text) {$(#msgList).append(div classmb-2 msgLi refmsgLi${text}/div);scrollToBottom();
}function showMessageInfo(text) {$(#msgList).append(div classmb-2 msgLi infoText refmsgLi${text}/div);danmus.value.splice(danmus.value.length, 0, text);scrollToBottom();
}const scrollContainer ref(null);
const msgLi ref(null);
// 消息滚动条始终保持在最底部
function scrollToBottom() {if (scrollContainer.value) {scrollContainer.value.scrollTop scrollContainer.value.scrollHeight;}
}
