Vue 3使用 Socket

在 Vue 3 中使用 Socket（如 WebSocket 或基于 WebSocket 的库比如 Socket.IO）可以通过组合式 API（Composition API）来实现得更清晰、模块化。下面我给你展示一个完整的例子，包括使用原生 WebSocket 和使用 Socket.IO 的方式（你可以根据实际情况选择）。

---

✅ 使用原生 WebSocket 的方式

1. 建立 socket 封装（推荐封装成 composable）

// composables/useWebSocket.ts
import { ref, onUnmounted } from 'vue'

export function useWebSocket(url: string) {
  const socket = ref<WebSocket | null>(null)
  const messages = ref<string[]>([])

  const connect = () => {
    socket.value = new WebSocket(url)

    socket.value.onopen = () => {
      console.log('WebSocket connected')
    }

    socket.value.onmessage = (event) => {
      messages.value.push(event.data)
    }

    socket.value.onclose = () => {
      console.log('WebSocket closed')
    }

    socket.value.onerror = (error) => {
      console.error('WebSocket error', error)
    }
  }

  const sendMessage = (message: string) => {
    if (socket.value?.readyState === WebSocket.OPEN) {
      socket.value.send(message)
    }
  }

  onUnmounted(() => {
    socket.value?.close()
  })

  return {
    messages,
    connect,
    sendMessage,
  }
}

2. 组件中使用

---

✅ 使用 Socket.IO 的方式

1. 安装依赖

npm install socket.io-client

2. 建立 socket composable

// composables/useSocketIO.ts
import { io, Socket } from 'socket.io-client'
import { ref, onUnmounted } from 'vue'

export function useSocketIO(url: string) {
  const socket: Socket = io(url)
  const messages = ref<string[]>([])

  socket.on('connect', () => {
    console.log('Socket.IO connected')
  })

  socket.on('message', (msg: string) => {
    messages.value.push(msg)
  })

  const sendMessage = (msg: string) => {
    socket.emit('message', msg)
  }

  onUnmounted(() => {
    socket.disconnect()
  })

  return {
    messages,
    sendMessage,
  }
}

3. 在组件中使用