Fork me on GitHub

Angular-Flask传输Protobuf数据(Flask系列1)

本文主要是讲述通过Angular向Flask通过restful发送Protobuf类型的二进制流数据和返回二进制流数据的具体过程,以及其中一些注意点。

Angular发送Protobuf类型Request

通过http发送post请求,几点注意点。

this.http.post(url,body,options).subscribe((response:any)=>{ })

  1. post请求中的body直接赋值protobuf类型数据即可
  2. options中需要定义'Content-Type': 'application/octet-stream'

    Angular获取并解析Protobuf类型Response

    Angular获取返回的Protobuf类型数据需要注意几点

    this.http.post(url,body,options).subscribe((response:any)=>{ })

  3. response类型设置为any

  4. options中定义responseTyperesponseType: 'ArrayBuffer' as 'json',切记,无论什么返回类型,一定要添加as 'json'
  5. 综上,利用Protobuf类型数据传输,Angular的options定义为:

    1
    2
    3
    4
    5
    6
    const httpOptions = {
    headers: new HttpHeaders({
    'Content-Type': 'application/octet-stream'
    }),
    responseType: 'ArrayBuffer' as 'json'
    };
  6. 获取到返回的buffer数据之后,具体Protobuf的解析如下

    const data = GeoThinking.ML.catalog.QueryResponse.decode(new Uint8Array(result));

    GeoThinking.ML.catalog.QueryResponse是protobuf中定义的类型

Flask获取并解析ProtoBuf类型Request

后端flask框架获取解析Protobuf类型数据有几点注意点:

  1. 前端所传输的数据通过request.data获取
  2. 获取到的数据被flask二次编码,原ArrayBuffer类型的数据变为json格式的二进制数据,如图:
    重新编码数据
  3. 通过对其重新遍历,转换格式为二进制数据。具体代码如下:
    1
    2
    3
    4
    5
    6
    d = x.decode('ASCii')
    requestJson=json.loads(d,object_pairs_hook=OrderedDict)
    tempList=[]
    for k,v in requestJson.items():
    tempList.append(v)
    tempList=bytes(tempList)

并通过实例化ProtoBuf的类型后,ParseFromString进行解码:

1
2
ca = catalog_pb2.QueryRequest()
ca.ParseFromString(bytes(tempList))

Flask发送Protobuf类型Response

对后端向前端发送Protobuf类型请求,需要定义headers

1
2
3
4
5
6
headers = {
'Content-Type': 'application/octet-stream',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST,OPTIONS'
}

'Content-Type'定义为'application/octet-stream'即可。

一个努力向上的GISER
0%