Protocole de communication frontal structuré Protobuf ou JSON?

À propos du backend

À propos de frontend

Problèmes

1. tampons de protocole
2. Génération automatique JS DTO côté serveur pour le front, avec un traitement JSON supplémentaire dans ces DTO.

1. Il existe déjà une fonctionnalité qui compile les structures décrites pour de nombreuses plateformes, y compris pour PHP et pour JS.
2. Il existe un générateur de documentation pour les structures créées .proto
3. Vous pouvez facilement visser des versions pour les structures.
4. La recherche d'objets est facilitée lors de la refactorisation en PHP et JS.
5. Et d'autres puces comme gRPC, etc. si nécessaire.

Arrête de parler, voyons à quoi ça ressemble

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!');
});

Qu'avons-nous au total

1. Un seul point de vérité sous la forme d'objets générés basés sur des structures décrites une fois pour de nombreuses plateformes.
2. Il n'y a pas de confusion, il y a une documentation claire à la fois sous forme de code HTML généré automatiquement et uniquement en affichant des fichiers .proto.
3. Partout, des travaux sont en cours avec des entités spécifiques, sans leurs modifications, etc. (et nous savons tous que le frontend aime le gag :))
4. Le fonctionnement très pratique de ce protocole est échangé sur des sockets Web.

   

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