当前位置: 首页 > news >正文

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

相关文章:

前端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("…...

【wiki知识库】06.文档管理接口的实现--SpringBoot后端部分

目录 一、🔥今日目标 二、🎈SpringBoot部分类的添加 1.调用MybatisGenerator 2.添加DocSaveParam 3.添加DocQueryVo 三、🚆后端新增接口 3.1添加DocController 3.1.1 /all/{ebokId} 3.1.2 /doc/save 3.1.3 /doc/delete/{idStr} …...

c,c++,go语言字符串的演进

#include <stdio.h> #include <string.h> int main() {char str[] {a,b,c,\0,d,d,d};printf("string:[%s], len:%d \n", str, strlen(str) );return 0; } string:[abc], len:3 c语言只有数组的概念&#xff0c;数组本身没有长度的概念&#xff0c;需…...

vue-cli 快速入门

vue-cli &#xff08;目前向Vite发展&#xff09; 介绍&#xff1a;Vue-cli 是Vue官方提供一个脚手架&#xff0c;用于快速生成一个Vue的项目模板。 Vue-cli提供了如下功能&#xff1a; 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 依赖环境&#xff1a;NodeJ…...

机器人--矩阵运算

两个矩阵相乘的含义 P点在坐标系B中的坐标系PB&#xff0c;需要乘以B到A到变换矩阵TAB。 M点在B坐标系中的位姿MB&#xff0c;怎么计算M在A中的坐标系&#xff1f; 两个矩阵相乘 一个矩阵*另一个矩阵的逆矩阵...

期末复习【汇总】

期末复习【汇总】 前言版权推荐期末复习【汇总】最后 前言 2024-5-12 20:52:17 截止到今天&#xff0c;所有期末复习的汇总 以下内容源自《【创作模板】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是ht…...

【IM即时通讯】MQTT协议的详解(3)- CONNACK Packet

【IM即时通讯】MQTT协议的详解&#xff08;3&#xff09;- CONNACK Packet 文章目录 【IM即时通讯】MQTT协议的详解&#xff08;3&#xff09;- CONNACK Packet前言说明一、固定同步详解、可变头部详解总结 前言 关于所有的类型的数据示例已经在上面一篇博客说完&#xff1a; …...

Linux - 深入理解/proc虚拟文件系统:从基础到高级

文章目录 Linux /proc虚拟文件系统/proc/self使用 /proc/self 的优势/proc/self 的使用案例案例1&#xff1a;获取当前进程的状态信息案例2&#xff1a;获取当前进程的命令行参数案例3&#xff1a;获取当前进程的内存映射案例4&#xff1a;获取当前进程的文件描述符 /proc中进程…...

Django DeleteView视图

Django 的 DeleteView 是一个基于类的视图&#xff0c;用于处理对象的删除操作。 1&#xff0c;添加视图函数 Test/app3/views.py from django.shortcuts import render# Create your views here. from .models import Bookfrom django.views.generic import ListView class B…...

代码杂谈 之 pyspark如何做相似度计算

在 PySpark 中&#xff0c;计算 DataFrame 两列向量的差可以通过使用 UDF&#xff08;用户自定义函数&#xff09;和 Vector 类型完成。这里有一个示例&#xff0c;展示了如何使用 PySpark 的 pyspark.ml.linalg.Vectorspyspark.sql.functions.udf 来实现这一功能&#xff1a…...

混剪素材哪里找?分享8个热门素材网站

今天我们来深入探讨如何获取高质量的混剪素材&#xff0c;为您的短视频和自媒体制作提供最佳资源。在这篇指南中&#xff0c;我将介绍几个热门的素材网站&#xff0c;让您轻松掌握素材获取的技巧&#xff0c;并根据百度SEO排名规则&#xff0c;优化关键词的使用&#xff0c;确保…...

临床应用的深度学习在视网膜疾病的诊断和转诊中的应用| 文献速递-视觉通用模型与疾病诊断

Title 题目 Clinically applicable deep learning for diagnosis and referral in retinal disease 临床应用的深度学习在视网膜疾病的诊断和转诊中的应用 01 文献速递介绍 诊断成像的数量和复杂性正在以比人类专家可用性更快的速度增加。人工智能在分类一些常见疾病的二…...

中继器简介

一、网络信号衰减问题 现在的网路信号有两种&#xff0c;一种是电信号&#xff0c;另一种的光信号&#xff0c;电信号在网线、电话线或者电视闭路线中传输&#xff0c;光信号在光缆中传输&#xff0c;但是不管是以那种信号进行传输&#xff0c;随着传输距离的增加&#xff0c;电…...

websocket 前端项目js示例

websocket前端 和服务端websocket通信示例&#xff0c; 前端直接使用h5的内置对象 WebSocket 来创建和管理 WebSocket 连接&#xff0c;以及可以通过该连接发送和接收数据。 这个对象都是是事件方式来处理和与后端交互数据&#xff0c; 他们分别是 onopen打开, onclose关闭, o…...

webapi跨越问题

由于浏览器存在同源策略&#xff0c;为了防止 钓鱼问题&#xff0c;浏览器直接请求才不会有跨越的问题 浏览器要求JavaScript或Cookie只能访问同域下的内容 浏览器也是一个应用程序&#xff0c;有很多限制&#xff0c;不能访问和使用电脑信息&#xff08;获取cpu、硬盘等&#…...

你知道 npmrc 文档吗? ---- npmrc 关键作用介绍

你知道 npmrc 文档吗&#xff1f; ---- npmrc 关键作用介绍 你知道 npmrc 文档吗&#xff1f; ---- npmrc 关键作用介绍如何修改配置呢&#xff1f;日常开放常常需要置哪些信息呢&#xff1f;registry 信息配置限定包认证信息代理配置缓存配置安装行为 参考 你知道 npmrc 文档吗…...

发现 Laravel 中的 api 响应时间明显过长

背景 近期在排查网站后台页面功能时 发现&#xff0c;部分查询页面&#xff0c;明显响应时间过长&#xff08;12秒&#xff09;&#xff0c;不合理 优先排查 接口运行时长 经过打印&#xff0c;发现代码是正常的&#xff0c;且时间仅需不到一秒 进一步怀疑是 VUE框架的渲染加载…...

如何在MySQL中创建不同的索引和用途?

目录 1 基本的 CREATE INDEX 语法 2 创建单列索引 3 创建多列索引 4 创建唯一索引 5 创建全文索引 6 在表创建时添加索引 7 使用 ALTER TABLE 添加索引 8 删除索引 9 索引管理的最佳实践 10 示例 在 MySQL 中&#xff0c;索引&#xff08;index&#xff09;是一种用于…...

maxwell同步mysql到kafka(一个服务器启动多个)

创建mysql同步用户 CREATE USER maxwell% IDENTIFIED BY 123456; GRANT ALL ON maxwell.* TO maxwell%; GRANT SELECT, REPLICATION CLIENT, REPLICATION SLAVE on *.* to maxwell%; 开启mysql binlog a.修改 /etc/my.cnf 配置 log-binmysql-bin # 开启binlog binlog-forma…...

实用软件分享---简单菜谱 0.3版本 几千种美食(安卓)

专栏介绍:本专栏主要分享一些实用的软件(Po Jie版); 声明1:软件不保证时效性;只能保证在写本文时,该软件是可用的;不保证后续时间该软件能一直正常运行;不保证没有bug;如果软件不可用了,我知道后会第一时间在题目上注明(已失效)。介意者请勿订阅。 声明2:本专栏的…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...