阿超 > protocol示例

protocol示例

2024-10-22

java

没有意义的事物是最美丽的。——《新名字的故事》

github：

https://github.com/protocolbuffers/protobuf

官方文档：

https://protobuf.dev/

Protocol Buffers（又名 protobuf）是 Google 的语言中立、平台中立、可扩展的机制，用于序列化结构化数据。您可以在protobuf 的文档中了解更多信息。

使用 Protocol Buffers 在前后端传输数据的示例。后端使用 Spring Boot，前端使用 Parcel 和 JavaScript，前后端通过 .proto 文件定义的 Person 类进行数据传输。

后端 (Java - Spring Boot)

  1. pom.xml (包含 Spring Boot 和 Protocol Buffers 的依赖):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <project xmlns="http://maven.apache.org/POM/4.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>

     <groupId>com.example</groupId>
     <artifactId>protobuf-example</artifactId>
     <version>1.0.0</version>

     <dependencies>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
         <dependency>
             <groupId>com.google.protobuf</groupId>
             <artifactId>protobuf-java</artifactId>
             <version>3.21.12</version>
         </dependency>
     </dependencies>

     <build>
         <plugins>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
             </plugin>
             <plugin>
                 <groupId>org.xolstice.maven.plugins</groupId>
                 <artifactId>protobuf-maven-plugin</artifactId>
                 <version>0.6.1</version>
                 <configuration>
                     <protocArtifact>com.google.protobuf:protoc:3.21.12:exe:${os.detected.classifier}</protocArtifact>
                 </configuration>
                 <executions>
                     <execution>
                         <goals>
                             <goal>compile</goal>
                             <goal>compile-custom</goal>
                         </goals>
                     </execution>
                 </executions>
             </plugin>
         </plugins>
     </build>
    </project>

  2. Person.proto (位于 src/main/proto):

    1
    2
    3
    4
    5
    6
    syntax = "proto3";

     message Person {
           string name = 1;
           int32 age = 2;
     }

  3. FooController.java (Spring Boot 控制器):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    package com.example.protobufexample;

    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    import java.util.Base64;

    @RestController
    public class FooController {

        @GetMapping("/foo")
        public String foo() {
            Person person = Person.newBuilder().setName("foo").setAge(42).build();
            return Base64.getEncoder().encodeToString(person.toByteArray());
        }
    }

  4. ProtobufExampleApplication.java (Spring Boot 主启动类):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    package com.example.protobufexample;

    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;

    @SpringBootApplication
    public class ProtobufExampleApplication {

        public static void main(String[] args) {
            SpringApplication.run(ProtobufExampleApplication.class, args);
        }

    }

前端 (JavaScript - Parcel)

  1. package.json (Parcel 和 Protocol Buffers 依赖):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "name": "protobuf-example",
      "version": "1.0.0",
      "scripts": {
        "start": "parcel index.html"
      },
      "dependencies": {
        "parcel": "^2.0.0",
        "protobufjs": "^6.11.2"
      }
    }

  2. Person.proto (位于前端根目录):

    1
    2
    3
    4
    5
    6
    syntax = "proto3";

     message Person {
           string name = 1;
           int32 age = 2;
     }

  3. index.html (HTML 文件):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Protobuf Example</title>
    </head>
    <body>
        <h1>Protobuf Example</h1>
        <script src="./index.js"></script>
    </body>
    </html>

  4. index.js (前端获取后端数据并解码):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import protobuf from "protobufjs";

    fetch('/foo')
        .then(response => response.text())
        .then(data => {
            const Person = protobuf.Root.fromJSON(require('./Person.json')).lookupType("Person");
            const decoded = Person.decode(Buffer.from(data, 'base64'));
            console.log(decoded);
        });

  5. 生成 Person.json 文件 (根据 Person.proto 生成 JavaScript):
    可以通过以下命令生成 JavaScript 表示的 Person.proto 文件:

    1
    npx pbjs -t json Person.proto > Person.json

如何运行：

  1. 后端: 启动 Spring Boot 应用：

    1
    mvn spring-boot:run

  2. 前端: 安装依赖并启动 Parcel：

    1
    2
    npm install
    npm start

这个示例创建了一个 /foo GET 请求的后端接口，该接口返回 Person 对象的 base64 编码数据，前端获取并使用 Protocol Buffers 解码，最终输出到控制台。