U 整理提交

he wei

2025-01-19 ba2cfa9907623c094e6e2d52d12dc3055ddd587a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// useWebSocket.js
import { ref, reactive, onMounted, onUnmounted } from "vue";
import getWsUrl from "@/assets/js/getWsUrl";
 
export default function (url) {
  url = getWsUrl(url);
 
  const socket = ref(null);
  const isConnected = ref(false);
  const message = ref("");
 
  const sendCallback = reactive([]);
 
  const connect = () => {
    if (socket.value) {
      socket.value.close();
    }
    socket.value = new WebSocket(url);
 
    socket.value.onopen = () => {
      isConnected.value = true;
      console.log("WebSocket Connected, url: ", url);
      sendCallback.forEach(v => v());
      sendCallback.length = 0;
    };
 
    socket.value.onmessage = (event) => {
      // 处理接收到的消息
      // console.log("Received:", event.data);
      // 可以在这里通过 emit 发送消息到组件
      message.value = event.data;
    };
 
    socket.value.onerror = (error) => {
      console.error("WebSocket Error:", error, url);
    };
 
    socket.value.onclose = () => {
      isConnected.value = false;
      console.log("WebSocket 连接已关闭, url: ", url);
    };
  };
 
  // 发送数据
  const sendData = (data) => {
    if (socket.value && socket.value.readyState === socket.value.OPEN) {
      // console.log('send', data, '=============');
      socket.value.send(data);
    } else {
      sendCallback.push(() => sendData(data));
    }
  };
 
  onMounted(() => {
    connect();
  });
 
  onUnmounted(() => {
    if (socket.value) {
      socket.value.close();
    }
  });
 
  // 返回 socket 对象和状态
  return { socket, isConnected, message, sendData };
}