弹幕（Web）

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),
  messageType: 0,
  textContent: '欢迎进入直播间！',
  extensionInfo: { type: 'system' },
}

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();

// 2. 调用更新接口，并指定修改的标志位
await updateLiveInfo({
   coverUrl: 'https://xxx',
   categoryList: [5, 6],
   isPublicVisible: false,
   activityStatus: 1
});