在Vue 3中封装一个好用的WebSocket库，可以创建一个可复用的WebSocket连接管理类。以下是一个简单的示例：
// WebSocketManager.js
import { ref } from 'vue';
export default class WebSocketManager {
constructor(url) {
this.url = url;
this.socket = ref(null);
this.isConnected = ref(false);
this.connect();
}
connect() {
this.socket.value = new WebSocket(this.url);
this.socket.value.onopen = () => {
this.isConnected.value = true;
console.log('WebSocket connected');
};
this.socket.value.onerror = (error) => {
console.error('WebSocket error:', error);
};
this.socket.value.onmessage = (message) => {
console.log('Received message:', message.data);
// Handle incoming messages here
};
this.socket.value.onclose = () => {
this.isConnected.value = false;
console.log('WebSocket disconnected');
};
}
send(message) {
if (this.isConnected.value) {
this.socket.value.send(message);
} else {
console.error('WebSocket is not connected');
}
}
close() {
if (this.socket.value) {
this.socket.value.close();
}
}
}使用该封装：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import WebSocketManager from './WebSocketManager';
const app = createApp(App);
const webSocketManager = new WebSocketManager('wss://your-websocket-url');
app.config.globalProperties.$webSocketManager = webSocketManager;
app.mount('#app');在组件中使用：
<script setup>
import { ref } from 'vue';
const message = ref('');
const $webSocketManager = app.config.globalProperties.$webSocketManager;
function sendMessage() {
$webSocketManager.send(message.value);
}
</script>
<template>
<input v-model="message" placeholder="Type your message">
<button @click="sendMessage">Send</button>
</template>这个封装提供了一个简单的WebSocket管理类，它处理连接、消息发送和关闭。它也提供了一个例子，展示了如何在Vue应用中使用该封装。