当前位置：首页 > news >正文

Vue 3使用 Socket

news 来源：原创 2025/6/12 2:38:47

在 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. 组件中使用

<template>
  <div>
    <button @click="connect">连接</button>
    <input v-model="message" @keyup.enter="send" placeholder="输入消息" />
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useWebSocket } from './composables/useWebSocket'

const { messages, connect, sendMessage } = useWebSocket('ws://localhost:8080')
const message = ref('')

const send = () => {
  sendMessage(message.value)
  message.value = ''
}
</script>

✅ 使用 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. 在组件中使用

<script setup lang="ts">
import { ref } from 'vue'
import { useSocketIO } from './composables/useSocketIO'

const { messages, sendMessage } = useSocketIO('http://localhost:3000')
const message = ref('')

const send = () => {
  if (message.value) {
    sendMessage(message.value)
    message.value = ''
  }
}
</script>