Record a websocket usage process

        Record a websocket usage process. The problem that needs to be solved is: the company has a requirement and needs to export about 200,000 pieces of data. First of all, the request time for exporting so much data is too long, which may cause users to feel that the network is stuck, and the download size is too large. By calculation, it should be two or three gigabytes, so the download time is too long, and Excel cannot open so many files. data

        The solution (not particularly good, the request should be fragmented, but the backend only provides so much technical support, and this garbage has never been done): use websocket to establish a long link, directly request resources on the browser, and the backend Place the excel file directly on the browser and place multiple excel files, so that file sharding can be achieved indirectly.

        Use process:

  created() {
    this.initWebSocket();
  },
  destroyed() {
    // 组件销毁时关闭
    this.websocketclose();
  },
  data() {
    return {
      websock: null,
    };
  },
  methods: {
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://172.16:8099"; // 地址更改为需要的地址 : 端口号如果nginx 有做配置可以不加
      this.websock = new WebSocket(wsuri); // 创建
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.websocketsend();
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      let a = document.createElement("a");
      a.href = VUE_APP_BASE + redata.data;  // 此处使用公司阿里云服务
      a.click();
    },
    websocketsend() {
      //数据发送
      this.websock.send(data); // 此处添加需要发送的数据
    },
    websocketclose(e) {
      console.log(e, '建立失败')
    },
  },