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

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

1、安装

npm install pako

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

  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、使用发现解析压缩会存在异步，导致解压未完成后续代码执行会报错，优化

// 解析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);......