Protobuf- oder JSON-strukturiertes Front-End-Kommunikationsprotokoll?

Über das Backend

Über das Frontend

Probleme

1. Protokollpuffer
2. Serverseitige automatische JS-DTO-Generierung für die Front mit weiterer JSON-Verarbeitung in diesen DTOs.

1. Es gibt bereits eine Funktion, die die beschriebenen Strukturen für viele Plattformen kompiliert, einschließlich für PHP und für JS.
2. Es gibt einen Dokumentationsgenerator für erstellte Strukturen .proto
3. Sie können leicht eine Versionierung für Strukturen schrauben.
4. Die Suche nach Objekten wird beim Refactoring in PHP und JS erleichtert.
5. Und andere Chips wie gRPC usw., falls erforderlich.

Hör auf zu reden, mal sehen, wie das alles aussieht

syntax = "proto3";

package api;

import "price.proto";

message Product {
    message Id {
        uint32 value = 1;
    }
    Id id = 1;
    string name = 2;
    string text = 3;
    string url = 4;
    Price price = 5;
}

syntax = "proto3";
package api;

message Price {
    float value = 1;
    uint32 tax = 2;
}

syntax = "proto3";

package api;

import "product.proto";

service ApiService {
    rpc getById (Product.Id) returns (Product);
}

./protoc --proto_path=/Users/user/dev/habr_protobuf/public/proto --js_out=import_style=commonjs,binary:/Users/user/dev/habr_protobuf/src/proto/ /Users/user/dev/habr_protobuf/public/proto/*.proto

import { Product } from '../proto/product_pb';

//         Product.Id
const instance = new Product.Id().setValue(12345);
let message = instance.serializeBinary();

let response = await fetch('http://localhost:3008/api/getById', {
    method: 'POST',
    body: message
});

let result = await response.arrayBuffer();

//     Product,   ,    , 
//      .
const data = Product.deserializeBinary(result);
console.log(data.toObject());

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

//           .
const Product = require('./src/proto/product_pb').Product;
const Price = require('./src/proto/price_pb').Price;

//    , .     .
app.use (function(req, res, next) {
  let data = [];
  req.on('data', function(chunk) {
    data.push(chunk);
  });
  req.on('end', function() {
    if (data.length <= 0 ) return next();
    data = Buffer.concat(data);
    console.log('Received buffer', data);
    req.raw = data;
    next();
  })
});

app.post('/api/getById', function (req, res) {
  //     Product.Id,   
  const prId = Product.Id.deserializeBinary(req.raw);
  const id = prId.toObject().value;

  //   " "      
  const product = new Product();
  product.setId(new Product.Id().setValue(id));
  product.setName('Sony PSP');
  product.setUrl('http://mysite.ru/product/psp/');

  const price = new Price();
  price.setValue(35500.00);
  price.setTax(20);

  product.setPrice(price);

  //       Product
  res.send(Buffer.from(product.serializeBinary()));
});

app.listen(3008, function () {
  console.log('Example app listening on port 3008!');
});

Was haben wir insgesamt

1. Ein einziger Wahrheitspunkt in Form von generierten Objekten, die auf Strukturen basieren, die für viele Plattformen einmal beschrieben wurden.
2. Es gibt keine Verwirrung, es gibt eine klare Dokumentation sowohl in Form von automatisch generiertem HTML als auch nur zum Anzeigen von .proto-Dateien.
3. Überall wird mit bestimmten Entitäten gearbeitet, ohne deren Modifikationen usw. (und wir alle wissen, dass das Frontend Gag liebt :))
4. Die sehr bequeme Bedienung dieses Protokolls wird über Web-Sockets ausgetauscht.

   

Protobuf parsing

client
2.804999ms
1.8150000ms
0.744999ms
server
1.993ms
0.495ms
0.412ms

JSON

client
0.654999ms
0.770000ms
0.819999ms

server
0.441ms
0.307ms
0.242ms