在前端开发中，处理压缩数据是常见的需求。最近在一个项目中，我尝试使用 Pako 库解压缩从 WebSocket 接收到的 Blob 数据，结果遇到了一些问题。本文将分享我的经验和解决方案。

背景

在这个项目中，我使用 Vue2 和 Pako 库来处理 WebSocket 数据。目标是从服务器接收 Gzip 压缩的 Blob 数据，并将其解压缩为可用的 JSON 对象。以下是我最初的代码片段：

ws.onmessage = function (res) {
    console.log("数据接收中...");
    // 直接尝试解压缩 Blob 数据
    let msg = JSON.parse(pako.inflate(res.data, { to: 'string' }));
    console.log("解压缩结果", msg);
};

遇到的问题

在运行上述代码时，我收到以下错误信息：

Uncaught Error: unknown compression method

经过排查，我发现问题的根源在于 Blob 数据的处理方式不正确。直接传递 Blob 数据给 pako.inflate 并不能成功解压。

原因分析

Blob 对象需要先转换为 ArrayBuffer，才能被 Pako 正确解压缩。对此我缺乏足够的重视，导致了错误的发生。

解决方案

为了解决这个问题，我需要使用 FileReader 将 Blob 转换为 ArrayBuffer。以下是修改后的代码：

ws.onmessage = function (res) {
    console.log("数据接收中...");
    let reader = new FileReader();
    reader.readAsArrayBuffer(res.data); // 将 Blob 转换为 ArrayBuffer

    reader.onload = function() {
        // 使用 Pako 解压缩 ArrayBuffer 数据
        let msg = JSON.parse(pako.inflate(reader.result, { to: 'string' }));
        console.log("解压缩结果", msg);
    };
};

关键步骤

1. 使用 FileReader: 通过 readAsArrayBuffer 方法将 Blob 数据转换为 ArrayBuffer。
2. 在 onload 事件中解压: 一旦读取完成，在 onload 事件中调用 pako.inflate 来解压数据。

总结

通过这次经历，我认识到在处理 Blob 数据时，正确的转换步骤是至关重要的。直接将 Blob 数据传递给解压缩函数是不可行的。使用 FileReader 将其转换为 ArrayBuffer 是解决此问题的有效方法。

如果您在使用 Pako 解压缩 Blob 数据时遇到类似问题，可以参考我的解决方案。希望这篇博客能对您有所帮助！

参考文献

• 使用 zlib 发送 WSS 请求，接收 Blob，并解压