基于Vue3封装一个好用的Websocket

基于Vue3封装一个好用的Websocket 2023-07-20 796

在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);
    },
  },
};