websocket vue3封装

在Vue3中封装WebSocket可以通过定义一个Socket类来实现。该类负责与WebSocket服务器建立连接、发送和接收数据，以及管理心跳和重连逻辑。

以下是一个示例代码，演示了如何在Vue3中封装和使用WebSocket：

// socket.js

class Socket {
  constructor(url) {
    this.url = url;
    this.websocket = null;
  }

  connect() {
    this.websocket = new WebSocket(this.url);

    this.websocket.onopen = () => {
      console.log('WebSocket连接已建立');
      // 连接建立后可以执行一些初始化操作
    };

    this.websocket.onmessage = (event) => {
      console.log('收到消息:', event.data);
      // 处理接收到的消息
    };

    this.websocket.onclose = () => {
      console.log('WebSocket连接已关闭');
      // 可以执行一些重连逻辑
    };

    this.websocket.onerror = (error) => {
      console.error('WebSocket连接发生错误:', error);
      // 可以处理连接错误
    };
  }

  send(message) {
    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
      this.websocket.send(message);
    } else {
      console.error('WebSocket连接未建立或已关闭');
    }
  }

  close() {
    if (this.websocket) {
      this.websocket.close();
    }
  }
}

export default Socket;

在组件中使用封装的WebSocket：

<template>
  <div>
    <button @click="connect">连接WebSocket</button>
    <button @click="sendMessage">发送消息</button>
    <button @click="close">关闭WebSocket</button>
  </div>
</template>

<script>
import Socket from './socket.js';

export default {
  methods: {
    connect() {
      this.socket = new Socket('ws://localhost:8080'); // 替换为实际的WebSocket服务器地址
      this.socket.connect();
    },
    sendMessage() {
      this.socket.send('Hello WebSocket!');
    },
    close() {
      this.socket.close();
    }
  }
}
</script>

通过调用`connect`方法可以建立WebSocket连接，调用`sendMessage`方法可以发送消息，调用`close`方法可以关闭WebSocket连接。