vue3 如何使用websocket

在Vue3中使用WebSocket，你可以按照以下步骤进行操作：

1. 首先，在Vue组件中引入WebSocket：

import { ref } from 'vue';

export default {
  setup() {
    const socket = ref(null);

    // ...

    return {
      socket,
      // ...
    };
  },
};

2. 在`setup`函数中创建WebSocket连接并初始化：

import { ref } from 'vue';

export default {
  setup() {
    const socket = ref(null);

    // 创建WebSocket连接
    const initWebSocket = () => {
      const url = 'ws://192.168.2.27:8082/websocket?type=order';
      socket.value = new WebSocket(url);

      // 监听WebSocket事件
      socket.value.onopen = () => {
        console.log('WebSocket连接已打开');
      };

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

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

      socket.value.onerror = (error) => {
        console.error('WebSocket连接发生错误:', error);
      };
    };

    // 初始化WebSocket
    initWebSocket();

    return {
      socket,
      // ...
    };
  },
};

3. 在需要发送消息的地方，通过WebSocket发送消息：

import { ref } from 'vue';

export default {
  setup() {
    const socket = ref(null);
    const message = ref('');

    // ...

    const sendMessage = () => {
      if (socket.value && socket.value.readyState === WebSocket.OPEN) {
        socket.value.send(message.value);
      }
    };

    return {
      socket,
      message,
      sendMessage,
      // ...
    };
  },
};

以上是在Vue3中使用WebSocket的基本步骤。你可以根据具体需求进行进一步的操作和处理。