摘要：呵呵呵打印出來(lái)的是二進(jìn)制流需要進(jìn)行化然后給前端。不然的話瀏覽器會(huì)自動(dòng)解析成文字的前端需要進(jìn)行接受二進(jìn)制流先引入文件以及插件前端用請(qǐng)求的路由，在回調(diào)函數(shù)里的為后端的返回值。

Google Protocol Buffers 簡(jiǎn)稱(chēng) Protobuf，它提供了一種靈活、高效、自動(dòng)序列化結(jié)構(gòu)數(shù)據(jù)的機(jī)制，可以聯(lián)想 XML，但是比 XML 更小、更快、更簡(jiǎn)單。僅需要自定義一次你所需的數(shù)據(jù)格式，然后用戶(hù)就可以使用 Protobuf 編譯器自動(dòng)生成各種語(yǔ)言的源碼，方便的讀寫(xiě)用戶(hù)自定義的格式化的數(shù)據(jù)。與語(yǔ)言無(wú)關(guān)，與平臺(tái)無(wú)關(guān)，還可以在不破壞原數(shù)據(jù)格式的基礎(chǔ)上，依據(jù)老的數(shù)據(jù)格式，更新現(xiàn)有的數(shù)據(jù)格式。

前后端都是以二進(jìn)制形式進(jìn)行交互信息。前后端定義proto后綴的文件，以此文件來(lái)當(dāng)文檔來(lái)進(jìn)行溝通。

以下為protobuf文件的demo，test.proto，文件的結(jié)構(gòu)確實(shí)簡(jiǎn)單明了。

enum FOO {
  BAR = 1;
}

message Test {
  required float num  = 1;
  required string payload = 2;
  optional string payloads = 3;
}

message AnotherOne {
  repeated FOO list = 1;
}

后端以node為例子：
安裝bufferhelper以及protocol-buffers進(jìn)行解析protobuf文件

npm install bufferhelper
npm install protocol-buffers

前端需要安裝解析protobuf的環(huán)境。
mac使用brew安裝protobuf環(huán)境。此操作需要先安裝Homebrew環(huán)境。具體的Homebrew的安裝自行搜索。
windows的前端環(huán)境安裝有點(diǎn)不一樣，自行搜索。

brew install protobuf

測(cè)試前端proto環(huán)境是不是安裝好了，如果有版本就是安裝好了。

protoc --version

在進(jìn)行前后端交互之前，前端需要進(jìn)行編譯proto文件。
test.proto為前端以及后端相同的proto文件。先編譯為js文件再執(zhí)行。首先進(jìn)入node項(xiàng)目的proto的目錄下面，執(zhí)行下面的命令之后會(huì)生成test_pb.js文件。最后js只需要解析這個(gè)文件即可。前端也需要執(zhí)行這樣的操作，因?yàn)槲疫@邊是前后端分離的。是兩個(gè)項(xiàng)目，所以?xún)蓚€(gè)項(xiàng)目都需要編譯。

protoc --js_out=import_style=commonjs,binary:. test.proto

后端賦值proto文件的內(nèi)容并傳給前端。
后端傳protobuf二進(jìn)制給前端，要先轉(zhuǎn)化為json才可以給前端。不然的話前端會(huì)轉(zhuǎn)化成亂碼的。前端需要請(qǐng)求此路由。

app.get("/proto/get", function (req, res) {
  let protobuf = require("protocol-buffers")
  let messages=protobuf(fs.readFileSync("./proto/test.proto")
  let buf = messages.Test.encode({
    num: 42,
    payload: "hello world node js and javahhh呵呵呵",
    payloads: ""
  })
  console.log(buf) // 打印出來(lái)的是二進(jìn)制流
  res.send(JSON.stringify(buf)); //需要進(jìn)行json化然后給前端。不然的話瀏覽器會(huì)自動(dòng)解析成文字的
})

前端需要進(jìn)行接受二進(jìn)制流
先引入proto.js文件以及protobufjs插件

  import awesome from "../../proto/test_pb.js"

前端用axios請(qǐng)求/proto/get的路由，在回調(diào)函數(shù)里的res.data為后端的返回值。進(jìn)行以下操作。打印出來(lái)的message3也是解析好的文件。

 axios({
      method:"get",
      url: "/proto/get",
      headers: { "contentType":"application/x-protobuf"} }).then(res => {
      let message3 = awesome.Test.deserializeBinary(res.data.data)
      let nums = message3.getNum()
      console.log(nums) // nums=42。解析出來(lái)就是后端傳過(guò)來(lái)的42
      let pm = awesome.Test.deserializeBinary(res.data.data)
      let protoBuf = pm.toObject()
      console.log("protoBuf: ", protoBuf) // 打印出來(lái)是一個(gè)對(duì)象
    }).catch((error) => {
      console.log(error)
    })

前端需要進(jìn)行proto文件的賦值以及轉(zhuǎn)換為二進(jìn)制給后端
引入需要依賴(lài)的文件。

  import awesome from "../../proto/test_pb.js"
  import protobuf from "protobufjs"

     let message = new awesome.Test() // 調(diào)用Person對(duì)象  實(shí)例化
    // 賦值
    message.setNum(23)
    message.setPayload("asd")
    // 序列化
    let bytes = message.serializeBinary() //  字節(jié)流
    let blob = new Blob([bytes], {type: "buffer"});
    axios({
      method:"post",
      url: "/proto/send",
      data: blob,
      headers: {
        "Content-Type": "application/octet-stream" // 這里根據(jù)后臺(tái)要求進(jìn)行設(shè)置的，如果沒(méi)有要求應(yīng)該是 application/octet-stream （二進(jìn)制流）
      }
    }).then(res => {
      console.log(res)
    }).catch((error) => {
      console.log(error)
    })

后端需要接受文件
引入文件

let BufferHelper = require("bufferhelper");

接收字節(jié)流的代碼

app.post("/proto/send", function (req, res) {
  let bufferHelper = new BufferHelper();
  req.on("data", function (chunk) {
    bufferHelper.concat(chunk);
  });
  req.on("end", function () {
    let protobuf = require("protocol-buffers")
    let buffer = bufferHelper.toBuffer();
    console.log(buffer) // 這里已經(jīng)就是二進(jìn)制文件了
    let message3 = awesome.Test.deserializeBinary(buffer)
    console.log(message3.getNum()) // 打印的就是前端傳的23
    let pm = awesome.Test.deserializeBinary(buffer)
    let protoBuf = pm.toObject()
    console.log(protoBuf) // 打印的是{ num: 23, payload: "asd", payloads: "asds" }
    console.log(protoBuf.num) // 打印23
  });
})

以上就是關(guān)于protobuf的前后交互。如有錯(cuò)誤，請(qǐng)指出。