Vue 3项目中使用WebSocket下载文件

1. 安装WebSocket库

如果你还没有安装WebSocket客户端库，可以选择一个，比如socket.io-client或者直接使用原生WebSocket API。对于更高级的功能或简化集成，可以考虑使用像vue-native-websocket这样的库。这里我们以原生WebSocket为例，因为大多数现代浏览器都内置了对WebSocket的支持。

2. 创建WebSocket连接

在Vue 3组件或一个独立的WebSocket服务模块中创建WebSocket连接。

// websocket.service.js
import { ref } from 'vue';

export function useWebSocket(url) {
  const socket = ref(null);
  let isConnecting = ref(false);

  async function connect() {
    if (isConnecting.value || socket.value) return;
    isConnecting.value = true;

    socket.value = new WebSocket(url);

    socket.value.addEventListener('open', () => {
      console.log('WebSocket connected');
      isConnecting.value = false;
    });

    socket.value.addEventListener('message', (event) => {
      handleMessage(event.data);
    });

    socket.value.addEventListener('error', (error) => {
      console.error('WebSocket error:', error);
      socket.value.close();
    });

    socket.value.addEventListener('close', () => {
      console.log('WebSocket disconnected');
      socket.value = null;
    });
  }

  function handleMessage(message) {
    // 处理接收到的消息，这里假设服务器发送文件数据或下载指令
    if (message.startsWith('file:')) {
      downloadFile(message.substring(5)); // 假设消息内容为 "file:<fileData>"
    }
  }

  function downloadFile(fileData) {
    // 将接收到的文件数据转换为Blob，然后创建URL供下载
    const blob = new Blob([fileData], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'downloadedFile.dat'; // 自定义下载文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }

  return { connect };
}

3. 在Vue组件中使用WebSocket服务

在需要使用WebSocket下载文件的Vue组件中，导入并使用上述创建的WebSocket服务

<template>
  <button @click="connectWebSocket">连接WebSocket并下载文件</button>
</template>

<script setup>
import { onMounted } from 'vue';
import { useWebSocket } from './websocket.service';

const { connect } = useWebSocket('wss://your-websocket-server-url');

onMounted(() => {
  connect(); // 可以在组件挂载时自动连接，也可以通过按钮触发
});
</script>

注意事项

• 确保WebSocket服务器已经设置好，并能正确发送文件数据。
• 文件传输的具体协议（如文件头部包含文件类型、大小等元数据）需要与服务器端约定。
• 上述代码中的downloadFile函数假设文件数据直接作为字符串发送。实际情况中，文件可能会被分块发送，需要在客户端重新组装。
• 考虑到安全性，直接从WebSocket接收并执行下载可能有风险，确保采取适当的安全措施。