在Vue3中(zhōng)使用(yòng)Websocket可(kě)以讓我們輕松地實現實時數據傳輸。為(wèi)了方便使用(yòng)，我們可(kě)以封裝(zhuāng)一個好用(yòng)的Websocket類。
安(ān)裝(zhuāng)依賴
首先我們需要安(ān)裝(zhuāng) ws 庫來處理(lǐ)Websocket連接，使用(yòng)以下命令進行安(ān)裝(zhuāng)：
npm install ws --save
封裝(zhuāng)Websocket類
我們可(kě)以新(xīn)建一個 websocket.js 文(wén)件，在其中(zhōng)定義一個 Websocket 類，代碼如下：
import WebSocket from 'ws';
class Websocket {
constructor(url, options = {}) {
this.url = url;
this.options = options;
this.ws = null;
}
connect() {
this.ws = new WebSocket(this.url, this.options);
this.ws.onopen = () => {
console.log('Websocket connection opened.');
};
this.ws.onmessage = (event) => {
console.log('Websocket message received.', event.data);
};
this.ws.onerror = (error) => {
console.error('Websocket error occurred.', error);
};
this.ws.onclose = () => {
console.log('Websocket connection closed.');
};
}
send(data) {
if (this.ws.readyState === WebSocket.OPEN) {
this.ws.send(data);
} else {
console.error('Websocket connection not open.');
}
}
close() {
this.ws.close();
}
}
export default Websocket;
以上代碼中(zhōng)，我們定義了一個 Websocket 類，其中(zhōng)包含了 connect 方法用(yòng)于連接Websocket服務(wù)器， send 方法用(yòng)于發送數據， close 方法用(yòng)于關閉連接。
在Vue3中(zhōng)使用(yòng)Websocket
在Vue3中(zhōng)，我們可(kě)以将Websocket類封裝(zhuāng)成一個Vue插件，以便全局使用(yòng)。示例代碼如下：
import Websocket from './websocket.js';
const MyPlugin = {
install(Vue) {
Vue.prototype.$websocket = new Websocket('ws://localhost:8080');
},
};
export default MyPlugin;
在 main.js 文(wén)件中(zhōng)我們可(kě)以使用(yòng) Vue.use 方法來使用(yòng)插件：
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './my-plugin.js';
const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');
現在我們就可(kě)以在Vue3組件中(zhōng)使用(yòng) $websocket 對象，例如：
export default {
mounted() {
this.$websocket.connect();
},
methods: {
sendMessage(message) {
this.$websocket.send(message);
},
},
};
總結
通過封裝(zhuāng)Websocket類，我們可(kě)以在Vue3中(zhōng)輕松使用(yòng)Websocket進行實時數據傳輸。
