vue3 webSocket 封裝及使用

封裝

import { ref, onUnmounted } from 'vue';
interface SocketOptions {heartbeatInterval?: number;reconnectInterval?: number;maxReconnectAttempts?: number;
}class Socket {url: string;ws: WebSocket | null = null;opts: SocketOptions;reconnectAttempts: number = 0;listeners: { [key: string]: Function[] } = {};heartbeatInterval: number | null = null;constructor(url: string, opts: SocketOptions = {}) {this.url = url;this.opts = {heartbeatInterval: 30000, //心跳reconnectInterval: 5000, // 重連時間maxReconnectAttempts: 5, //重新連接次數...opts};this.init();}init() {this.ws = new WebSocket(this.url);this.ws.onopen = this.onOpen.bind(this);this.ws.onmessage = this.onMessage.bind(this);this.ws.onerror = this.onError.bind(this);this.ws.onclose = this.onClose.bind(this);}onOpen(event: Event) {console.log('WebSocket opened:', event);this.reconnectAttempts = 0;this.startHeartbeat();this.emit('open', event);}onMessage(event: MessageEvent) {console.log('WebSocket message received:', event.data);this.emit('message', event.data);}onError(event: Event) {console.error('WebSocket error:', event);this.emit('error', event);}onClose(event: CloseEvent) {console.log('WebSocket closed:', event);this.stopHeartbeat();this.emit('close', event);if (this.reconnectAttempts < this.opts.maxReconnectAttempts!) {setTimeout(() => {this.reconnectAttempts++;this.init();}, this.opts.reconnectInterval);}}startHeartbeat() {if (!this.opts.heartbeatInterval) return;this.heartbeatInterval = window.setInterval(() => {if (this.ws?.readyState === WebSocket.OPEN) {this.ws.send('ping');}}, this.opts.heartbeatInterval);}stopHeartbeat() {if (this.heartbeatInterval) {clearInterval(this.heartbeatInterval);this.heartbeatInterval = null;}}send(data: string) {console.error('給socket發送消息============>',data)if (this.ws?.readyState === WebSocket.OPEN) {this.ws.send(data);} else {console.error('WebSocket is not open. Cannot send:', data);}}on(event: string, callback: Function) {if (!this.listeners[event]) {this.listeners[event] = [];}this.listeners[event].push(callback);}off(event: string) {if (this.listeners[event]) {delete this.listeners[event];}}emit(event: string, data: any) {this.listeners[event]?.forEach(callback => callback(data));}
}export function useSocket(url: string, opts?: SocketOptions) {const socket = new Socket(url, opts);onUnmounted(() => {socket.off('open');socket.off('message');socket.off('error');socket.off('close');});return {socket,send: socket.send.bind(socket),on: socket.on.bind(socket),off: socket.off.bind(socket)};
}

使用

import {useSocket} from './useSocket'
/*** useSocket String 第一個參數 socket地址* 第二個參數 Object heartbeatInterval：心跳；reconnectInterval：重連間隔時間；maxReconnectAttempts：最大重連次數*/
const {socket, send, on, off} = useSocket('ws://127.0.0.1:5000',{});