websocket+vue3封装

以下是使用Vue3封装WebSocket的步骤：

1. 创建一个名为`socket.js`的文件，用于封装WebSocket的相关逻辑。
2. 在`socket.js`中，引入WebSocket并创建一个WebSocket实例。
3. 在WebSocket实例中，定义连接、发送和关闭等方法。
4. 在需要使用WebSocket的组件中，引入`socket.js`并调用WebSocket的相关方法。

下面是一个示例代码：

// socket.js

import { ref } from 'vue';

export default function useWebSocket(url) {
  const socket = ref(null);

  function connect() {
    socket.value = new WebSocket(url);

    socket.value.onopen = () => {
      console.log('WebSocket连接成功');
    };

    socket.value.onmessage = (event) => {
      console.log('收到消息:', event.data);
    };

    socket.value.onclose = () => {
      console.log('WebSocket连接关闭');
    };
  }

  function send(message) {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(message);
    } else {
      console.log('WebSocket连接未建立或已关闭');
    }
  }

  function close() {
    if (socket.value) {
      socket.value.close();
    }
  }

  return {
    connect,
    send,
    close,
  };
}

在需要使用WebSocket的组件中，可以按照以下方式调用：

// App.vue

<template>
  <div>
    <button @click="connect">连接WebSocket</button>
    <button @click="send('Hello')">发送消息</button>
    <button @click="close">关闭WebSocket</button>
  </div>
</template>

<script>
import useWebSocket from './socket.js';

export default {
  setup() {
    const { connect, send, close } = useWebSocket('ws://localhost:8080');

    return {
      connect,
      send,
      close,
    };
  },
};
</script>

请注意，上述示例中的`url`参数需要根据实际情况进行修改，以确保连接到正确的WebSocket服务器。