前端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.pswp.cn/bicheng/22276.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/22276.shtml
英文地址,請注明出處:http://en.pswp.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 今天我…