面试题：Vue项目中WebSocket如何优雅地处理多实例和连接复用问题

创建WebSocket管理类

首先，创建一个JavaScript类来管理WebSocket连接。例如：

class WebSocketManager {
    constructor(url) {
        this.url = url;
        this.socket = null;
        this.listeners = {};
    }
    connect() {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            return;
        }
        this.socket = new WebSocket(this.url);
        this.socket.onopen = () => {
            console.log('WebSocket连接已打开');
        };
        this.socket.onmessage = (event) => {
            const { type } = JSON.parse(event.data);
            if (this.listeners[type]) {
                this.listeners[type].forEach(listener => listener(event.data));
            }
        };
        this.socket.onclose = () => {
            console.log('WebSocket连接已关闭');
        };
        this.socket.onerror = (error) => {
            console.log('WebSocket连接出错:', error);
        };
    }
    send(data) {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify(data));
        }
    }
    addListener(type, listener) {
        if (!this.listeners[type]) {
            this.listeners[type] = [];
        }
        this.listeners[type].push(listener);
    }
    removeListener(type, listener) {
        if (this.listeners[type]) {
            this.listeners[type] = this.listeners[type].filter(l => l!== listener);
        }
    }
}

在Vue项目中使用管理类

在Vue项目的入口文件（例如main.js）中，创建WebSocket管理类的实例，并将其挂载到Vue的原型上，以便在各个组件中方便访问。

import Vue from 'vue';
import App from './App.vue';
const socketManager = new WebSocketManager('ws://your - server - url');
socketManager.connect();
Vue.prototype.$socketManager = socketManager;
new Vue({
    render: h => h(App)
}).$mount('#app');

不同组件处理不同需求

发送消息：在组件中，通过this.$socketManager访问实例并发送消息。例如：

<template>
    <div>
        <button @click="sendMessage">发送消息</button>
    </div>
</template>
<script>
export default {
    methods: {
        sendMessage() {
            this.$socketManager.send({ type: 'custom - message - type', data: 'Hello, WebSocket!' });
        }
    }
};
</script>

处理消息：组件可以根据自身需求添加不同类型消息的监听器。例如：

<template>
    <div>
        <p>接收到的消息: {{ receivedMessage }}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            receivedMessage: ''
        };
    },
    mounted() {
        const listener = (data) => {
            this.receivedMessage = data;
        };
        this.$socketManager.addListener('custom - message - type', listener);
        this.$once('hook:beforeDestroy', () => {
            this.$socketManager.removeListener('custom - message - type', listener);
        });
    }
};
</script>

通过上述方式，可以实现WebSocket连接的复用，并且不同组件可以根据自身需求处理不同的消息逻辑。同时，在组件销毁时移除监听器，避免内存泄漏。

面试题：Vue项目中WebSocket如何优雅地处理多实例和连接复用问题

知识考点

面试题答案