vue3中封装使用WebSocket

在vue3+ts中使用websocket进行通信功能，主要实现 WebSocket 的连接、断开、重连、发送消息等功能，并且通过 eventBus 实现了消息的跨组件通信。

1. 需要先执行通信下载指令：npm install websocket。
2. 组件通信需要安装eventbus进行。

EventBus安装使用步骤

1.在vue3+ts中，移除了内置的eventBus，当前展示安装和使用 mitt 的步骤。

下载指令：npm install mitt

2.创建 EventBus.ts文件，用于初始化 mitt 并导出事件总线实例。

import mitt, { Emitter } from 'mitt';

// 定义事件类型
type Events = {
  socketMsg: string; // 自定义事件名称和数据类型
  // 可以添加更多事件类型
};

// 创建事件总线实例
const eventBus: Emitter<Events> = mitt<Events>();

export default eventBus;

3.使用EventBus，页面使用包含发送，接收，移除。使用生命周期w为onMounted 和 onUnmounted

// ts文件引入
import eventBus from './eventBus';

// 发送事件
eventBus.emit('socketMsg', 'Hello from WebSocket');

// 监听事件
eventBus.on('socketMsg', (message) => {
  console.log('Received message:', message);
});

// 移除事件监听
eventBus.off('socketMsg', handler);

执行完eventBus和websocket安装指令后，就可以进行socket的全局工具函数封装。

封装全局工具函数

import { ref } from 'vue';
import eventBus from '../eventBus';

// 标志位区分是手动断开还是意外断开
let isManualDisconnect = false;

export const useWebSocket = {
  socket: null as WebSocket | null, // 声明
  isConnected: ref(false), // 判断当前连接状态
  reconnectAttempts: 0, // 默认重连数
  maxReconnectAttempts: 5, // 最大重连数
  reconnectInterval: 3000, // 重连间隔

  // 连接 WebSocket 服务器,监听相关事件
  connect(url: string) {
    if (this.socket) {
      return
    }
    this.socket = new WebSocket(url)

    this.socket.onopen = () => {
      this.isConnected.value = true;
      this.reconnectAttempts = 0;
      console.log('WebSocket连接已打开');
    };

    this.socket.onclose = () => {
      this.isConnected.value = false;
      console.log('WebSocket连接已关闭');
      if (!isManualDisconnect) {
        this.reconnect();
      }
    };

    this.socket.onerror = (error: Event) => {
      console.error('WebSocket error:', error);
    };

    this.socket.onmessage = (event: MessageEvent) => {
      console.log('收到消息:', event.data);
      eventBus.emit('socketMsg', event.data)
    };
  },
  // 关闭链接
  disconnect() {
    isManualDisconnect = true
    if (this.socket) {
      this.socket.close();
      this.socket = null;
      this.isConnected.value = false;
    }
  },
  // 尝试重连
  reconnect() {
    if (isManualDisconnect) {
      console.log('Manual disconnect, no reconnect needed');
      return;
    }
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      this.reconnectAttempts++;
      console.log(`Reconnecting attempt ${this.reconnectAttempts}`);
      setTimeout(() => {
        this.connect(this.socket?.url || '');
      }, this.reconnectInterval);
    } else {
      console.error('Max reconnect attempts reached');
    }
  },
  // 发送消息
  sendMessage(message: string) {
    if (this.isConnected.value && this.socket) {
      this.socket.send(message);
      console.log('WebSocket message sent:', message);
    } else {
      console.error('WebSocket is not connected');
    }
  },
}

上述步骤完成后即可再组件内进行组件实时通信。

// html引用监听
<script setup lang="ts">
import { useWebSocket } from "./utils/useWebsocket";

onMounted(() => {
  // 自定义连接事件、位置、url
  useWebSocket.connect(`ws://192.168.1.41:8080/manage/conn`);

  // 接收eventbus传参的信息，并可手动关闭连接或者发送信息文本。
  eventBus.on("socketMsg", async (item: any) => {
    // 手动关闭连接
    useWebSocket.disconnect();

    // 发送信息
    useWebSocket.sendMessage(`发送信息文本`);
  })
})

// 离开页面销毁eventbus事件
onUnmounted(() => {
  eventBus.off("socketMsg");
});
</script>