请求添加

longyvfengyun

2023-08-24 91a371d14923904bdf88dd22995f1470eac3f809

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import getWsUrl from "./getWsUrl";
import {computed, onMounted, onUnmounted, ref} from "vue";
 
const createWs = (url)=>{
  const wsUri = getWsUrl(url);
  // 重连时间间隔 默认10秒
  const reConnectDelay = 10 * 1000;
  let timer = null;
  let SOCKET = ref(null);
 
  // 打开链接
  const openSocket = ()=>{
    // 初始化WebSocket 如果已经初始化 则什么都不做
    if (SOCKET.value) {
      return false;
    }
    WSClose();
    WSInit();
  }
 
  const WSInit = ()=>{
    // 未被初始化初始化
    if (!isWSOpen.value) {
      console.log('=====WSinit, url:', wsUri);
      SOCKET.value = new WebSocket(wsUri);
      SOCKET.value.onmessage = onWSMessage;
      SOCKET.value.onopen = onWSOpen;
      SOCKET.value.onerror = onWSError;
      SOCKET.value.onclose = WSClose;
    }
  }
 
  const onWSOpen = ()=>{
  }
 
  const onWSMessage = ()=>{
  }
 
  const onWSError = (Event)=>{
    console.log('链接失败', wsUri);
    WSClose(Event);
  }
 
  const WSClose = (Event)=>{
    if (SOCKET.value) {
      switch (SOCKET.value.readyState) {
        case 0:
          SOCKET.value.onopen = () => {
            SOCKET.value.close();
            console.log('链接关闭', wsUri, 'close事件对象:', Event);
            SOCKET.value = null;
            // 没有event对象 则为手动关闭
            if (Event) {
              reConnect();
            }
          }
          break;
        case 1:
          SOCKET.value.close();
          console.log('链接关闭', wsUri, 'close事件对象:', Event);
          SOCKET.value = null;
          // 没有event对象 则为手动关闭
          if (Event) {
            reConnect();
          }
          break;
        case 2:
          SOCKET.value.onclose = () => {
            console.log('链接关闭', wsUri, 'close事件对象:', Event);
            SOCKET.value = null;
            // 没有event对象 则为手动关闭
            if (Event) {
              reConnect();
            }
          }
          break;
        case 3:
          console.log('链接关闭', wsUri, 'close事件对象:', Event);
          SOCKET.value = null;
          // 没有event对象 则为手动关闭
          if (Event) {
            reConnect();
          }
          break;
      }
    }
  }
 
  // 重连
  const reConnect = ()=>{
    // 重连计时开始 就不另重连
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      timer = null;
      WSInit();
    }, reConnectDelay);
  }
 
  const isWSOpen= computed(()=>{
    return SOCKET.value && 1 === SOCKET.value.readyState;
  });
 
  onMounted(()=>{
    openSocket();
  })
 
  onUnmounted(()=>{
    WSClose();
  })
 
  return {
    SOCKET,
    onWSOpen,
    onWSMessage
  };
}
 
export default createWs;