npm create vue@latest
# 選擇TypeScript、Router、Pinia

npm install socket.io-client @types/socket.io-client echarts element-plus

// server/ws-server.js
const express = require('express')
const { createServer } = require('http')
const { Server } = require('socket.io')

const app = express()
const httpServer = createServer(app)
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST"]
  }
})

// 連接管理
const activeConnections = new Map()

io.on('connection', (socket) => {
  console.log(`客戶端連接: ${socket.id}`)
  
  // 身份驗(yàn)證
  socket.on('auth', (token) => {
    const userId = verifyToken(token) // 鑒權(quán)邏輯
    activeConnections.set(userId, socket)
  })

  // 斷開處理
  socket.on('disconnect', () => {
    activeConnections.delete(socket.userId)
  })
})

httpServer.listen(3001)

// src/utils/socket.ts
import { io, Socket } from 'socket.io-client'

class SocketService {
  private static instance: SocketService
  private socket: Socket | null = null
  
  constructor() {
    this.initSocket()
  }

  public static getInstance(): SocketService {
    if (!SocketService.instance) {
      SocketService.instance = new SocketService()
    }
    return SocketService.instance
  }

  private initSocket(): void {
    this.socket = io('http://localhost:3001', {
      transports: ['websocket'],
      auth: {
        token: localStorage.getItem('token')
      }
    })

    this.socket.on('connect', () => {
      console.log('WebSocket連接成功')
    })

    this.socket.on('exception', (error) => {
      console.error('WebSocket錯(cuò)誤:', error)
    })
  }

  // 監(jiān)聽傳輸事件
  public onFileProgress(callback: (data: TransferData) => void): void {
    this.socket?.on('file-progress', callback)
  }

  // 發(fā)送控制命令
  public sendControl(command: ControlCommand): void {
    this.socket?.emit('transfer-control', command)
  }
}

export const socket = SocketService.getInstance()

<template>
  <el-table :data="tasks" style="width: 100%">
    <el-table-column prop="fileName" label="文件名" />
    <el-table-column label="進(jìn)度">
      <template #default="{ row }">
        <el-progress 
          :percentage="row.progress" 
          :status="getStatus(row)"
        />
      </template>
    </el-table-column>
    <el-table-column label="速度">
      <template #default="{ row }">
        {{ formatSpeed(row.speed) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button @click="handlePause(row.id)">暫停</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts

onMounted(() => {
  chart = echarts.init(chartRef.value)
  
  const option = {
    xAxis: { type: 'time' },
    yAxis: { name: '速度 (MB/s)' },
    series: [{
      data: [],
      type: 'line',
      smooth: true
    }]
  }
  
  chart.setOption(option)
})

// 更新圖表數(shù)據(jù)
const updateChart = (newData: SpeedPoint[]) => {
  chart.setOption({
    series: [{
      data: newData
    }]
  })
}
</script>

class EnhancedFileUploader {
  private ws: WebSocket
  private file: File
  private chunkSize: number
  private uploadedBytes = 0
  
  constructor(file: File) {
    this.file = file
    this.chunkSize = this.calculateChunkSize()
    this.ws = new WebSocket('ws://localhost:3001/upload')
  }

  private calculateChunkSize(): number {
    // 根據(jù)網(wǎng)絡(luò)速度動(dòng)態(tài)調(diào)整分片大小
    const baseSize = 1024 * 1024 // 1MB
    return navigator.connection?.downlink 
      ? baseSize * Math.floor(navigator.connection.downlink / 5)
      : baseSize
  }

  async startUpload() {
    const reader = new FileReader()
    let offset = 0
    
    const readChunk = () => {
      const chunk = this.file.slice(offset, offset + this.chunkSize)
      reader.readAsArrayBuffer(chunk)
    }

    reader.onload = (e) => {
      if (e.target?.result) {
        this.ws.send(e.target.result)
        this.uploadedBytes += this.chunkSize
        this.reportProgress()
        
        if (offset < this.file.size) {
          offset += this.chunkSize
          readChunk()
        }
      }
    }

    readChunk()
  }

  private reportProgress() {
    const progress = (this.uploadedBytes / this.file.size) * 100
    const speed = this.calculateSpeed()
    
    socket.sendControl({
      type: 'progress',
      data: {
        fileId: this.file.name,
        progress: Number(progress.toFixed(1)),
        speed: speed,
        remaining: this.calculateRemainingTime(speed)
      }
    })
  }
}

class SpeedCalculator {
  private records: Array<{ time: number; bytes: number }> = []
  
  update(bytes: number): void {
    this.records.push({
      time: Date.now(),
      bytes: bytes
    })
    // 保留最近10秒記錄
    if (this.records.length > 10) {
      this.records.shift()
    }
  }

  get currentSpeed(): number {
    if (this.records.length < 2) return 0
    
    const first = this.records[0]
    const last = this.records[this.records.length - 1]
    const timeDiff = (last.time - first.time) / 1000
    const bytesDiff = last.bytes - first.bytes
    
    return bytesDiff / timeDiff // bytes/sec
  }
}

// 文件傳輸事件處理
io.on('connection', (socket) => {
  socket.on('file-upload', async (chunk, ack) => {
    try {
      const filePath = path.join(uploadDir, fileName)
      await fs.promises.appendFile(filePath, Buffer.from(chunk))
      
      ack({
        status: 'success',
        received: chunk.length
      })
      
      // 廣播進(jìn)度更新
      io.emit('file-progress', {
        fileId: fileName,
        progress: calculateProgress(),
        speed: currentSpeed
      })
    } catch (error) {
      ack({ status: 'error', message: error.message })
    }
  })

  // 傳輸控制命令
  socket.on('transfer-control', (command) => {
    switch (command.type) {
      case 'pause':
        handlePause(command.fileId)
        break
      case 'resume':
        handleResume(command.fileId)
        break
      case 'cancel':
        handleCancel(command.fileId)
        break
    }
  })
})

class TransferManager {
  constructor() {
    this.transfers = new Map()
  }

  addTransfer(fileId, fileSize) {
    this.transfers.set(fileId, {
      startTime: Date.now(),
      bytesTransferred: 0,
      status: 'uploading'
    })
  }

  updateProgress(fileId, bytes) {
    const transfer = this.transfers.get(fileId)
    transfer.bytesTransferred += bytes
    transfer.lastUpdate = Date.now()
  }

  getTransferStatus(fileId) {
    return this.transfers.get(fileId) || null
  }
}

// 前端重連邏輯
class ReconnectManager {
  private retries = 0
  private maxRetries = 5
  
  constructor(private socket: Socket) {
    socket.on('disconnect', () => {
      this.scheduleReconnect()
    })
  }

  private scheduleReconnect() {
    if (this.retries < this.maxRetries) {
      setTimeout(() => {
        this.socket.connect()
        this.retries++
      }, Math.min(1000 * 2 ** this.retries, 30000))
    }
  }
}

class BandwidthThrottle {
  private tokens: number
  private lastFill: number
  
  constructor(
    private capacity: number, // 帶寬容量（bytes/sec）
    private interval = 1000 // 令牌填充間隔
  ) {
    this.tokens = capacity
    this.lastFill = Date.now()
  }

  async consume(bytes: number): Promise<void> {
    const now = Date.now()
    const elapsed = now - this.lastFill
    
    if (elapsed > this.interval) {
      this.tokens = this.capacity
      this.lastFill = now
    }

    if (this.tokens >= bytes) {
      this.tokens -= bytes
      return
    }
    
    const waitTime = (bytes - this.tokens) / this.capacity * 1000
    await new Promise(resolve => setTimeout(resolve, waitTime))
    this.tokens = this.capacity - (bytes - this.tokens)
    this.lastFill = Date.now()
  }
}

class NetworkMonitor {
  private latencyHistory: number[] = []
  private packetLossCount = 0
  
  start() {
    setInterval(async () => {
      const latency = await this.measureLatency()
      this.latencyHistory.push(latency)
      
      if (latency > 1000) {
        this.emit('high-latency', latency)
      }
    }, 5000)
  }

  private measureLatency(): Promise<number> {
    return new Promise((resolve) => {
      const start = Date.now()
      socket.emit('ping', () => {
        resolve(Date.now() - start)
      })
    })
  }
}

// 服務(wù)端中間件
const authMiddleware = (socket, next) => {
  try {
    const token = socket.handshake.auth.token
    const decoded = jwt.verify(token, SECRET_KEY)
    socket.user = decoded
    next()
  } catch (error) {
    next(new Error('認(rèn)證失敗'))
  }
}

const limiter = rateLimit({
  windowMs: 60 * 1000, // 1分鐘
  max: 100 // 最大連接數(shù)
})

// 使用MessagePack替代JSON
socket.emit('binary-data', msgpack.encode(largeData))

// 服務(wù)端設(shè)置
io.set('heartbeat interval', 5000)
io.set('heartbeat timeout', 10000)

# 使用Redis適配器
npm install @socket.io/redis-adapter

# WebSocket代理配置
map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    listen 443 ssl;
    server_name example.com;

    location /socket.io/ {
        proxy_pass http://ws_backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $host;
    }
}