vue前端利用websocket添加真实进度条

在static下创建websocket.js文件

let ws = null;
let weboscket_data = null;
let weboscket_callback = null;
const userInfo = JSON.parse(JSON.parse(localStorage.getItem("userInf")));//获取用户id（本项目需要可根据自己项目需求定义）
//获取 websocket 推送的数据
let websocketonmessage = (e) => {
  return weboscket_callback(e);
};

// 连接成功
let websocketonopen = () => {
  console.log("连接 websocket 成功");
};

// 连接失败时重新连接
let websocketonerror = () => {
  initWebSocket();
};

// 断开链接后报错
let websocketclose = (e) => {
  console.log("断开连接", e);
};
// 手动关闭 websocket
let closewebsocket = () => {
  ws ? ws.close() : "";
};

let initWebSocket = () => {
  //初始化 websocket
  let wsurl = `ws://ip+域名/websocket/${weboscket_data}`;
  console.log(wsurl);
  ws = new WebSocket(wsurl);
  ws.onmessage = websocketonmessage;
  ws.onopen = websocketonopen;
  ws.onerror = websocketonerror;
  ws.onclose = websocketclose;
};

// 发送数据
let sendData = (data, callback) => {
  weboscket_data = userInfo.id + data;//利用用户id+传递字段构成唯一参数（根据自己项目需求而定）
  weboscket_callback = callback;
  //  判断 data 数据类型
  if (!(typeof data == "string")) {
    data = JSON.stringify(data);
  }
  //  判断 websocket 的状态
  if (ws && ws.readyState === ws.OPEN) {
    // 已经打开,可以直接发送
    ws.send(data);
  } else if (ws && ws.readyState === ws.CONNECTING) {
    // 正在开启状态中,则 1 秒后重新发送
    setTimeout(() => {
      ws.send(data);
    }, 1000);
  } else {
    // 未打开，则开启后重新调用
    initWebSocket();
    sendData(data, callback);
  }
};
// 导出
export { initWebSocket, sendData, closewebsocket };

在要使用进度条的界面引入

import { sendData, closewebsocket } from "@/static/websocket";

进度条样式(这里用的是element里的)  

 

 <el-progress :percentage="progressVal"></el-progress>

progressVal默认0

方法

initWebSocket() {
      if (typeof WebSocket === "undefined") {
        this.$message.warning("您的浏览器不支持socket");
      } else {
        closewebsocket();
        //初始化weosocket
        sendData(submitScoketType, this.websocketonmessage);
        //submitScoketType:动态参数跟后端沟通好后定义
      }
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      if (redata > this.progressVal) {
        this.progressVal = redata;
      }
    },

可在mounted中调用this.initWebSocket()

最后在调用保存接口时传递与后端定义好的参数即可