websocket大量信息传输的优化---使用文本压缩

莫尔道嘎老范

已于 2023-11-01 13:13:18 修改

阅读量2.7k

点赞数 1

文章标签： websocket javascript 前端

于 2023-04-17 17:16:30 首次发布

本文链接：https://blog.csdn.net/weixin_44134588/article/details/130204572

版权

背景:
后端传输给我大量的geojson数据,造成卡顿。大的时候为500w+字节数
优化方向:后端将JSON转化为二进制文件并压缩然后发给前端。
前端如何处理:

        //定义websocket
        const socket = new WebSocket('ws://192.168.2.206:8002/getModelData?pushType=realtime&displayType=2D');
        socket.binaryType = 'arraybuffer' // 设置消息类型为二进制
        socket.addEventListener('message', event => {
            const arrayBuffer = event.data;
            const inflate = new pako.Inflate({ to: 'string' });
            inflate.push(arrayBuffer);
            if (inflate.err) {
                console.error(inflate.msg);
                return;
            }
            const jsonString = inflate.result;
            const data = JSON.parse(jsonString);
            map.getSource('route').setData(data);
        });

用到的依赖为pako.js库地址为在线cdn地址
也可以使用npm下载 npm install pako
然后使用

import pako from "pako";
 //arrayBuffer为websocket传过来的文件
 if (arrayBuffer) {
        const inflate = new pako.Inflate({ to: "string" });
        inflate.push(arrayBuffer);
        if (inflate.err) {
          console.error(inflate.msg);
          return;
        }
        const jsonString = inflate.result;
        const data = JSON.parse(jsonString);
        //data为转化后的json
 }