小知识，大挑战！本文正在参与「程序员必备小知识」创作活动
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金
前言：最近在负责一个项目需要用到WebSocket主动推送服务器端消息，但由于接入的第三方服务限制了WebSocket推送的内容大小限制在2M以内，因此要考虑采用文本压缩方案，把推送的内容限制在一定范围内
所以，接口返回乱码的原因是，后端同学为了把消息内容大小减小，采用了gzip压缩了文本内容，那么接下来前端要把接口返回的文本内容进行解压处理，并且把内容压缩后可以减小消耗带宽流量，有效提高后端接口响应时间
文本解压方案
我是选了使用Javascript的压缩库pako.js进行文本gzip压缩和解压的
- 使用npm安装pako库，我安装的pako版本是
1.0.1
npm install pako
- 项目里引入pako库，使用pako的gzip方法和ungzip分别进行压缩和解压
// 后端接口返回的已压缩的内容，这里自己测试用pako压缩一段文本
const msg = pako.gzip(JSON.stringify('hello world'), { to: "string" });
console.log(JSON.parse(pako.ungzip(msg, {to: 'string'}))) // hello world
- 我们可以封装成两个方法，用于解压和压缩文本使用
// zip.js
import pako from "pako";
export const unZipMsg = content => {
return JSON.parse(pako.ungzip(content, { to: "string" }));
};
export const zipMsg = content => {
return pako.gzip(JSON.stringify(content), { to: "string" });
};
注意：使用其他版本的pako库，发现后端gzip压缩的，前端用pako库解压失败
会报无法解压的错，例如安装最新版本2.0.4，会发现压缩后是生成一个Uint8Array的数组，解压是针对这个进行解压，和之前1点多版本的压缩方式不一样，因此后端压缩前端解压的方式需要统一一致哦，不然会出现后端压缩，前端无法解压的难题
最终由于发送的内容太大了，经过压缩后还是超过了2M，经讨论改用http接口返回内容的方案，替换之前WebSocket推送消息的方案，当然压缩文本有需要还是可以保留的
后面再补充一下不使用pako，自己如何实现字符串压缩功能
结语
以上是我对文本压缩的一点小心得使用，希望能对大家有帮助～你的赞对我来说很重要，希望能获得你的赞👍～大家也可以多在评论区交流讨论哦，谢谢啦～
更多文章推荐：
「不再迷茫！看了这篇文章让你上手Vue3.0开发有丝滑般体验」
「看一眼，Vue3 script-setup语法糖下组件通信就学会了（附源码）」
「三分钟学会使用requestAnimationFrame实现倒计时」
「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」
