阿里云直播互动Web
官方文档：互动消息Web端集成方法_视频直播(LIVE)-阿里云帮助中心
以下是代码实现：
<!-- 引入阿里云互动文件 -->
<script src="https://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js"></script>
<script src="https://g.alicdn.com/code/lib/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script crossorigin="anonymous" src="https://g.alicdn.com/apsara-media-box/imp-interaction/1.3.1/alivc-im.iife.js"></script>用户行为：进入离开直播间、发送礼物和普通信息
<divid="msgList"class="mt-4"ref="scrollContainer":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 class="mb-2 msgLi" ref="msgLi">${text}</div>`);scrollToBottom();
}function showMessageInfo(text) {$("#msgList").append(`<div class="mb-2 msgLi infoText" ref="msgLi">${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;}
}