弹幕（uni-app）

import { useBarrageState } from "@/uni_modules/tuikit-atomic-x/state/BarrageState";
import { watch } from 'vue';

//通过 liveID 获取 BarrageState 的实例
const { messageList } = useBarrageState(liveID);

// 监听 messageList 的实时变更，用于驱动 UI 更新
watch(messageList, (newVal, oldVal) => {
    console.log(newVal)
})

import { useBarrageState } from "@/uni_modules/tuikit-atomic-x/state/BarrageState";

//通过 liveID 获取 BarrageState 的实例
const { sendTextMessage } = useBarrageState(liveID);

const sendMessage = () => {
    sendTextMessage({
      liveID: 'xxx', // 当前直播间的 liveID
      text: 'xxx', // 您想要发送的弹幕     
      success: () => {
        console.log("弹幕发送成功")
      },
      fail: (error) => {
        console.log("弹幕发送失败", error)
      } 
    })
}

import { useBarrageState } from "@/uni_modules/tuikit-atomic-x/state/BarrageState";

//通过 liveID 获取 BarrageState 的实例
const { sendCustomMessage } = useBarrageState(liveID);

/// 发送一条自定义弹幕，例如用于发送礼物
const sendGiftMessage = ( giftID: string, giftCount: number ) => {
    // 1. 定义一个能识别业务的ID 
    const businessID = "live_gift
    // 2. 将业务数据编码为 JSON 字符串
    const giftData = ["gift_id": giftId, "gift_count": giftCount]
    // 3. 调用核心API发送自定义消息
    sendCustomMessage({
      liveID: 'xxx', // 当前直播间的 liveID
      businessID,
      data: JSON.stringify(giftData),     
      success: () => {
        console.log("礼物消息发送成功")
      },
      fail: (error) => {
        console.log("礼物消息发送失败", error)
      }
    })
}

import { useBarrageState } from "@/uni_modules/tuikit-atomic-x/state/BarrageState";

//通过 liveID 获取 BarrageState 的实例
const { appendLocalTip } = useBarrageState(liveID);

const showWelcomeMessage = (user: LiveUserInfo) => {
    // 创建一条本地提示消息
    let welcomeTip = {}
    welcomeTip.messageType = 'text',
    welcomeTip.textContent = "欢迎 ${user.userName} 进入直播间！"
    // 调用 BarrageStore 的接口将其插入弹幕列表
    appendLocalTip({
      liveID: 'xxx', // 当前直播间的 liveID
      message: welcomeTip
     })
}

import { useLiveAudienceState } from '@/uni_modules/tuikit-atomic-x/state/LiveAudienceState';

// 1. 通过 liveID 获取 LiveAudienceState 的实例
const { disableSendMessage } = useLiveAudienceState(liveID)

// 2. 定义要操作的用户 ID 和禁言状态
const userIdToMute = "user_id_to_be_muted"
const shouldDisable = true // true为禁言, false为解禁

// 3. 调用接口执行操作
const disableSendMessage = () => {
    disableSendMessage({
      liveID: 'xxx', // 当前直播间 liveID
      userID: userIdToMute
      isDisable: shouldDisable,
      success: () => {
        console.log("${shouldDisable ? "禁言" : "解禁"}用户 ${userIdToMute}成功")
      },
      fail: (error) => {
        console.log("操作失败", error)
      }
    })
}

import { useLiveListState } from "@/uni_modules/tuikit-atomic-x/state/LiveListState";

// 1. 获取 LiveListState 的实例
const { updateLiveInfo, currentLive } = useLiveListState();

// 2. 获取当前直播间信息，并修改全体禁言状态
currentLive.value.isMessageDisable = true // true 为全体禁言, false 为关闭

// 3. 调用更新接口，并指定修改的标志位
const updateLiveInfo = () => {
    updateLiveInfo({
      liveInfo: currentLive.value,
      modifyFlagList: ['IS_MESSAGE_DISABLE'],
      success: () => {
        console.log("全体禁言成功")
      },
      fail: (error) => {
        console.log("操作失败", error)
      }
    })
}

  import { watch } from 'vue';
  // UI 展示数据
  const mixMessageList = ref()
  // ===== 防抖配置 =====
  const DEBOUNCE_THRESHOLD = 300; // 300毫秒防抖阈值
  let lastUpdateTime = 0;
  let pendingMessages: any[] = []; // 待处理的消息队列
  let debounceTimer: ReturnType<typeof setTimeout> | null = null;

  /**
   * 执行 UI 刷新操作
   */
  const flushMessages = () => {
    if (pendingMessages.length > 0) {
      mixMessageList.value = [...mixMessageList.value, ...pendingMessages]; // 用于 UI 展示的数据
      lastUpdateTime = Date.now(); // 更新最后刷新时间
      pendingMessages = []; // 清空待处理消息
    }
  };

  /**
   * 防抖处理：累积消息直到达到时间阈值
   */
  const debouncedUpdate = (newMessages: any[]) => {
    // 将新消息添加到待处理队列
    pendingMessages.push(...newMessages);

    // 清除之前的定时器
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }

    const now = Date.now();
    const timeSinceLastUpdate = now - lastUpdateTime;

    // 如果距离上次更新已经超过阈值，立即执行更新
    if (timeSinceLastUpdate >= DEBOUNCE_THRESHOLD) {
      flushMessages();
    } else {
      // 否则设置定时器在阈值时间后执行更新
      const remainingTime = DEBOUNCE_THRESHOLD - timeSinceLastUpdate;
      debounceTimer = setTimeout(() => {
        flushMessages();
        debounceTimer = null;
      }, remainingTime);
    }
  };

  watch(messageList, (newVal, oldVal) => {
    if (!newVal) return;
    const value = newVal.slice((oldVal || []).length, (newVal || []).length);
    if (value.length > 0) {
      debouncedUpdate(value);
    }
  });

  // ===== 消息窗口配置（只保留最新N条消息）=====
  const MAX_MESSAGES_COUNT = 500;  // 最大消息数，超过则删除最早的消息

  /**
   * 裁剪消息列表：只保留最新的 N 条消息
   * @param messages 待裁剪的消息数组
   * @returns 裁剪后的消息数组
   */
  const trimMessageList = (messages: any[]): any[] => {
    if (messages.length > MAX_MESSAGES_COUNT) {
      // 删除最早的消息，只保留最新的 MAX_MESSAGES_COUNT 条
      const trimmed = messages.slice(messages.length - MAX_MESSAGES_COUNT);
      console.warn(
        `[BarrageList] 消息数量超过限制 ${MAX_MESSAGES_COUNT}，已删除 ${messages.length - MAX_MESSAGES_COUNT} 条最早消息`
      );
      return trimmed;
    }
    return messages;
  };

  // 初始化时应用消息窗口限制
  const mixMessageList = ref<any[]>(trimMessageList(messageList.value || []));