{"id":299262,"date":"2020-02-25T21:00:23","date_gmt":"2020-02-25T21:00:23","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=299262"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-02-25T21:00:23","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=299262","title":{"rendered":"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 Protobuf \u0438\u043b\u0438 JSON \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435?"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/489916\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b3b\/a64\/22e\/b3ba6422e0fb8cefb21ac424135de8b2.png\" alt=\"image\"><\/p>\n<p>  \u0412 \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 frontend framework VUE \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 PHP, \u0438 \u0443\u0436\u0435 \u043a\u0430\u043a 17 \u043b\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u043d\u0430\u0447\u0430\u043b \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f, \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u0434 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u041f\u0440\u043e \u0431\u044d\u043a\u0435\u043d\u0434<\/h4>\n<p>  \u041f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u0447\u0435\u043d\u044c \u0437\u0430\u043c\u043e\u0440\u043e\u0447\u0435\u043d\u043d\u044b\u0439, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 DDD \u0438\u043c\u0435\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0435 \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0439 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<h4>\u041f\u0440\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434<\/h4>\n<p>  4\u043c\u0435\u0441. \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JSON \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043c\u0430\u043f\u0438\u043b\u0438 \u0432 State Vuex \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u043d\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435. \u041d\u043e \u0434\u043b\u044f \u043e\u0442\u0434\u0430\u0447\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043c\u043e\u0433 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0437\u0430\u043c\u0430\u043f\u0438\u0442\u044c \u0441\u0432\u043e\u0438 DTO \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c, \u043d\u043e \u0442\u0430\u043a \u043d\u0430\u0434\u043e \ud83d\ude42 )<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<p>  \u0412\u0440\u043e\u0434\u0435 \u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e, \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0435\u0441\u0442\u044c, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u041d\u0430\u0447\u0430\u043b\u0438 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u0435\u0449\u0435 \u043c\u0435\u043d\u044c\u0448\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b\u0438 \u0441\u0432\u043e\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0442.\u043f\u2026 API \u0441\u0442\u0430\u043b\u043e \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u0441\u043b\u0435\u0434 \u043d\u043e\u0432\u044b\u043c \u0437\u0430\u0434\u0430\u0447\u0430\u043c \u043e\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432, \u0438 \u0432\u0441\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u0442\u0430\u043b\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c, \u0442\u043e \u0442\u0430\u043c \u0437\u0430\u043c\u0430\u043f\u0438\u043b\u0438 \u043d\u0435 \u0442\u0430\u043a, \u0442\u043e \u043f\u043e\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c\u2026<\/p>\n<p>  \u0418 \u0442\u0443\u0442 \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430\u0445, \u043c\u0430\u043f\u0438\u043d\u0433\u0430\u0445 \u0438 \u0442.\u043f.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432, \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0434\u0432\u0443\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c:<\/p>\n<ol>\n<li><a href=\"https:\/\/developers.google.com\/protocol-buffers\" rel=\"nofollow\">protocol-buffers<\/a><\/li>\n<li>\u0410\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f JS DTO \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0430, \u0441 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 JSON \u0432 \u044d\u0442\u0438 DTO.<\/li>\n<\/ol>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0431\u044b \u043f\u0435\u0440\u0430, \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Protobuf \u043e\u0442 google.<\/p>\n<p>  \u0418 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443:<\/p>\n<ol>\n<li>\u0423\u0436\u0435 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0434\u043b\u044f PHP \u0438 \u0434\u043b\u044f JS.<\/li>\n<li>\u0415\u0441\u0442\u044c \u0430\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u043c .proto<\/li>\n<li>\u041c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043d\u0435\u043a\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/li>\n<li>\u041e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0438\u0441\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435 \u043a\u0430\u043a \u043d\u0430 PHP \u0442\u0430\u043a \u0438 \u043d\u0430 JS.<\/li>\n<li>\u0418 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0438\u0448\u043a\u0438 \u043a\u0430\u043a gRPC \u0438 \u0442.\u043f \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/li>\n<\/ol>\n<p>  <\/p>\n<h4>\u0425\u0432\u0430\u0442\u0438\u0442 \u0431\u043e\u043b\u0442\u043e\u0432\u043d\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442<\/h4>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 PHP \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u0442\u0430\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0442\u0435 \u0436\u0435.<\/p>\n<p>  \u041f\u043e\u043a\u0430\u0436\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e JS \u0438 \u043c\u0438\u043d\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 Node.js.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. <a href=\"https:\/\/developers.google.com\/protocol-buffers\/docs\/proto3\" rel=\"nofollow\">\u0414\u043e\u043a\u0430<\/a>.<\/p>\n<p>  <b>product.proto<\/b><\/p>\n<pre><code class=\"plaintext\">syntax = &quot;proto3&quot;;  package api;  import &quot;price.proto&quot;;  message Product {     message Id {         uint32 value = 1;     }     Id id = 1;     string name = 2;     string text = 3;     string url = 4;     Price price = 5; } <\/code><\/pre>\n<p>  <b>price.proto<\/b><\/p>\n<pre><code class=\"plaintext\">syntax = &quot;proto3&quot;; package api;  message Price {     float value = 1;     uint32 tax = 2; }<\/code><\/pre>\n<p>  <b>service.proto<\/b><\/p>\n<pre><code class=\"plaintext\">syntax = &quot;proto3&quot;;  package api;  import &quot;product.proto&quot;;  service ApiService {     rpc getById (Product.Id) returns (Product); }<\/code><\/pre>\n<p>  \u041f\u043e\u044f\u0441\u043d\u044e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0441\u0435\u0440\u0432\u0438\u0441, \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0435\u0441\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u0421\u0435\u0440\u0432\u0438\u0441 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438 \u0447\u0442\u043e \u043e\u0442\u0434\u0430\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041e\u043d \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f gRPC.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 <a href=\"https:\/\/github.com\/protocolbuffers\/protobuf\/releases\" rel=\"nofollow\">\u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440<\/a> \u043a\u043e\u0434\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n<p>  \u0418 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0434 JS.<\/p>\n<pre><code class=\"plaintext\">.\/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<\/code><\/pre>\n<p>  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 <a href=\"https:\/\/developers.google.com\/protocol-buffers\/docs\/reference\/javascript-generated\" rel=\"nofollow\">\u0434\u043e\u043a\u0435<\/a>.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 3 JS \u0444\u0430\u0439\u043b\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0436\u0435 \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043e \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c, \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0431\u0443\u0444\u0435\u0440 \u0438 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437 \u0431\u0443\u0444\u0435\u0440\u0430.<\/p>\n<p>  price_pb.js<br \/>  product_pb.js<br \/>  service_pb.js<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0443\u0436\u0435 JS \u043a\u043e\u0434.<\/p>\n<pre><code class=\"javascript\">import { Product } from '..\/proto\/product_pb';  \/\/ \u0412 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0447\u0442\u043e \u0436\u0434\u0435\u043c \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 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();  \/\/ \u0416\u0434\u0435\u043c \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 Product, \u0435\u0433\u043e \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c, \u043e\u043d \u0441\u0430\u043c \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442,  \/\/ \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442 \u0432 \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438 \u0441\u0430\u0431\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. const data = Product.deserializeBinary(result); console.log(data.toObject()); <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432.<\/p>\n<p>  \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0437\u0430\u044e\u0437\u0430\u0435\u043c Express<\/p>\n<pre><code class=\"javascript\">const express = require('express'); const cors = require('cors');  const app = express(); app.use(cors());  \/\/ \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u0438\u0445 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. const Product = require('.\/src\/proto\/product_pb').Product; const Price = require('.\/src\/proto\/price_pb').Price;  \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0431\u0443\u0444\u0435\u0440 \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0442.\u043a \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e. app.use (function(req, res, next) {   let data = [];   req.on('data', function(chunk) {     data.push(chunk);   });   req.on('end', function() {     if (data.length &lt;= 0 ) return next();     data = Buffer.concat(data);     console.log('Received buffer', data);     req.raw = data;     next();   }) });  app.post('\/api\/getById', function (req, res) {   \/\/ \u041e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c Product.Id, \u0435\u0433\u043e \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c   const prId = Product.Id.deserializeBinary(req.raw);   const id = prId.toObject().value;    \/\/ \u0414\u0430\u043b\u0435\u0435 \u043a\u0443\u0447\u0430 &quot;\u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438&quot; \u0438 \u043c\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u043c \u043e\u0442\u0432\u0435\u0442   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);    \/\/ \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 Product   res.send(Buffer.from(product.serializeBinary())); });  app.listen(3008, function () {   console.log('Example app listening on port 3008!'); }); <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0427\u0442\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0432 \u0438\u0442\u043e\u0433\u0435<\/h4>\n<p>  <\/p>\n<ol>\n<li>\u0415\u0434\u0438\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043f\u0440\u0430\u0432\u0434\u044b \u0432 \u0432\u0438\u0434\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c.<\/li>\n<li>\u041d\u0435\u0442 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b, \u0435\u0441\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043a\u0430\u043a \u0432 \u0432\u0438\u0434\u0435 \u0430\u0432\u0442\u043e\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e HTML \u0442\u0430\u043a \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 .proto \u0444\u0430\u0439\u043b\u043e\u0432.<\/li>\n<li>\u0412\u0435\u0437\u0434\u0435 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u0431\u0435\u0437 \u0441\u0432\u043e\u0438\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439 \u0438 \u0442.\u043f (\u0430 \u0432\u0441\u0435 \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0447\u0442\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043b\u044e\u0431\u0438\u0442 \u043e\u0442\u0441\u0435\u0431\u044f\u0442\u0438\u043d\u0443 \ud83d\ude42 )<\/li>\n<li>\u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u043c \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0432\u0435\u0431 \u0441\u043e\u043a\u0435\u0442\u0430\u043c.<\/li>\n<\/ol>\n<p>  \u0415\u0441\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u0438\u043d\u0443\u0441, \u044d\u0442\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0430\u0446\u0438\u0438 \u0438 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p>  \u042f \u0432\u0437\u044f\u043b lorem ipsum \u043d\u0430 10 \u0430\u0431\u0437\u0430\u0446\u0435\u0432, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c 5.5\u043a\u0431 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 Price, Product. \u0418 \u043f\u043e\u0433\u043e\u043d\u044f\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e Protobuf \u0438 JSON (\u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 JSON \u0441\u0445\u0435\u043c\u044b, \u0432\u043c\u0435\u0441\u0442\u043e Protobuf \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432)<\/p>\n<pre><code class=\"plaintext\">\u0431\u0435\u0437 \u0443\u0447\u0435\u0442\u0430 \u0441\u0430\u043c\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432  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 <\/code><\/pre>\n<p>  \u0412\u0441\u0435\u043c \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \ud83d\ude42<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/489916\/\"> https:\/\/habr.com\/ru\/post\/489916\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/489916\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b3b\/a64\/22e\/b3ba6422e0fb8cefb21ac424135de8b2.png\" alt=\"image\"><\/p>\n<p>  \u0412 \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 frontend framework VUE \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 PHP, \u0438 \u0443\u0436\u0435 \u043a\u0430\u043a 17 \u043b\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u043d\u0430\u0447\u0430\u043b \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f, \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u0434 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-299262","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/299262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=299262"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/299262\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=299262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=299262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=299262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}