前端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);......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue使用html2canvas截图下载时,存在svg或者img时截图不全的解决办法

使用html2canvas进行div截图时,存在svg和img的解决办法 写在前面:vue使用html2canvas截图时,存在svg或者img时截图时空白,或者不全解决办法如下第一步,svg或者img先转base64第二步,将转换后的base64设置为新…

电源小白入门学习10——浪涌、防浪涌器件、浪涌保护芯片

浪涌、防浪涌器件、浪涌保护芯片 浪涌浪涌保护器件的分类与原理保险丝TVS二极管新防护电路 浪涌 浪涌,相信不少学习过电子的同学或多或少都通过这个词,但是到底什么是浪涌呢,GPT给我的答案是这样的: 浪涌,也称为瞬态…

【杂记-IDS入侵检测系统、IPS入侵防御系统】

一、IDS概述、分类 IDS概述 IDS,intrusion detection system,入侵检测系统,其对网络传输进行即时监视,在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备,是一种积极主动的安全防护技术。与防火墙不同的是…

【深度学习】【机器学习】支持向量机,网络入侵检测,KDD数据集

文章目录 环境加载数据归一化数据训练模型用测试数据集给出评估指标准确率召回率预测某个输入数据随便取一行数据加载训练好的SVM支持向量机模型并预测 全部数据和代码下载 环境 之前介绍过用深度学习做入侵检测,这篇用向量机。 环境Python3.10 requirements.txt…

【miniconda】安装miniconda

☆ 问题描述 ubuntu环境下安装miniconda ★ 解决方案 ubuntu环境下安装miniconda 下载miniconda 包 miniconda官网地址:https://docs.conda.io/en/latest/miniconda.html 清华大学镜像地址: https://mirrors.tuna.tsinghua.edu.cn/anaconda/minicon…

超级加速器链接促进会(UALink)能否打破英伟达的垄断?

近年来,人工智能(AI)技术的飞速发展催生了对高性能计算和数据中心互联技术的巨大需求。然而,随着市场的集中化,英伟达凭借其专有的NVLink和InfiniBand技术,几乎垄断了这一市场。这种局面引起了其他科技巨头…

Python的空格之谜:深度剖析空格在Python编程中的重要作用

Python的空格之谜:深度剖析空格在Python编程中的重要作用 在Python的世界里,空格并不仅仅是一个简单的空白字符,它承载着编程语法和逻辑的重要使命。对于初学者来说,Python的空格规则可能是一个令人困惑的难题,但一旦…

MFC实现子控件focus焦点上下移动父控件ListView和Gridview也跟着向上下移动

项目中要实现mfc功能,然后子空间焦点下移,LIstView和Gridview父空间不会下移,所以就有这个文章。废话不多说直接上代码。 MFCGridView.java import android.content.Context; import android.util.AttributeSet; import android.view.View;…

白酒:产地的酿酒历史与文化遗产

云仓酒庄豪迈白酒作为中国酿酒工艺的品牌之一,其产地的酿酒历史与文化遗产具有深远的意义和价值。产地酿酒历史悠久,代代相传的酿酒技艺和与众不同的文化传统,构成了云仓酒庄豪迈白酒与众不同的品质和风味。 据云仓酒庄豪迈介绍,中…

力扣----轮转数组

题目链接:189. 轮转数组 - 力扣(LeetCode) 思路一 我们可以在进行每次轮转的时候,先将数组的最后一个数据的值存储起来,接着将数组中前n-1个数据依次向后移,最后将存储起来的值赋给数组中的第一个数据。 …

Pixi绘制地图和小车

之前已经用Pixi绘制出了各种图形以及通过图片绘制精灵,这节用pixi绘制网格地图,并通过图片制作一个Sprite,让这个Sprite在网格地图上运动。首先需要在页面中添加一个div用来后期展示canvas的画布,并将此div实例化为PIXI的Applicat…

python绘制双变量热力等级图

参考资料: https://github.com/mikhailsirenko/bivariate-choropleth/blob/main/bivariate-choropleth.ipynb Bivariate choropleth map using Plotly Matplotlib双变量热力等级图 代码: import pandas as pd import geopandas as gpd import numpy a…

企业转型必上的监控系统智能管家大屏UI前端开发

企业转型必上的监控系统智能管家大屏UI前端开发

Istio安装记录

环境介绍 我使用的是k8s 1.23.3版本 istio使用的是istio-1.13.3-linux-amd64.tar.gz 把文件下载k8s集群下,解压 tar -vzxf istio-1.13.3-linux-amd64.tar.gz然后设置环境变量 [rootmaster istio]# cat /etc/profile export ISTIO_HOME/root/istio-1.13.3 expor…

3067. 在带权树网络中统计可连接服务器对数目 Medium

给你一棵无根带权树,树中总共有 n 个节点,分别表示 n 个服务器,服务器从 0 到 n - 1 编号。同时给你一个数组 edges ,其中 edges[i] [ai, bi, weighti] 表示节点 ai 和 bi 之间有一条双向边,边的权值为 weighti 。再给…

Yolo-v5模型训练速度,与GeForce的AI算力描述

1.GeForce RTX3070 Ti官网参数: GeForce RTXTM 3070 Ti 和 RTX 3070 显卡采用第 2 代 NVIDIA RTX 架构 - NVIDIA Ampere 架构。该系列产品搭载专用的第 2 代 RT Core ,第 3 代 Tensor Core、全新的 SM 多单元流处理器以及高速显存,助您在高性…

【网络安全的神秘世界】MySQL

🌝博客主页:泥菩萨 💖专栏:Linux探索之旅 | 网络安全的神秘世界 | 专接本 MySQL MySQL 教程 | 菜鸟教程 (runoob.com) 什么是数据库 数据库(Database)是按照数据结构来组织、存储和管理数据的仓库 在do…

二手笔记本怎么买

用途: 1.给爹妈用来简单办公,只是用office基础办公软件,无出差无游戏无画图需求。 预算: 1000以内 以下是电脑对比选项: 屏幕大小-> 目前市面上的尺寸对比,以A4纸说明,13.3寸14.1寸15.6…

Camunda 7.x 系列【66】实战篇之我发起的

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 前后端基于若依:https://gitee.com/y_project/RuoYi-Vue 流程设计器基于RuoYi-flowable:https://gi…

参数高效微调PEFT(四)快速入门(IA)3

参数高效微调PEFT(四)快速入门(IA)3 我们已经了解了HuggingFace中peft库的几种高效微调方法。 参数高效微调PEFT(一)快速入门BitFit、Prompt Tuning、Prefix Tuning 参数高效微调PEFT(二)快速入门P-Tuning、P-Tuning V2 参数高效微调PEFT(三)快速入门LoRA、AdaLoRA 今天我…