弹幕

import { useBarrageState } from 'tuikit-atomicx-vue3';
import { watch } from 'vue'

const { messageList } = useBarrageState()

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

import { useBarrageState } from 'tuikit-atomicx-vue3'

const { sendTextMessage } = useBarrageState();

const sendMessage = async () => {
   try {
    await sendTextMessage({
      text: '大家好，欢迎来到直播间！',
      extensionInfo: {
        color: '#ff0000',
        fontSize: '16px'
      }
    });
    } catch (error) {
      console.error('消息发送失败:', error);
    }
}

import { useBarrageState } from 'tuikit-atomicx-vue3'
import { watch } from 'vue';

const { sendCustomMessage } = useBarrageState();

/// 发送一条自定义弹幕，例如用于发送礼物
const sendGiftMessage = async (giftId: string, giftCount: number) => {
  // 1. 定义一个能识别业务的ID
  const businessId = 'live_gift';
  // 2. 将业务数据编码为 JSON 字符串
  const giftData = { gift_id: giftId, gift_count: giftCount };
  // 3. 调用核心API发送自定义消息
  try {
    await sendCustomMessage({
      businessId,
      data: JSON.stringify(giftData)
    });
  } catch (error) {
    console.error('礼物消息发送失败:', error);
  }
};

import { useBarrageState } from 'tuikit-atomicx-vue3'

const { appendLocalTip } = useBarrageState()

const systemTip = {
  liveId: 'live123',
  sender: {
    userId: 'system',
    userName: '系统',
    avatarUrl: '',
  },
  sequence: Date.now(), // 消息序列号，用于排序
  timestampInSecond: Math.floor(Date.now() / 1000), // 10位 Unix 时间戳
  messageType: 0, // 消息类型枚举值（例如：0 代表普通文本消息，请参考 API 枚举定义）
  textContent: '欢迎进入直播间！',// 消息显示的文本内容
  extensionInfo: { type: 'system' },// 扩展字段，用于 UI 特殊渲染
}

appendLocalTip(systemTip)

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { disableSendMessage } = useLiveAudienceState()

// isDisable 为 true 时禁用用户发送消息；
// isDisable 为 false 时启用用户发送消息；
await disableSendMessage({ userId: 'user123', isDisable: true });


import { useLiveListState } from 'tuikit-atomicx-vue3';

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

const setGlobalMute = async (shouldMute: boolean) => {
  try {
    // 2. 调用更新接口
    // LiveListState 会根据传入的参数自动合并更新直播间信息
    await updateLiveInfo({
       // 对应 LiveInfo 中的 isMessageDisable 字段
       // true: 禁止所有观众发言
       // false: 允许观众发言
       isMessageDisable: shouldMute 
    });
    console.log(`全体禁言状态已更新为: ${shouldMute}`);
  } catch (error) {
    console.error('更新全体禁言失败:', error);
  }
};

// 示例用法：开启全体禁言
await setGlobalMute(true);