阿里云直播互动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>

用户行为：进入离开直播间、发送礼物和普通信息

<div
 id="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) {
  // 先初始化，注意别忘了加 await
  await engine.init({
    appId: authData.value.appId, // 开通应用后可以在控制台上拷贝
    appSign: authData.value.appSign, // 开通应用后可以在控制台上拷贝
  });
  // 初始化成功，监听事件
  listenEngineEvents();

  // 获取登录信息
  groupIdNum.value = authData.value.groupId;
  userIdNum.value = authData.value.liveImCode;

  // 初始化成功再登录，注意别忘了加 await
  await engine.login({
    user: {
      userId, // 当前app登录的用户id
      userExtension: 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() {
  // 处理回调事件  AliVCIMEngineListenerProtocol
  engine.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;
  }
}