vue3 集成 websocket 实现长链接

在Vue 3中，你可以创建一个自定义插件来封装WebSocket的逻辑。以下是一个简单的例子：
1、创建一个websocket.js文件：

import { ref } from 'vue';
 
export default function useWebSocket(url) {
  const ws = ref(null);
  const sendMessage = (message) => {
    if (ws.value) {
      ws.value.send(message);
    }
  };
 
  const setupWebSocket = () => {
    ws.value = new WebSocket(url);
    ws.value.onopen = () => console.log('WebSocket connected');
    ws.value.onerror = (error) => console.log('WebSocket error:', error);
    ws.value.onmessage = (message) => console.log('Received message:', message.data);
    ws.value.onclose = () => console.log('WebSocket disconnected');
  };
 
  return { ws, setupWebSocket, sendMessage };
}

2、在你的Vue组件中使用这个插件：

<template>
  <div>
    <button @click="setupWebSocket">Connect WebSocket</button>
    <button @click="sendMessage('Hello WebSocket')">Send Message</button>
  </div>
</template>
 
<script>
import useWebSocket from './path/to/websocket';
 
export default {
  setup() {
    const { ws, setupWebSocket, sendMessage } = useWebSocket('wss://your-websocket-url');
 
    return { ws, setupWebSocket, sendMessage };
  }
};
</script>

useWebSocket函数返回了一个带有WebSocket实例和相关方法的对象，你可以在组件中通过setupWebSocket方法来建立连接，通过sendMessage方法来发送消息。