protobuf（二）springboot整合protobuf传输数据

具体实践

1、环境准备

1. 后端
   见博客：protobuf（一）认识protobuf

2. 前端
   1）nodejs： 官网下载；PS：本次我仍是利用浏览器作为js解释器
   2）protbufjs：https://github.com/protobufjs/protobuf.js

2、开发

定义传输内容

首先，写一个.proto文件

后端开发

1. 将.proto编译为.java
2. 采用springboot框架，在controller中写请求
3. 配置protobuf序列化与反序列化

   @Configuration
   public class ProtobufConfig {
       // protobuf序列化
       @Bean
       ProtobufHttpMessageConverter protobufHttpMessageConverter() {
           return new ProtobufHttpMessageConverter();
       }
   
       // protobuf反序列化
       @Bean
       RestTemplate restTemplate(ProtobufHttpMessageConverter protobufHttpMessageConverter) {
           return new RestTemplate(Collections.singletonList(protobufHttpMessageConverter));
   	}
   }
   

前端开发

1. 将.proto编译为.js
   i. 利用google-protobuf编译js
   a）利用npm全局安装google-protobuf
   npm install google-protobuf g
   b）编译

   protoc --js_out=import_style=commonjs,binary:. xxx.proto
   

   编译完成后会生成xxx_pb.js文件
   c）browserify再次打包
   因为编译出来的内容存在node组件的内容，而浏览器无法解析，故使用browserify将js再打包一次

   browserify A.js -o B.js
   

   1）A文件通常命名为export.js，内容如下：

   var MessageBody = require('./xxx_pb.js');
   module.exports = {
   	DataProto: MessageBody
   }
   

   xxx_pb.js是protoc编译的js文件
   2）B文件是browserify打包后会生成的js文件名

2. 定义一个消息实例

   var userRegister = new proto.UserRegisterRequest();
   userRegister.setPhone("15211111111").setPassword("1234567");
   

3. 实例序列化

   var bytes = userRegister.serializeBinary();
   

4. 采用ajax发送请求

   $.ajax({
         method: 'post',
         url: '/user/register',
         data: bytes,
         responseType: 'arraybuffer',
         processData: true, //true为序列化
         contentType: 'application/x-protobuf'   //注意protobuf默认的contentType为application/x-protobuf
   }).then(res => {
        var arr = stringToBytes(res) //通过typeof发现res是string类型，需转换为type[]类型再反序列
        var tmp = proto.UserRegisterResponse.deserializeBinary(arr) //反序列化
        console.log(tmp)
        console.log(tmp.getCode())
        console.log(tmp.getMsg())
        console.log(tmp.getUserinfo())
   }).catch((error) => {
        console.log(error)
   })
   

3、测试传输效果

1. 服务端收到请求
   
2. 客户端收到的响应