国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WebSocket系列之二進制數據設計與傳輸

amc / 2213人閱讀

摘要：本文作為系列的第四篇內容，將會用一個簡單的聊天應用把整個傳輸二進制數據類型的內容連接起來，讓用戶對整個傳輸二進制數據的方法有個了解。如何發送二進制數據通過如何設計一個二進制協議一章，我們知道了如何定義傳輸的二進制數據格式。

概述

通過前三篇博客，我們能夠了解在通過WebSocket發送數據之前，我們需要傳遞的數據是如何變成ArrayBuffer二進制數據的；在我們收到二進制數據之后，我們又如何將其變成了JavaScript中的常見數據類型。
本文作為WebSocket系列的第四篇內容，將會用一個簡單的IM聊天應用把整個WebSocket傳輸二進制數據類型的內容連接起來，讓用戶對整個WebSocket傳輸二進制數據的方法有個了解。
本文的主要內容如下：

如何設計一個二進制協議

WebSocket如何發送二進制數據

WebSocket如何處理接收的二進制數據

之前的博客我們介紹過了WebSocket基礎知識，數字類型和字符串類型與二進制數據間的轉換，如果沒有相關的基礎，建議先依次閱讀以下文章：

WebSocket系列之基礎知識入門篇

WebSocket系列之JavaScript中數字數據如何轉換為二進制數據

WebSocket系列之字符串如何與二進制數據進行轉換

如何設計一個二進制協議 什么是協議 
協議，網絡協議的簡稱，網絡協議是通信計算機雙方必須共同遵從的一組約定。如怎么樣建立連接、怎么樣互相識別等。只有遵守這個約定，計算機之間才能相互通信交流。它的三要素是：語法、語義、時序。

通過百度百科中的介紹，我們對協議的概念有了一個基礎的了解。通俗來說，協議就是通信雙方約定好的一套規則。

為什么要設計協議

沒有規矩不成方圓。通信雙方只有通過協議，才能夠識別對方發送的數據內容。

我們應該如何設計這套協議

首先，協議的設計應該能夠區分不同的各個數據包；其次，它還需要具備一定的兼容性。
根據上述兩點要求，我們設計了一套簡單的IM聊天協議，支持文本、圖片、文件三種消息。這套協議是按照最簡單的思路來設計的，因此也只是給大家一個參考的觀點，在真正的線上使用場景中，協議會比本文中的復雜和更加有層次。具體格式如下：

{
    "id": "short", // 消息類型，1是文本協議格式；2是圖片協議格式；3是文件協議格式
    "sender": "long", // 發送用戶唯一id
    "reciever": "long", // 接受用戶唯一id
    "data": "string" // 消息內容，如果是文本協議則為文本內容；如果是圖片協議則為圖片地址；如果是文件協議則為文件地址
}
這套協議如何使用 發送消息

從協議格式可知，將上述數據按照上述固定順序放入ArrayBuffer中，即可得到一個有特定含義的二進制數據。例如：

{
    "id": 1,
    "sender": "123",
    "reciever": "456",
    "data": "Hellow World"
}

當我們需要發送此消息時，只需要：

在前2個Byte放入id。

接下來8個Byte中放入sender。

再接下來8個Byte放入reciever。

最后緊接著放入一個string類型（以WebSocket系列之字符串如何與二進制數據進行轉換博客中的格式為例，先將字符串長度構造成一個int類型，放在前4個Byte中，接下來將string類型編碼后放入）。

此數據就完全按照協議構造完成了。我們只需將次協議通過WebSocket發送即可。具體方法將會在后面章節中說明。

接收消息

從協議格式可知，當我們收到一條消息時，只需要按照協議規范來進行反向解析即可。例如：

{
    "id": 1,
    "sender": "123",
    "reciever": "456",
    "data": "Hellow World"
}

如果發送端發送的數據仍然為此消息，我們的解析順序為：

先根據前2個Byte讀取一個Short類型的id數值。

將接下來的8個Byte讀取為Long類型的sender字段。

再接下來的8個Byte讀取為Long類型的reciever字段。

接下來讀取一個string類型（以發送消息這一節的數據為例，先讀取4個Byte長度的int類型字符串長度，然后再根據長度讀取字符串即可）。

擴展此協議

當此協議字段無法滿足并且已經在線上使用時，我們應該如何擴展呢？
根據我們的寫入和讀取步驟，我們可以知道：每次我們讀取的二進制數據可以認為是一個格式固定的數據（string類型在構造時會有長度信息，因此認為也是長度相對固定），所以我們在讀取二進制數據時讀取的長度也是固定的。因此，我們在擴展時只需要往協議后面增加字段即可。

擴展前的應用仍然會讀取之前已經確定的數據協議，只需要保證內容不變，那么功能也不會變。

擴展后的應用能夠解析擴展后的協議，因此得到更多的數據，從而可以實現更多的功能。

WebSocket如何發送二進制數據

通過如何設計一個二進制協議一章，我們知道了如何定義WebSocket傳輸的二進制數據格式。下面，我們來看下如何在WebSocket中發送二進制數據：

let arrayBuffer = getArrayBufferMessagesFromUser(); // 獲取用戶需要發送的消息數據,為一個ArrayBuffer對象
let webSocket = getWebSocket(); // 獲取已經連接成功的WebSocket實例

websocket.binaryType = "arraybuffer"; // 指定WebSocket接受ArrayBuffer實例作為參數

webSocket.send(arrayBuffer);

通過上面的示例我們可以知道，WebSocket在發送string類型的數據或者ArrayBuffer類型的數據時，使用的API接口都是send方法，我們只需要在WebSocket初始化后指定傳輸類型binaryType即可。

WebSocket如何處理接收的二進制數據

通過WebSocket如何發送二進制數據一章，我們知道了如何發送二進制數據。接下來，讓我們開看下如何處理WebSocket接收到的二進制數據：

let webSocket = getWebSocket(); // 獲取已經連接成功的WebSocket實例

websocket.binaryType = "arraybuffer"; // 指定WebSocket接受ArrayBuffer實例作為參數

webSocket.addEventListener("message", (message) => {
    let arrayBuffer = message.data; // 獲取用戶接收到的消息數據,為一個ArrayBuffer對象
    let data = parseMessage(arrayBuffer); // 解析二進制數據
});

通過上面的示例我們可以知道，當我們在建立連接時指定了傳輸類型binaryType為ArrayBuffer之后，我們通過WebSocket收到的數據也是一個ArrayBuffer實例。我們只需要根據第一章講解的方式進行解析即可。

總結

本文作為WebSocket系列的第四篇，通過一個IM聊天應用的示例將前三篇博客分享的內容串聯起來，給讀者完整介紹了在WebSocket中使用二進制數據進行傳輸的方法以及相關的數據類型轉換。
通過前面4篇博客的內容，讀者可以根據自己的需求快速的構造和封裝WebSocket進行二進制數據傳輸，基本能夠串聯整個應用流程。
WebSocket系列下一篇文章將會介紹在線上環境中，如何保證WebSocket的連接，以及線上可能遇到的問題。通過應對WebSocket可能出現的問題，我們能夠讓整個長連接更加健壯。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93869.html

相關文章

  • WebSocket系列之如何建立和維護可靠的連接

    摘要：與此同時，后端服務的中也有相關的長連接維持時長設置。如何快速的恢復連接根據上面的操作方案，我們會在網絡異常時斷開連接。 概述 通過前四篇博客，相信讀者對于WebSocket的使用和數據（不論是ArrayBuffer還是String）傳輸都有了一個深刻的了解。現在我們來介紹下，我在使用WebSocket時，連接相關模塊遇到的一些共性問題，以及我們如何解決這些問題。 本文作為WebSock...

    BetaRabbit 評論0 收藏0

  • WebSocket系列之字符串如何與二進制數據間進行互相轉換

    摘要：總結通過使用和，我們能夠在數據和二進制數據中進行互相轉換。下一篇系列相關的博客，將會介紹如何通過來向后端傳遞二進制數據，以及如何處理通過收到的二進制數據。 概述 上一篇博客我們說到了如何進行數字類型（如Short、Int、Long類型）如何在JavaScript中進行二進制轉換，如果感興趣的可以可以閱讀本系列第二篇博客——WebSocket系列之JavaScript中數字數據如何轉換為...

    stackfing 評論0 收藏0

  • WebSocket系列之JavaScript中數字數據如何轉換為二進制數據

    摘要：以和為例，說明中的數字數據如何轉換為二進制數據。對象用來表示通用的固定長度的原始二進制數據緩沖區。中的數字數據如何轉換為二進制數據對和有了一個大概的了解，下面讓我們來看下它是如何進行二進制數據操作的。 概述 本文主要通過對JavaScript中數字數據與二進制數據之間的轉換，讓讀者能夠了解在JavaScript中如何對數字類型（包括但不限于Number類型）進行處理。 二進制數據在日常...

    MASAILA 評論0 收藏0

  • JavaScript 工作原理之五－深入理解 WebSockets 和帶有 SSE 機制的HTTP/

    摘要：幀協議讓我們深入了解下幀協議。目前可用的值該幀接續前面一幀的有效載荷。該幀包含二進制數據。幀有以下幾類長度表示有效載荷的長度。數據分片有效載荷數據可以被分成多個獨立的幀。接收端會緩沖這些幀直到位有值。 原文請查閱這里，略有改動，本文采用知識共享署名 3.0 中國大陸許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 這是 JavaScript 工作原...

    lijinke666 評論0 收藏0

  • WebSocket系列之基礎知識入門篇

    摘要：概述本文是系列的第一篇，主要介紹相關的基礎協議知識和。客戶端收到響應后，立即發起下一次的請求。收到消息通過事件來接收消息。類型則需要傳遞一個對象作為參數，相關的內容也將在本系列第二篇中進行介紹。 概述 本文是WebSocket系列的第一篇，主要介紹WebSocket相關的基礎協議知識和API。由于WebSocket的相關介紹在MDN中分布較亂，初學者不太容易入門，因此通過本文將相關基礎...

    Yuqi 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<