前端js解析websocket推送的gzip压缩json的Blob数据

随便起的名字也被占用2024-06-07 23:23

主要依赖插件pako https://www.npmjs.com/package/pako

1、安装

bash 复制代码

npm install pako

2、使用， pako.inflate(reader.result, {to: "string"}) 解压后的string 对象，需要JSON.parse转成json

javascript 复制代码

  this.ws.onmessage = (evt) => {
        console.log("websocket推送=====",evt.data instanceof Blob)
        var messageData = evt.data;
        try {
// S 解压主要代码
          if(evt.data instanceof Blob){
              let reader = new FileReader();
              reader.readAsArrayBuffer(evt.data, "utf-8");
              reader.onload =() =>{
                // 对数据进行解压
                messageData = pako.inflate(reader.result, {to: "string"})
               console.log("解析压缩",messageData)
              }
          }
// E 解压主要代码

        } catch (error) {
          console.log("推送报错-blob",error)
        }



....

3、使用发现解析压缩会存在异步，导致解压未完成后续代码执行会报错，优化

javascript 复制代码

// 解析websocket推送的gzip blob数据to json
const pakoUngzipToJson = (messageData) => {
  return new Promise((resolve, reject) => {
    try {
      let reader = new FileReader();
      reader.readAsArrayBuffer(messageData, "utf-8");
      reader.onload = () => {
        // 对数据进行解压
        let ungzipData = pako.inflate(reader.result, { to: "string" });
        resolve(ungzipData);
      };
    } catch (error) {
      console.log("推送解析报错-blob", error);
      reject(error);
    }
  });
};


//使用

 receive: async (message) => {
    var messageData = message.data;
    if(messageData instanceof Blob){
      console.time("解析数据gzip-web")
      messageData = await pakoUngzipToJson(messageData)
      console.timeEnd("解析数据gzip-web")
    }

    var params = JSON.parse(messageData);

......