WebSocket中關於使用ProtoBuf傳輸資料介紹js部分

阿新 • • 發佈：2019-01-13

前言介紹：

本案例主要介紹如何在js裡把接收到的protobuf資料轉換為物件與如何把物件轉換為protobuf資料。

為了能簡單說明問題，在本案例中只有js部分，關於後臺服務的像前臺傳送資料部分在案例一中已經介紹。

環境需求：

需要github大神wiki提供的三個js檔案：[本案例的下載中已經提供]

ｇｉｔｈｕｂ：https://github.com/dcodeIO/ProtoBuf.js/wiki

１.ByteBufferAB.min.js

2.Long.min.js

3.ProtoBuf.min.js

程式碼介紹：

itstack.proto

//個人部落格:www.itstack.org
//站長:付政委
//QQ:184172133
//這裡是一個proto檔案，我們在www.itstack.org為想象，定義它下面分為大知識點模組，每個模組下又有子模組
// 父模組
message ParentModule{
// 序號
required int32 number =1;
// 名稱
required string name =2;
// 子模組[repeated　可重複，相當於集合]
repeated ChildrenModule childrenModule=3;
}
// 子模組
message ChildrenModule{
// 序號
required int32 number =1;
// 名稱
required

string name =2;
}

www.itstack.org.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="lib/Long.min.js"></script>
<script src="lib/ByteBufferAB.min.js"></script>
<script src="lib/ProtoBuf.min.js"></script>
<script language="javascript" type="text/javascript">
if(typeof dcodeIO ==='undefined'||!dcodeIO.ProtoBuf){
throw(newError("ProtoBuf.js is not present. Please see www/index.html for manual setup instructions."));
}
// 建立ProtoBuf
varProtoBuf= dcodeIO.ProtoBuf;
// 先構造兩個子模組
// 子模組－１
varChildrenModule_1=ProtoBuf.loadProtoFile("itstack.proto").build("ChildrenModule");
var childrenModule_1 =newChildrenModule_1();
childrenModule_1.setNumber(1);
childrenModule_1.setName("Nginx5.0 初級案例");
// 子模組－２
varChildrenModule_2=ProtoBuf.loadProtoFile("itstack.proto").build("ChildrenModule");
var childrenModule_2 =newChildrenModule_2();
childrenModule_2.setNumber(2);
childrenModule_2.setName("Nginx5.0 中級案例");
// 父模組
varParentModule=ProtoBuf.loadProtoFile("itstack.proto").build("ParentModule");
// 像父模組設定值
var parentModule =newParentModule();
parentModule.setNumber(1);
parentModule.setName("Nginx5.0");
parentModule.setChildrenModule(newArray(childrenModule_1,childrenModule_2));
// 列印父模組此時資料【火狐瀏覽器Ｆ12進行觀察】
console.log("ProtoBuf物件資料：");
console.log(parentModule);
// 模擬傳送
// 1.物件轉位元組：parentModule.toArrayBuffer()
// 2.位元組轉物件：ParentModule.decode()
var msgDec =ParentModule.decode(parentModule.toArrayBuffer());
// 接收到的資料：
console.info("接收到的資料：");
console.info(parentModule.toArrayBuffer());
// 列印轉換後的資訊
console.info("經過ParentModule.decode轉換後的資料：");
console.info(msgDec);
</script>
</head>
<body>
</body>
</html>

測試解圖：

工程下載：

WebSocket中關於使用ProtoBuf傳輸資料介紹js部分

前言介紹：本案例主要介紹如何在js裡把接收到的protobuf資料轉換為物件與如何把物件轉換為protobuf資料。為了能簡單說明問題，在本案例中只有js部分，關於後臺服務的像前臺傳送資料部分在案例一中已經介紹。環境需求：需要github大神wik

在JavaScript中處理JSON資料 jquery js 定義 json 格式

1.JSON（JavaScript Object Notation）一種簡單的資料格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON資料不需要任何特殊的API或工具包。 JSON的規則很簡單：物件是一個無序的“‘名稱:值'對”集合

js介紹-js中的變數和資料型別及相互轉換-運算子及表示式

1、什麼是js？ 2、如何編寫js？ 3、如何除錯js？ 1、什麼是js：專門編寫網頁互動的語言互動：使用者操作->程式處理和響應操作->返回處理結果 js運行於js直譯器\引擎 ->解釋執行 js的發展歷程 19

JS實現循環刪除數組中元素的方法介紹

blog 但是 rom 移除 ons 朋友 function cnblogs 調整這篇文章主要給大家介紹了關於Javascript循環刪除數組中元素的幾種方法，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。本文主

javascript之ProtoBuf在websocket中的使用

java因為ProtoBuf的序列化效率和大小都非常好，所以它在網絡通信上面應用越來越多；而webosocket也隨著web3.0應用越來越廣泛，而將這兩個結合在一起的也會慢慢形成一種趨勢；本人是為了測試自已寫的一個C# websocket，所以在web上面結合pb也寫了一個js實例:1.首先下載protob

js中typeof用法詳細介紹

css -name iter owin lease implement Language addition 並不是

資料包在電纜中的傳輸時間

2014年上半年網路工程師上午試卷綜合知識在地面上相距2000公里的兩地之間通過電纜傳輸4000位元長的資料包，資料速率為64Kb/s，從開始傳送到接收完成需要的時間為（13）。 A.48ms B.640ms C.32.5ms D.72.5ms

Java位元組序(不同語言中的網路資料傳輸時位元組序列轉換)

BIG-ENDIAN（大位元組序、高位元組序） LITTLE-ENDIAN（小位元組序、低位元組序）主機位元組序網路位元組順序 JAVA位元組序 1．BIG-ENDIAN、LITTLE-ENDIAN跟多位元組型別的資料有關的比如

開源實時音視訊技術WebRTC中RTP/RTCP資料傳輸協議的應用

1、前言 RTP/RTCP協議是流媒體通訊的基石。RTP協議定義流媒體資料在網際網路上傳輸的資料包格式，而RTCP協議則負責可靠傳輸、流量控制和擁塞控制等服務質量保證。在WebRTC專案中，RTP/RTCP模組作為傳輸模組的一部分，負責對傳送端採集到的媒體資料進行進行封包，然後交給上層網路模組

通過物理對映往虛擬機器中傳輸資料

1、在虛擬機器管理介面，找到硬碟，雙擊 2、在跳出的頁面中點選“對映” 3、在彈出的頁面中將“以只讀模式開啟檔案”選項勾去 4、選擇是“”是 5、這個時候就看到電腦上出現了一個“Z盤”，此時就可以將需要複製進虛擬機器的檔案，複製到該目錄中。 6、傳輸完畢後最好斷開對映連線。

js中的簡單資料型別和複雜資料型別的儲存

基本型別儲存的是值而複雜資料型別也叫引用型別儲存的是物件的地址如0x00001而在棧中存的是變數數值和函式引數堆中存的是物件和陣列堆疊空間分配棧（作業系統）：由作業系統自動分配釋放，存放函式的引數值，區域性變數的值等。其操作方式類似於資料結構中的棧。堆（作業系統）：一般由程式設計師分配釋放

js中的json資料

參考地址：https://wenda.so.com/q/1467626911729715 1、 json資料結構(物件和陣列) json物件：var obj = {"name":"xiao","age":12}; json陣列：var objArray = [{"nam

Netty整合SpringBoot並使用Protobuf進行資料傳輸

<build> <extensions> <extension> <groupId>kr.motd.maven</groupId>

新版的vue-cli腳手架中少了dev-server.js檔案，怎麼模擬後臺資料呢？

第一步：，在webpack.dev.conf.js中加入在webpack.dev.conf.js中引入node中的express框架即後臺模擬資料json檔案，程式碼如下： //這裡是模擬後臺資料 const expres

js中的基本資料型別和引用資料型別

基本資料型別包括：string->字串，number->數值（整數和小數），boolean->布林型別（true和false），undefined->未定義，null->空。引用資料型別：Object->物件，Array-

JS中的閉包詳細解析大全（面試避必考題） JS中閉包的介紹

JS中閉包的介紹閉包的概念閉包就是能夠讀取其他函式內部變數的函式。一、變數的作用域要理解閉包，首先必須理解Javascript特殊的變數作用域。變數的作用域無非就是兩種：全域性變數和區域性變數。 Javascript語言的特殊之處，

js 傳輸資料格式

1.返回list的data資料格式 {“storeclass”:[{“id”:“7"“className”:“名稱”}]} 遍歷 $.each(eval(data).storeclass, function(index,item){ $(”#scId").append(""+item.cla

Django中REST風格資料傳輸

在《Python Web開發：測試驅動方法》一書中的第七章，主要講解了如何利用url的方式進行資料的傳遞和儲存。本書主要採用了先測試、後建立功能的方式進行書寫，基本上所有的內容都是通過功能測試、單元測試和實現功能三個步驟的迴圈工作。這種方法讓我們能夠深刻地理

詳解JS中的基本資料型別和引用資料型別

ECMAScript變數可能包含兩種不同型別的值：基本型別值和引用型別值。基本型別值指的是簡單的資料段，而引用型別值指那些可能由多個值構成的物件。在將一個值賦值給變數時，解析器必須確定這個值是基本型別值還是引用型別值 js的六大資料型別：Number, String,

vue webpack中使用ajax傳輸資料給後臺

在使用資料傳輸中，大多數採用的都是ajax技術，那麼在vue中怎樣使用ajax技術呢？本篇將帶你入門vue axios中ajax技術。1、基本配置（1）首先在你的vue專案下配置對應的檔案axios 下載axios元件，最終放置在node_modules\axio

WebSocket中關於使用ProtoBuf傳輸資料介紹js部分

相關推薦