بروتوبوف أو JSON بروتوكول الاتصالات الأمامية المنظمة؟

حول الخلفية

حول الواجهة

مشاكل

1. المخازن المؤقتة للبروتوكول
2. إنشاء JS DTO التلقائي من جانب الخادم للجهة الأمامية ، مع معالجة JSON إضافية في DTOs هذه.

1. هناك بالفعل وظيفة تجمع الهياكل الموصوفة للعديد من المنصات ، بما في ذلك PHP و JS.
2. يوجد مولد توثيق للهياكل التي تم إنشاؤها. pro
3. يمكنك بسهولة ربط بعض الإصدارات للهياكل.
4. يتم تسهيل البحث عن الكائنات عند إعادة البناء في كل من PHP و JS.
5. والرقائق الأخرى مثل gRPC ، وما إلى ذلك إذا لزم الأمر.

توقف عن الحديث ، دعنا نرى كيف يبدو كل شيء

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

ماذا لدينا في المجموع

1. نقطة واحدة من الحقيقة في شكل كائنات ولدت على أساس الهياكل التي تم وصفها مرة واحدة للعديد من المنصات.
2. لا يوجد ارتباك ، فهناك وثائق واضحة في شكل HTML تم إنشاؤه تلقائيًا وعرض ملفات .proto فقط.
3. في كل مكان ، يتم العمل مع كيانات محددة ، دون تعديلات ، وما إلى ذلك (ونعلم جميعًا أن الواجهة الأمامية تحب الكمامات :))
4. يتم تبادل تشغيل هذا البروتوكول بشكل مريح للغاية عبر مقابس الويب.

   

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