基于Vue3封装一个好用的Websocket

女爷i 2023-09-25 23:33 9阅读 0赞

在Vue3中使用Websocket可以让我们轻松地实现实时数据传输。为了方便使用，我们可以封装一个好用的Websocket类。

### 安装依赖 ###

首先我们需要安装 `ws` 库来处理Websocket连接，使用以下命令进行安装：

npm install ws --save

### 封装Websocket类 ###

我们可以新建一个 `websocket.js` 文件，在其中定义一个 `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;

以上代码中，我们定义了一个 `Websocket` 类，其中包含了 `connect` 方法用于连接Websocket服务器， `send` 方法用于发送数据， `close` 方法用于关闭连接。

### 在Vue3中使用Websocket ###

在Vue3中，我们可以将Websocket类封装成一个Vue插件，以便全局使用。示例代码如下：

import Websocket from './websocket.js';
    
    const MyPlugin = {
        
      install(Vue) {
        
        Vue.prototype.$websocket = new Websocket('ws://localhost:8080');
      },
    };
    
    export default MyPlugin;

在 `main.js` 文件中我们可以使用 `Vue.use` 方法来使用插件：

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');

现在我们就可以在Vue3组件中使用 `$websocket` 对象，例如：

export default {
        
      mounted() {
        
        this.$websocket.connect();
      },
      methods: {
        
        sendMessage(message) {
        
          this.$websocket.send(message);
        },
      },
    };

### 总结 ###

通过封装Websocket类，我们可以在Vue3中轻松使用Websocket进行实时数据传输。希望本文能对大家有所帮助！