admin管理员组文章数量:1794759
protocol示例
没有意义的事物是最美丽的。——《新名字的故事》
github:
官方文档:
/
Protocol Buffers(又名 protobuf)是 Google 的语言中立、平台中立、可扩展的机制,用于序列化结构化数据。您可以在protobuf 的文档中了解更多信息。
使用 Protocol Buffers 在前后端传输数据的示例。后端使用 Spring Boot,前端使用 Parcel 和 JavaScript,前后端通过 .proto
文件定义的 Person
类进行数据传输。
后端 (Java - Spring Boot)
pom.xml (包含 Spring Boot 和 Protocol Buffers 的依赖):
代码语言:javascript代码运行次数:0运行复制<project xmlns=".0.0"
xmlns:xsi=";
xsi:schemaLocation=".0.0 .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>
Person.proto (位于 src/main/proto
):
syntax = "proto3";
message Person {
string name = 1;
int32 age = 2;
}
FooController.java (Spring Boot 控制器):
代码语言:javascript代码运行次数:0运行复制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());
}
}
ProtobufExampleApplication.java (Spring Boot 主启动类):
代码语言:javascript代码运行次数:0运行复制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)
package.json (Parcel 和 Protocol Buffers 依赖):
代码语言:javascript代码运行次数:0运行复制{
"name": "protobuf-example",
"version": "1.0.0",
"scripts": {
"start": "parcel index.html"
},
"dependencies": {
"parcel": "^2.0.0",
"protobufjs": "^6.11.2"
}
}
Person.proto (位于前端根目录):
代码语言:javascript代码运行次数:0运行复制syntax = "proto3";
message Person {
string name = 1;
int32 age = 2;
}
index.html (HTML 文件):
代码语言:javascript代码运行次数:0运行复制<!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>
index.js (前端获取后端数据并解码):
代码语言:javascript代码运行次数:0运行复制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);
});
生成 Person.json
文件 (根据 Person.proto
生成 JavaScript):
可以通过以下命令生成 JavaScript 表示的 Person.proto
文件:
npx pbjs -t json Person.proto > Person.json
如何运行:
后端: 启动 Spring Boot 应用:
代码语言:javascript代码运行次数:0运行复制mvn spring-boot:run
前端: 安装依赖并启动 Parcel:
代码语言:javascript代码运行次数:0运行复制npm install
npm start
这个示例创建了一个 /foo
GET 请求的后端接口,该接口返回 Person
对象的 base64 编码数据,前端获取并使用 Protocol Buffers 解码,最终输出到控制台。
本文标签: protocol示例
版权声明:本文标题:protocol示例 内容由林淑君副主任自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.xiehuijuan.com/baike/1754626905a1704528.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论