前端vue+sockjs+stomp+protobuf实践

前言

最近，由于公司最左股市行情系统，需要用到socket进行前后端数据交互，涉及到 protobuf 数据格式的解析；之前使用的数据交互格式大多都是json，没接触过protobuf这种类型，所以经常查阅相关的资料，进行相关的尝试，最终解析了相关信息，现记录下实践的过程。

一、protobuf介绍

Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages. You can even update your data structure without breaking deployed programs that are compiled against the "old" format.

协议缓冲区是用于序列化结构化数据的灵活，高效的自动化机制 - 思考XML，但更小，更快，更简单。您可以定义一次数据的结构，然后您可以使用特殊的源代码轻松地将结构化数据写入各种数据流并使用各种语言读取和读取数据。您甚至可以更新您的数据结构，而不会中断根据“旧”格式编译的已部署程序。

protobuf有以下特点：

平台无关，语言无关，可扩展；
提供了友好的动态库，使用简单;
解析速度快，比对应的XML快约20-100倍；
序列化数据非常简洁、紧凑，与XML相比，其序列化之后的数据量约为1/3到1/10。

二、protobuf编译

一开始后端提供了一些 .proto 结尾的文件，打开 Snapshot.proto 文件看下内容：

syntax = "proto3";

option java_package = "com.fenlibao.security.sdk.model.base.model.protobuf";
option java_outer_classname = "SnapshotProto";

message Snapshot {
    string protocol = 1;
    string code = 2;
    string name = 3;
    string time = 4;
    string last = 10;
    string vwap = 11;
    string sharestraded = 12;
    string turnover = 13;
    string shortshares = 14;
    string shortturnover = 15;
}

对于前端来说，无需了解里面的内容，但需要编译成 js 文件调用，主要是调用编译后的方法。

1.下载protobuf编译器

下载地址

用来编译proto为JS文件方便调用

2.配置环境变量

将下载的文件地址添加到path即可，这样就可以在全局运行命令

三、项目实践

1.用vue-cli构建一个vue工程目录

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

2.安装插件

npm install sockjs-client stompjs js-base64 element-ui --save

3.在src目录下新建一个proto目录，用来存放*.proto文件,并将写好的proto文件拷贝进去。

360截图20191227112216845

4.将*.proto文件生成src/proto/proto.js

在 package.json 文件配置好指令

protoc.exe --js_out=import_style=commonjs,binary:. Snapshot.proto

直接执行npm run proto 指令，即可在proto文件夹下生成 Snapshot.proto 文件对应的Snapshot_pb.js 文件，在页面组件中引入即可调用。

5.前后端通过 socket 数据通信

首先，需要引入两个包

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';

建立连接，订阅主题

this.stompClient.connect({}, function (frame) {
    // console.log('Connected: ' + frame)
    //订阅主题
    _this.stompClient.subscribe('/topic/snapshot', function (data) {
      //接收到数据进行反序列化编码
      let msg = _this.des(Base64.encode(data.body),_this.topic)
      // console.log(msg)
      _this.items.unshift({name:msg.getName(),code:msg.getCode(),time:_this.timeFormat(msg.getTime()),high:msg.getHigh(),low:msg.getLow(),open:msg.getOpen(),close:msg.getClose()})
      if ( _this.items.length == 100 ) {
        _this.tableList = _this.items
        _this.items = []
      }
    })
  })

通过后端接收到的如下数据：

引入proto编译好的js文件，调用Snapshot_pb.js文件中的deserializeBinary方法进行反序列编码，因为传入参数需要base64数据格式，所以先进行base64编码，再反序列化。

import '../assets/proto/Snapshot_pb'
import {Base64} from 'js-base64'

//反序列化
des(doc) {
    return proto.Snapshot.deserializeBinary(doc)
},

最后，将解析完成的数据进行页面数据渲染、展示。

lesonwu / Blog