liveh5-nuxt/app/stores/live/index.js

import { createGlobalState } from '@vueuse/core'
import {ref} from "vue";
import {goodStore} from "@/stores/goods/index.js";
import {authStore} from "@/stores/auth/index.js";
import {message} from "~/components/x-message/useMessage.js";
import { WebSocketClient } from '@/utils/websocket'

export const liveStore = createGlobalState(() => {
    const {auctionDetail,getAuctionDetail} = goodStore();
    const { token } = authStore()
    const quoteStatus = ref(false)
    const show = ref(false)
    const cleanup = ref(null)
    const show1=ref(false)
    const playerId=ref('J_prismPlayer')
    const auctionData=ref({})
    const socket=ref(null)
    const config = useRuntimeConfig()
    const getSocketData = async () => {
        const wsClient = new WebSocketClient(
            config.public.NUXT_PUBLIC_SOCKET_URL,
            token.value
        )
        const ws = wsClient.connect('/api/v1/m/auction/live', {
            auctionUuid: auctionDetail.value.uuid,
        })

        ws.onOpen(() => {
            console.log('WebSocket connected')
        })

        ws.onMessage((data) => {
            auctionData.value = data.data

            if (data.data?.wsType === 'tip' ) {
                if (data.data?.tip?.tipType === 'falling'){
                    message.warning({
                        title: {
                            text: '即将落槌',
                            color: '#F09F1F',
                            align: 'center',
                        },
                        style: {
                            width: '151px',
                            bottom: '230px',
                        },
                    }, 500000)
                }else if (data.data?.tip?.tipType === 'othersBid'){
                    message.error({
                        title: {
                            text: '已有人出价',
                            color: '#CF3050',
                            align: 'center',
                        },
                        icon:false,
                        subTitle:{
                            text:'更新后再出价',
                            color: '#939393',
                            align: 'center',
                        },
                        style: {
                            width: '151px',
                            bottom: '230px'
                        },
                    }, 500000)
                }else if (data.data?.tip?.tipType === 'successBid'){
                    message.success({
                        title: {
                            text: '恭喜您，竞拍成功',
                            color: '#18A058',
                            align: 'center',
                        },
                        icon:false,
                        subTitle:{
                            text:'请缴款',
                            color: '#939393',
                            align: 'center',
                        },
                        style: {
                            width: '151px',
                            bottom: '230px'
                        },
                    }, 500000)
                }else if (data.data?.tip?.tipType === 'artworkOver'){
                    message.success({
                        title: {
                            text: '本拍品已结束',
                            color: '#575757',
                            align: 'center',
                        },
                        icon:false,
                        subTitle:{
                            text:'请期待下个拍品',
                            color: '#939393',
                            align: 'center',
                        },
                        style: {
                            width: '151px',
                            bottom: '230px'
                        },
                    })
                }

            }else if (data.data?.wsType==='stopArtwor'){
                quoteStatus.value=false
            }

            console.log('onmessage', data)
        })

        ws.onClose(() => {
            console.log('WebSocket disconnected')
        })

        ws.onError((error) => {
            console.error('WebSocket error:', error)
        })
    }
    const changeStatus = () => {
        if (auctionData.value.artwork.isSelling){
            quoteStatus.value = !quoteStatus.value
        }else {
            if (quoteStatus.value){
                quoteStatus.value = false
            }
        }

    }
    return{
        auctionData,
        getSocketData,
        show1,
        playerId,
        show,
        quoteStatus,
        changeStatus
    }
})