vue3连接websocket代码

在Vue 3中连接WebSocket的代码如下：

首先，你需要在组件中引入WebSocket库：

import { ref } from 'vue'
import { io } from 'socket.io-client' // 引入socket.io-client库

export default {
  setup() {
    const socket = io('ws://localhost:3000') // 这里的URL是你的WebSocket服务器地址

    // 创建一个响应式变量来保存收到的消息
    const receivedMessage = ref('')

    // 监听连接成功事件
    socket.on('connect', () => {
      console.log('Connected to WebSocket server')
    })

    // 监听收到消息事件
    socket.on('message', (message) => {
      receivedMessage.value = message
    })

    // 发送消息的方法
    const sendMessage = (message) => {
      socket.emit('message', message)
    }

    return {
      receivedMessage,
      sendMessage
    }
  }
}

以上代码假设你已经在本地启动了一个WebSocket服务器，地址是`ws://localhost:3000`。你可以根据实际情况修改URL。

在模板中，你可以使用`receivedMessage`来显示收到的消息，使用`sendMessage`来发送消息。例如：

<template>
  <div>
    <p>Received message: {{ receivedMessage }}</p>
    <input type="text" v-model="message" />
    <button @click="sendMessage(message)">Send Message</button>
  </div>
</template>

这样，你就可以在Vue 3中连接WebSocket并进行消息的收发了。记得适配你自己的后端WebSocket服务器的事件和消息格式。