vue3封装websocket请求接口

在 Vue 3 中，你可以使用第三方库如 `vue-websocket` 或者原生的 WebSocket API 来封装WebSocket请求接口。以下是使用 `vue-websocket` 的简单示例：

首先，你需要安装这个库：

npm install vue-websocket

然后，在你的 Vue 组件中导入并创建一个实例：

import { useWebsocket } from 'vue-websocket'

export default {
  setup() {
    // 创建一个名为 $ws 的局部变量来存储WebSocket实例
    const { ws } = useWebsocket({
      url: 'wss://your-websocket-url.com', // 替换为你的WebSocket服务器地址
      onConnect: () => console.log('连接成功'),
      onClose: () => console.log('连接关闭'),
      onError: (error) => console.error('错误:', error),
    })

    // 定义方法来发送和接收消息
    const sendMessage = async (message) => {
      await ws.send(message)
    }

    const receiveMessage = () => {
      ws.onmessage = (event) => {
        console.log('接收到的消息:', event.data)
      }
    }

    return {
      sendMessage,
      receiveMessage,
      ws // 返回ws实例以便外部可以使用
    }
  },
}

在模板中，你可以像操作其他Vue组件一样使用这些方法：

<template>
  <button @click="sendMessage('Hello, Server!')">发送消息</button>
</template>