Vue3中如何响应式显示WebSocket.readyState？问题分析与解决

在Vue3组件中尝试响应式显示WebSocket的readyState时，无法及时更新状态，总是延迟显示。

无法正常工作的代码示例：

let ws = ref(null);
ws.value = new WebSocket('url');

<template>
    <div>{{ ws.readyState }}</div>
</template>

但当组件中存在定时器更新响应式变量时，readyState能正常显示：

let time = ref('');
let timer = setInterval(() => {
    time.value = moment(time.value).add(1, 's').format('YYYY-MM-DD HH:mm:ss');
}, 1000);

<template>
    <div>{{ time }}</div>
    <div>{{ ws.readyState }}</div>
</template>

尝试过let status = toRef(ws.value, 'readyState')和let { readyState } = toRefs(ws.value)，均无效。需要了解：

• 无法响应式显示的原因
• 解决方法
• 是否与Vue3响应式原理相关

这确实和Vue3的响应式原理直接相关：

• Vue3的响应式系统仅对自身创建的响应式对象进行属性变化追踪，原生WebSocket对象属于浏览器内置对象，不是Vue的响应式对象，它的readyState属性变化时，Vue无法感知到，自然不会触发视图更新。
• 定时器场景下，是因为定时器回调中更新了响应式变量time，触发了组件重新渲染，此时Vue会重新读取ws.readyState的当前值，所以看起来状态正常更新了，但这只是“顺带”的效果，并非readyState本身是响应式的。
• toRef和toRefs的作用是从响应式对象中提取属性并保持响应式关联，而ws.value是原生WebSocket对象（非响应式），所以这两个方法无法追踪readyState的变化，自然无效。

核心思路是通过WebSocket的内置事件，将readyState的变化同步到Vue的响应式变量中：

方法1：监听WebSocket事件更新响应式状态 #

import { ref, onUnmounted } from 'vue';

const ws = ref(null);
const wsReadyState = ref(0); // 初始值对应CONNECTING状态

ws.value = new WebSocket('url');

// 监听WebSocket状态变化事件
const handleStateChange = () => {
    wsReadyState.value = ws.value.readyState;
};

ws.value.addEventListener('open', handleStateChange);
ws.value.addEventListener('close', handleStateChange);
ws.value.addEventListener('error', handleStateChange);

// 组件卸载时清理监听和WebSocket连接
onUnmounted(() => {
    ws.value?.removeEventListener('open', handleStateChange);
    ws.value?.removeEventListener('close', handleStateChange);
    ws.value?.removeEventListener('error', handleStateChange);
    ws.value?.close();
});

<template>
    <div>{{ wsReadyState }}</div>
</template>

方法2：直接在事件回调中手动触发更新 #

如果不需要单独维护状态变量，也可以直接在事件回调中手动触发Vue的更新：

import { ref, onUnmounted, triggerRef } from 'vue';

const ws = ref(null);
ws.value = new WebSocket('url');

const updateView = () => {
    triggerRef(ws); // 手动触发依赖于ws的视图更新
};

ws.value.addEventListener('open', updateView);
ws.value.addEventListener('close', updateView);
ws.value.addEventListener('error', updateView);

onUnmounted(() => {
    ws.value?.removeEventListener('open', updateView);
    ws.value?.removeEventListener('close', updateView);
    ws.value?.removeEventListener('error', updateView);
    ws.value?.close();
});

<template>
    <div>{{ ws.readyState }}</div>
</template>

方法3：封装WebSocket为响应式工具（复用场景） #

如果多个组件需要使用，可以封装成组合式函数：

import { ref, onUnmounted } from 'vue';

export function useWebSocket(url) {
    const ws = ref(null);
    const readyState = ref(0);

    const initWebSocket = () => {
        ws.value = new WebSocket(url);
        
        const updateState = () => {
            readyState.value = ws.value.readyState;
        };

        ws.value.addEventListener('open', updateState);
        ws.value.addEventListener('close', updateState);
        ws.value.addEventListener('error', updateState);
    };

    initWebSocket();

    onUnmounted(() => {
        ws.value?.close();
    });

    return { ws, readyState };
}

组件中使用：

import { useWebSocket } from '@/hooks/useWebSocket';

const { readyState } = useWebSocket('url');

<template>
    <div>{{ readyState }}</div>
</template>

内容的提问来源于stack exchange，提问作者zhouying wu