js版本：

// src/services/WebSocketService.js
import { ref } from 'vue';

class WebSocketService {
  constructor(url, options = {}) {
    this.url = url;
    this.options = options;
    this.connection = null;
    this.isConnected = ref(false);
    this.reconnectAttempts = 0;
    this.reconnectInterval = options.reconnectInterval || 5000; // 重连间隔时间，默认5秒
    this.maxReconnectAttempts = options.maxReconnectAttempts || Infinity; // 最大重连次数，默认无限
  }

  connect() {
    this.connection = new WebSocket(this.url);
    this.connection.onopen = () => {
      this.isConnected.value = true;
      this.reconnectAttempts = 0; // 重置重连次数
      console.log('WebSocket connected');
      if (this.options.onOpen) {
        this.options.onOpen();
      }
    };

    this.connection.onmessage = (event) => {
      console.log('WebSocket message received:', event.data);
      if (this.options.onMessage) {
        this.options.onMessage(event.data);
      }
    };

    this.connection.onclose = (event) => {
      this.isConnected.value = false;
      console.log('WebSocket closed. Attempting to reconnect...', event.reason);
      if (this.options.onClose) {
        this.options.onClose(event.reason);
      }
      this.reconnect();
    };

    this.connection.onerror = (error) => {
      console.error('WebSocket error:', error);
      if (this.options.onError) {
        this.options.onError(error);
      }
    };
  }

  reconnect() {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      setTimeout(() => {
        this.reconnectAttempts++;
        console.log(`Attempting to reconnect... (Attempt ${this.reconnectAttempts})`);
        this.connect();
      }, this.reconnectInterval);
    } else {
      console.log('WebSocket failed to reconnect after maximum attempts');
      if (this.options.onFailureToReconnect) {
        this.options.onFailureToReconnect();
      }
    }
  }

  send(message) {
    if (this.connection && this.connection.readyState === WebSocket.OPEN) {
      this.connection.send(message);
    } else {
      console.error('WebSocket is not connected. Cannot send message.');
    }
  }

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

export default WebSocketService;

vue使用：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
    <p v-if="isConnected">WebSocket is connected.</p>
    <p v-else>WebSocket is disconnected.</p>
  </div>
</template>

<script>
import { onMounted, onUnmounted } from 'vue';
import WebSocketService from '@/services/WebSocketService';

export default {
  setup() {
    const wsService = new WebSocketService('wss://your-websocket-url', {
      onOpen: () => {
        console.log('WebSocket service connected');
      },
      onMessage: (message) => {
        console.log('Received message:', message);
      },
      onClose: (reason) => {
        console.log('WebSocket service closed:', reason);
      },
      onError: (error) => {
        console.error('WebSocket service error:', error);
      },
      onFailureToReconnect: () => {
        console.log('Failed to reconnect after maximum attempts');
      }
    });

    const isConnected = wsService.isConnected;

    onMounted(() => {
      wsService.connect();
    });

    onUnmounted(() => {
      wsService.close();
    });

    const sendMessage = () => {
      if (isConnected.value) {
        wsService.send('Hello, WebSocket!');
      } else {
        console.log('Cannot send message. WebSocket is not connected.');
      }
    };

    return {
      sendMessage,
      isConnected
    };
  }
};
</script>

TS版本：

// src/services/WebSocketService.ts
import { ref, Ref } from 'vue';

interface WebSocketOptions {
  onOpen?: () => void;
  onMessage?: (message: string) => void;
  onClose?: (reason: string) => void;
  onError?: (error: Error) => void;
  onFailureToReconnect?: () => void;
  reconnectInterval?: number;
  maxReconnectAttempts?: number;
}

class WebSocketService {
  private url: string;
  private options: WebSocketOptions;
  private connection: WebSocket | null = null;
  public isConnected: Ref<boolean> = ref(false);
  private reconnectAttempts: number = 0;
  private readonly reconnectInterval: number;
  private readonly maxReconnectAttempts: number;

  constructor(url: string, options: WebSocketOptions = {}) {
    this.url = url;
    this.options = options;
    this.reconnectInterval = options.reconnectInterval || 5000; // 重连间隔时间，默认5秒
    this.maxReconnectAttempts = options.maxReconnectAttempts || Infinity; // 最大重连次数，默认无限
  }

  connect(): void {
    this.connection = new WebSocket(this.url);
    this.connection.onopen = () => {
      this.isConnected.value = true;
      this.reconnectAttempts = 0; // 重置重连次数
      console.log('WebSocket连接 connected');
      this.options.onOpen?.();
    };

    this.connection.onmessage = (event: MessageEvent) => {
      console.log('WebSocket消息 message received:', event.data);
      this.options.onMessage?.(event.data as string);
    };

    this.connection.onclose = (event: CloseEvent) => {
      this.isConnected.value = false;
      console.log('WebSocket关闭 closed. Attempting to reconnect...', event.reason);
      this.options.onClose?.(event.reason);
      this.reconnect();
    };

    this.connection.onerror = (error: Event) => {
      console.error('WebSocket错误 error:', error);
      this.options.onError?.(error instanceof Error ? error : new Error('WebSocket error'));
    };
  }

  reconnect(): void {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      setTimeout(() => {
        this.reconnectAttempts++;
        console.log(`尝试连接Attempting to reconnect... (Attempt ${this.reconnectAttempts})`);
        this.connect();
      }, this.reconnectInterval);
    } else {
      console.log('WebSocket连接失败 failed to reconnect after maximum attempts');
      this.options.onFailureToReconnect?.();
    }
  }

  send(message: string): void {
    if (this.connection && this.connection.readyState === WebSocket.OPEN) {
      this.connection.send(message);
    } else {
      console.error('WebSocket没有连接 is not connected. Cannot send message.');
    }
  }

  close(): void {
    if (this.connection) {
      this.connection.close();
    }
  }
}

export default WebSocketService;

vue使用：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
    <p v-if="isConnected">WebSocket is connected.</p>
    <p v-else>WebSocket is disconnected.</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import WebSocketService from '@/services/WebSocketService';

export default defineComponent({
  setup() {
    const wsService = new WebSocketService('wss://your-websocket-url', {
      onOpen: () => {
        console.log('WebSocket service connected');
      },
      onMessage: (message: string) => {
        console.log('Received message:', message);
      },
      onClose: (reason: string) => {
        console.log('WebSocket service closed:', reason);
      },
      onError: (error: Error) => {
        console.error('WebSocket service error:', error);
      },
      onFailureToReconnect: () => {
        console.log('Failed to reconnect after maximum attempts');
      }
    });

    const isConnected = wsService.isConnected;

    onMounted(() => {
      wsService.connect();
    });

    onUnmounted(() => {
      wsService.close();
    });

    const sendMessage = () => {
      if (isConnected.value) {
        wsService.send('Hello, WebSocket!');
      } else {
        console.log('Cannot send message. WebSocket is not connected.');
      }
    };

    return {
      sendMessage,
      isConnected
    };
  }
});
</script>