vue3 Typescript 全局WebSocket

在Vue3中使用Typescript来创建全局WebSocket连接，可以按照以下步骤进行：

首先，安装websocket库，可以使用npm或者yarn进行安装：

npm install websocket

在Vue3的项目中创建一个WebSocketService.ts文件，用于处理WebSocket连接的逻辑。

import { reactive } from 'vue';
import WebSocket from 'websocket';

const WebSocketService = reactive({
  ws: null,
  isConnected: false,
  connect() {
    this.ws = new WebSocket('ws://your-websocket-url'); // 替换成你的WebSocket服务器URL
    this.ws.onopen = () => {
      this.isConnected = true;
      console.log('WebSocket连接已打开');
    };

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

    this.ws.onclose = () => {
      this.isConnected = false;
      console.log('WebSocket连接已关闭');
      // 可以在此处进行重新连接的逻辑
    };
  },
  send(message: string) {
    if (this.ws && this.isConnected) {
      this.ws.send(message);
    }
  },
  close() {
    if (this.ws && this.isConnected) {
      this.ws.close();
    }
  },
});

export default WebSocketService;

在需要使用WebSocket的组件中，导入WebSocketService并进行连接、发送消息、关闭连接等操作。

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

<script lang="ts">
import { defineComponent } from 'vue';
import WebSocketService from './WebSocketService.ts';

export default defineComponent({
  methods: {
    connect() {
      WebSocketService.connect();
    },
    sendMessage() {
      WebSocketService.send('Hello WebSocket!');
    },
    close() {
      WebSocketService.close();
    },
  },
});
</script>

这样，你就可以在Vue3中使用Typescript创建全局WebSocket连接了。注意替换WebSocketService.ts中的WebSocket服务器URL为你实际使用的URL