vue-hooks-plus/es/useWebSocket/index.js

Vue hooks library

import { ref, isRef, watch, onUnmounted, unref } from "vue";
var ReadyState = /* @__PURE__ */ ((ReadyState2) => {
  ReadyState2[ReadyState2["Connecting"] = 0] = "Connecting";
  ReadyState2[ReadyState2["Open"] = 1] = "Open";
  ReadyState2[ReadyState2["Closing"] = 2] = "Closing";
  ReadyState2[ReadyState2["Closed"] = 3] = "Closed";
  return ReadyState2;
})(ReadyState || {});
function useWebSocket(socketUrl, options = {}) {
  const {
    reconnectLimit = 3,
    reconnectInterval = 3 * 1e3,
    manual = ref(false),
    onOpen,
    onClose,
    onMessage,
    onError,
    protocols
  } = options;
  const reconnectTimesRef = ref(0);
  const reconnectTimerRef = ref();
  const websocketRef = ref();
  const unmountedRef = ref(false);
  const latestMessage = ref();
  const readyState = ref(3);
  const reconnect = () => {
    var _a;
    if (reconnectTimesRef.value < reconnectLimit && ((_a = websocketRef.value) == null ? void 0 : _a.readyState) !== 1) {
      if (reconnectTimerRef.value) {
        clearTimeout(reconnectTimerRef.value);
      }
      reconnectTimerRef.value = setTimeout(() => {
        connectWs();
        reconnectTimesRef.value++;
      }, reconnectInterval);
    }
  };
  const connectWs = () => {
    if (reconnectTimerRef.value) {
      clearTimeout(reconnectTimerRef.value);
    }
    if (websocketRef.value) {
      websocketRef.value.close();
    }
    const ws = new WebSocket(unref(socketUrl), protocols);
    readyState.value = 0;
    ws.onerror = (event) => {
      if (unmountedRef.value) {
        return;
      }
      reconnect();
      onError == null ? void 0 : onError(event, ws);
      readyState.value = ws.readyState || 3;
    };
    ws.onopen = (event) => {
      if (unmountedRef.value) {
        return;
      }
      onOpen == null ? void 0 : onOpen(event, ws);
      reconnectTimesRef.value = 0;
      readyState.value = ws.readyState || 1;
    };
    ws.onmessage = (message) => {
      if (unmountedRef.value) {
        return;
      }
      onMessage == null ? void 0 : onMessage(message, ws);
      latestMessage.value = message;
    };
    ws.onclose = (event) => {
      if (unmountedRef.value) {
        return;
      }
      reconnect();
      onClose == null ? void 0 : onClose(event, ws);
      readyState.value = ws.readyState || 3;
    };
    websocketRef.value = ws;
  };
  const sendMessage = (message) => {
    var _a;
    if (readyState.value === 1) {
      (_a = websocketRef.value) == null ? void 0 : _a.send(message);
    } else {
      throw new Error("WebSocket disconnected");
    }
  };
  const connect = () => {
    reconnectTimesRef.value = 0;
    connectWs();
  };
  const disconnect = () => {
    var _a;
    if (reconnectTimerRef.value) {
      clearTimeout(reconnectTimerRef.value);
    }
    reconnectTimesRef.value = reconnectLimit;
    (_a = websocketRef.value) == null ? void 0 : _a.close();
  };
  if (isRef(socketUrl) && isRef(manual))
    watch(
      [socketUrl, manual],
      (c) => {
        const [_, manualWatch] = c;
        if (!manualWatch) {
          connect();
        }
      },
      {
        immediate: true
      }
    );
  else if (isRef(manual)) {
    watch(
      manual,
      (manualWatch) => {
        if (!manualWatch) {
          connect();
        }
      },
      {
        immediate: true
      }
    );
  } else {
    if (!manual) {
      connect();
    }
  }
  onUnmounted(() => {
    unmountedRef.value = true;
    disconnect();
  });
  return {
    latestMessage,
    sendMessage,
    connect,
    disconnect,
    readyState,
    webSocketIns: websocketRef.value
  };
}
export {
  ReadyState,
  useWebSocket as default
};