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

<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>