go學習筆記(17)Blob and ArrayBuffer

最近在學習go websocket的時候,在學習實驗過程遇到一個比較奇怪問題。為什么我的數據返回是blob,而不是arrayBuffer?百思不得其解。

直到同事打包的時候微信小游戲遇到了一個報錯。FileReader不支持。
經過在社區查詢,官方答復是支持只是arraybuffer /string。那樣在coco creator 調試的時候為什么返回的是blob? 而在微信的開發工作發現返回是Arraybuffer。

1.問題實驗追蹤

在今晚我嘗試做了一個實驗,在結合gpt 交流發現一個問題。首選我們以這樣一個小案例進行實驗。監聽8080的端口,然后返回的時候進行打印。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webSocket 返回類型問題</title>
</head>
<body>
<script type="text/javascript">const socket = new WebSocket('ws://localhost:8080');socket.onmessage = (event) => {if (event.data instanceof ArrayBuffer) {// 返回ArrayBuffer數據const arrayBuffer = event.data;// 打印二進制數據console.log('接收的二進制數據:', arrayBuffer);}};
</script>
</body>
</html>

在第一次返回的時候,監聽這個數據,返回類型是Blob。的確是Blob類型。
在這里插入圖片描述

好,進行第二次的設置,修改上述的代碼,加入了一個屬性。 socket.binaryType = “arraybuffer”; 設置返回類型。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webSocket 返回類型問題</title>
</head>
<body>
<script type="text/javascript">const socket = new WebSocket('ws://localhost:8080');socket.binaryType = "arraybuffer"; //加入binaryType 指定返回類型socket.onmessage = (event) => {if (event.data instanceof ArrayBuffer) {// 返回ArrayBuffer數據const arrayBuffer = event.data;// 打印二進制數據console.log('接收的二進制數據:', arrayBuffer);}};
</script>
</body>
</html>

然后再次查看返回數據結果返回的類型變化了。猜測是只要設置了就能夠返回指定數據。在沒有設置類型的時候,默認是Blob類型。
在這里插入圖片描述

看似簡單的一個問題,沒有留意就突然不知道怎么解釋。以下為go測試代碼。通過這樣快速檢測數據,則可以指定對應類型返回。

package mainimport ("fmt""github.com/gorilla/websocket""log""net/http"
)var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool {return true},
}func main() {http.HandleFunc("/", onMessage)err := http.ListenAndServe(":8080", nil)if err != nil {log.Fatal(err)}
}func onMessage(w http.ResponseWriter, r *http.Request) {conn, err := upgrader.Upgrade(w, r, nil)if err != nil {fmt.Println(err)return}defer conn.Close()data := make([]byte, 2)data[0] = 1data[1] = 2//發送 給客戶端err = conn.WriteMessage(websocket.BinaryMessage, data)if err != nil {fmt.Println(err)return}
}

當h5 返回的是Blob的時候應該如何讀取?改造一下讀取方式。采用FileReader的方式進行讀取。這樣就可以滿足到2種類型處理了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webSocket 返回類型問題</title>
</head>
<body>
<script type="text/javascript">const socket = new WebSocket('ws://localhost:8080');//socket.binaryType = "arraybuffer"; //加入binaryType 指定返回類型socket.onmessage = (event) => {if (event.data instanceof ArrayBuffer) {// 返回ArrayBuffer數據const arrayBuffer = event.data;// 打印二進制數據console.log('接收的二進制數據:', arrayBuffer);}else if(event.data instanceof  Blob){readBlob(event.data)}};function readBlob(blob){const reader = new FileReader();reader.onload = (event) => {// 獲取讀取的結果const result = event.target.result;if (result instanceof ArrayBuffer) {const arrayBuffer = result;// 打印二進制數據console.log('接收的二進制數據:', arrayBuffer);} else {console.error('Failed to read Blob as ArrayBuffer.');}};reader.readAsArrayBuffer(blob);}
</script>
</body>
</html>

在這里插入圖片描述
同理這樣可以解析到一個問題。數據返回需要設置一下就能返回指定的類型,在沒有指定的時候就默認是Blob。而剛碰見微信小游戲不支持FileReader引發報錯,而微信小游戲返回是直接ArrayBuffer。 這樣就能解釋并非引擎的問題。只是一個屬性參數忘記設置導致的。

好了。今晚實驗到此為止。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/210131.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/210131.shtml
英文地址,請注明出處:http://en.pswp.cn/news/210131.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Qt之QCache和QContiguousCache

一.QCache QCache在構造的時候指定了緩存中允許的最大成本,也就是如下構造函數中的參數maxCost。默認情況下,QCaches maxCost() 是100。 QCache(int maxCost = 100) ~QCache() void clear() bool contains(const Key &key) const int count() const bool insert(const …

[原創] 電源芯片輸出端的紋波測試

網上有很多文章講解&#xff0c;電源芯片的紋波測試&#xff0c;原理圖各種講解&#xff0c;理論有余&#xff0c;實質性測試細節不夠細致&#xff0c;想寫一些測試步驟&#xff0c;作為分享和記錄。 1、設置示波器參數 1.1 校準示波器 1.2 探頭按鈕推到X1&#xff08;代表波…

[RoBERTa]論文實現:RoBERTa: A Robustly Optimized BERT Pretraining Approach

文章目錄 一、完整代碼二、論文解讀2.1 模型架構2.2 參數設置2.3 數據2.4 評估 三、對比四、整體總結 論文&#xff1a;RoBERTa&#xff1a;A Robustly Optimized BERT Pretraining Approach 作者&#xff1a;Yinhan Liu, Myle Ott, Naman Goyal, Jingfei Du, Mandar Joshi, Da…

【Qt5】Q_UNUSED()

2023年12月9日&#xff0c;周六晚上 Q_UNUSED()是一個用于告訴編譯器不使用&#xff08;或者未使用&#xff09;特定變量的宏。 有時候&#xff0c;在函數簽名中聲明了某些參數&#xff0c;但是在函數體內并沒有使用它們。這可能是因為在某些情況下&#xff0c;函數可能需要接…

P10 Linux進程編程 fork創建子進程

目錄 前言 01 fork()創建子進程 示例 1使用 fork()創建子進程。 02 fork創建新進程時發生了什么事&#xff1f; 2.1 父、子進程中對應的文件描述符指向了相同的文件表 前言 &#x1f3ac; 個人主頁&#xff1a;ChenPi &#x1f43b;推薦專欄1: 《Linux C應用編程&#xf…

異步回調模式

異步回調 所謂異步回調&#xff0c;本質上就是多線程中線程的通信&#xff0c;如今很多業務系統中&#xff0c;某個業務或者功能調用多個外部接口&#xff0c;通常這種調用就是異步的調用。如何得到這些異步調用的結果自然也就很重要了。 Callable、Future、FutureTask publi…

半導體劃片機助力氧化鋁陶瓷片切割:科技與工藝的完美結合

在當今半導體制造領域&#xff0c;氧化鋁陶瓷片作為一種高性能、高可靠性的材料&#xff0c;被廣泛應用于各種電子設備中。而半導體劃片機的出現&#xff0c;則為氧化鋁陶瓷片的切割提供了新的解決方案&#xff0c;實現了科技與工藝的完美結合。 氧化鋁陶瓷片是一種以氧化鋁為基…

《巫師3》缺失vcomp110.dll如何解決,如何快速修復vcomp110.dll丟失問題

在日常使用電腦的過程中&#xff0c;我們可能會遇到一些錯誤提示&#xff0c;其中之一就是“vcomp110.dll丟失”。這個錯誤提示通常意味著vcomp110.dll文件在系統中無法找到或加載。那么&#xff0c;vcomp110.dll丟失的原因是什么&#xff1f;它對電腦有什么影響&#xff1f;本…

高德地圖vue實現自定義標點熱力圖效果(縮放時展示不同數據)

高德地圖插件引入省略。。。樣式和vue基礎組件省略。。。 如果每個標點沒有數值&#xff0c;則可以用點聚合來實現功能下面例子&#xff0c;每個標點會有按市統計的數值&#xff0c;而且縮放一定程度時&#xff0c;需要展示按省統計的標點&#xff0c;因此需要自定義標點樣式和…

leetcode刷題日志-54螺旋矩陣

思路&#xff1a; 上下左右設置四個邊界 每走完一行或者一列&#xff0c;移動相應邊界&#xff0c;當左邊界大于右邊界&#xff0c;或者上邊界大于下邊界時&#xff0c;結束 代碼如下&#xff1a; class Solution {public List<Integer> spiralOrder(int[][] matrix) {…

線程上下文切換

線程上下文切換 巧妙地利用了時間片輪轉的方式, CPU 給每個任務都服務一定的時間&#xff0c;然后把當前任務的狀態保存下來&#xff0c;在加載下一任務的狀態后&#xff0c;繼續服務下一任務&#xff0c;任務的狀態保存及再加載, 這段過程就叫做上下文切換。時間片輪轉的方式…

Determining Which Version of GDS is Installed

Determining Which Version of GDS is Installed To determine which version of GDS you have, run the following command: $ gdscheck.py -v Example output: GDS release version: 1.0.0.78 nvidia_fs version: 2.7 libcufile version: 2.4

冒泡排序和直接選擇排序(C/C++實現)

文章目錄 冒泡排序(交換排序&#xff09;基本思想特性總結代碼實現 直接選擇排序基本思想特性總結代碼實現&#xff08;優化&#xff0c;每次循環同時選擇最小和最大的數&#xff09; 冒泡排序(交換排序&#xff09; 基本思想 基本思想&#xff1a;所謂交換&#xff0c;就是根…

class065 A星、Floyd、Bellman-Ford與SPFA【算法】

class065 A星、Floyd、Bellman-Ford與SPFA【算法】 2023-12-9 19:27:02 算法講解065【必備】A星、Floyd、Bellman-Ford與SPFA code1 A*算法模版 // A*算法模版&#xff08;對數器驗證&#xff09; package class065;import java.util.PriorityQueue;// A*算法模版&#xff…

vue3+TypeScript全局事件總線mitt

在vue3中 $ on&#xff0c;$off 和 $once 實例方法已被移除&#xff0c;組件實例不再實現事件觸發接口&#xff0c;因此大家熟悉的EventBus便無法使用了。然而我們習慣了使用EventBus&#xff0c;對于這種情況我們可以使用Mitt庫 npm i mitt -S 首先要在全局掛載 mitt 在app…

兩年外包生涯做完,感覺自己廢了一半。。。。。

先說一下自己的情況&#xff0c;本科生&#xff0c;19年通過校招進入南京某軟件公司&#xff0c;干了接近2年的功能測試&#xff0c;今年年初&#xff0c;感覺自己不能夠在這樣下去了&#xff0c;長時間呆在一個舒適的環境會讓一個人墮落!而我已經在一個企業干了2年的功能測試&…

laravel的ORM 對象關系映射

Laravel 中的 ORM&#xff08;Eloquent ORM&#xff09;是 Laravel 框架內置的一種對象關系映射系統&#xff0c;用于在 PHP 應用中與數據庫進行交互。Eloquent 提供了一種優雅而直觀的語法&#xff0c;使得開發者可以使用面向對象的方式進行數據庫查詢和操作。 定義模型&…

結合ColorUI組件開發微信小程序

1.自定義組件生命周期函數&#xff1a; Component({data: {},attached() {console.log("自定義組件生命周期函數 attached--先執行");this.getPos();},ready() {console.log("ready生命周期函數---在attached之后執行")},methods: {getPos() {var that th…

數據結構:位圖、布隆過濾器以及海量數據面試題

位圖、布隆過濾器以及海量數據面試題 1.位圖1.1概念1.2實現1.3位圖應用 2.布隆過濾器2.1布隆過濾器的提出2.2布隆過濾器的概念2.3布隆過濾器的查找2.4布隆過濾器的實現2.5布隆過濾器的刪除2.6布隆過濾器的優點2.7布隆過濾器的缺點 3.海量數據面試題3.1哈希切分3.2位圖應用3.3布…

如何成為前1%的程序員

如果你想成為前1%的程序員&#xff0c;你必須遵循1%的程序員做什么&#xff0c;了解其他99%的人不做什么。在現代&#xff0c;我們有各種學習平臺&#xff0c;里面充滿了與編程相關的視頻、圖文以及其他資料。 舉例來說&#xff0c;我作為編程的初學者&#xff0c;去尋找路線圖…