websocket封装及在父组件中的详细用法实例

//————————————————websocket组件——————————————

<template>

  <div></div>

</template>

<script setup lang="ts" name="websocket-tool">

const emit = defineEmits(["getWSmsg"]);

const props = defineProps({

  uri: {

    type: String,

  },

});

const state = reactive({

  webSocket: ref(), // webSocket实例

  lockReconnect: false, // 重连锁，避免多次重连

  maxReconnect: x, // 最大重连次数， -1 标识无限重连

  reconnectTime: x, // 重连尝试次数

  heartbeat: {

    interval: x* 1000, // 心跳间隔时间  x秒

    timeout:  x* 1000, // 响应超时时间  x秒

    pingTimeoutObj: ref(), // 延时发送心跳的定时器

    pongTimeoutObj: ref(), // 接收心跳响应的定时器

    pingMessage: JSON.stringify({ type: "ping" }), // 心跳请求信息

  },

});

//获取token

const token =-------

//页面加载完初始化websocket

onMounted(() => {

  initWebSocket();

});

//页面跳转关闭websocket连接

onUnmounted(() => {

  state.webSocket.close();

  clearTimeoutObj(state.heartbeat);

});

const initWebSocket = () => {

  let host = 连接的后端地址.replace(/^http:\/\//, "");

  let wsUri = `ws://${host}${props.uri}?access_token=${token.value}  //拼接ws连接地址

  // 建立连接

  state.webSocket = new WebSocket(wsUri);

  // 连接成功

  state.webSocket.onopen = onOpen;

  // 连接错误

  state.webSocket.onerror = onError;

  // 接收信息

  state.webSocket.onmessage = onMessage;

  // 连接关闭

  state.webSocket.onclose = onClose;

};

const reconnect = () => {

  if (!token) {

    return;

  }

  if (

    state.lockReconnect ||

    (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)

  ) {

    return;

  }

  state.lockReconnect = true;

  setTimeout(() => {

    state.reconnectTime++;

    // 建立新连接

    initWebSocket();

    state.lockReconnect = false;

  }, 5000);

};

//清空定时器

const clearTimeoutObj = (heartbeat: any) => {

  heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);

  heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);

};

//开启心跳

const startHeartbeat = () => {

  const webSocket = state.webSocket;

  const heartbeat = state.heartbeat;

  // 清空定时器

  clearTimeoutObj(heartbeat);

  // 延时发送下一次心跳

  heartbeat.pingTimeoutObj = setTimeout(() => {

    // 如果连接正常

    if (webSocket.readyState === 1) {

      //这里发送一个心跳，后端收到后，返回一个心跳消息，

      webSocket.send(heartbeat.pingMessage);

      // 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器

      heartbeat.pongTimeoutObj = setTimeout(() => {

        webSocket.close();

      }, heartbeat.timeout);

    } else {

      // 否则重连

      reconnect();

    }

  }, heartbeat.interval);

};

//连接成功事件

const onOpen = () => {

  //开启心跳

  startHeartbeat();

  state.reconnectTime = 0;

};

//连接失败

const onError = () => {

  reconnect();    //重连

};

//连接关闭事件

const onClose = () => {

  reconnect();  //重连

};

//接收服务器推送过来的信息

const onMessage = (msg: any) => {

  startHeartbeat();   //收到服务器信息，心跳重置并发送

  if (msg.data.indexOf("pong") > 0) {

    return;

  }

  emit("getWSmsg", msg.data);

};

</script>

//————————————父组件中的使用方法——————————————
  <websocket-tool uri="XXX(和后端对接想要的ws地址)"  @getWSmsg="getWSmsg" /> 

const getWSmsg= (msg: any) => {

console.log（"websocket推送的消息：",msg）

};