解压缩 Gzip 数据表单 webSocket 中的客户端 JavaScript 问题

Question

我有一个通过 WebSocket 向我发送数据的服务，但是数据是 gzip 压缩的。当我尝试解压缩 Blob 数据时，我遇到了问题。我使用包fflategzip-jspako和zlib都有不同的错误，但是当我用包node-gzip编写node js Server的代码时很有趣 哪个底层使用了上面提到的zlib 包，一切都很好，数据将被取消压缩。

Client.js（问题是 unGzip 数据）

let ws = new WebSocket('wss://api.huobi.pro/ws');

var zlib = require('zlib');;

let zip = {
    gzip: function gzip(input, options) {
        return new Promise(function (resolve, reject) {
            zlib.gzip(input, options, function (error, result) {
                if (!error) resolve(result); else reject(Error(error));
            });
        });
    },
    ungzip: function ungzip(input, options) {
        return new Promise(function (resolve, reject) {
            zlib.gunzip(input, options, function (error, result) {
                if (!error) resolve(result); else reject(Error(error));
            });
        });
    }
};

ws.onopen = ( function () {
    ws.send(`{
                "sub": "market.ethbtc.kline.1min",
                "id": "id1"
            }`);
});

ws.onmessage = async function (event) {
    console.log(await zip.ungzip(event.data));
};

错误：未捕获（承诺中）错误：TypeError：无效 非字符串/缓冲区块

Node.js 工作

const {ungzip} = require('node-gzip');

ws = new WebSocket('wss://api.huobi.pro/ws');
    
    ws.on('open', function () {
            ws.send('{
                "sub": "market.ethbtc.kline.1min",
                "id": "id1"
            }');
        });
    
     ws.on('message', function (data) {
            ungzip(data).then((r) => {
                let data = JSON.parse(r.toString());
                console.log(data); 
            }).catch(console.error)
        }); 

在浏览器中，event.data 是 Blob 数据，当我对它们使用 text 方法时，有一些乱码，上面的大多数库和包都表示数据头未知

但是为什么相同结构的相同数据点一个在 node.js 上工作另一个在浏览器中不工作

请帮我解压数据

在上面的 Node.js 代码中解压后的示例响应数据 我希望在我的 Client.js 中也一样

{
  "ch": "market.ethbtc.kline.1min",
  "ts": 1489474082831, //system update time
  "tick": {
    "id": 1489464480,
    "amount": 0.0,
    "count": 0,
    "open": 7962.62,
    "close": 7962.62,
    "low": 7962.62,
    "high": 7962.62,
    "vol": 0.0
  }
}

Answer 1

如果您将console.log 的值设为event.data，您会发现它实际上是Blob。不能直接使用，必须转换成Uint8Array。

我还注意到端点返回压缩后的 JSON，所以我也会对其进行解析。

我的解决方案：

import { gunzip, strFromU8 } from 'fflate'; 
// If you can't use ES Modules:
// const { gunzip, strFromU8 } = require('fflate');
const ws = new WebSocket('wss://api.huobi.pro/ws');
ws.onopen = function() {
  ws.send(JSON.stringify({
    sub: 'market.ethbtc.kline.1min',
    id: 'id1'
  }));
}
ws.onmessage = function(event) {
  const fr = new FileReader();
  fr.onload = function() {
    gunzip(
      new Uint8Array(fr.result),
      function(err, raw) {
        if (err) {
          console.error(err);
          return;
        }
        const data = JSON.parse(strFromU8(raw));
        // Use the data variable however you wish
      }
    );
  }
  fr.readAsArrayBuffer(event.data);
}

Answer 2

无论使用何种模式，这两个示例之间都有明显的区别。
如果这不起作用（因为它会尝试立即访问，而无需等待承诺）：

ws.onmessage = function (event) {
    console.log(gzip.unzip(event.data));
}

只需以与工作版本相同的方式访问它：

ws.onmessage = function (data) {
    gzip.unzip(data)
    .then((result) => {
        let data = JSON.parse(result.toString());
        console.log(data); 
    })
    .catch(console.error)
}

gzip.unzip 和 ungzip 可能都返回一个承诺。