Protocol Buffers 可视化

Link如下:
Proto Visualizer
proto2html

以前为前东家打工的时候,通信协议主要是json(其实是二进制化的json),然后查问题基本只靠这个神器:
Json Visualization
这样繁复的json可以瞬间转化成可视化的表格,事半功倍。并且所有的转换操作都是在浏览器里面做的,也不用担心安全问题。

但现在的工作已经很少用到json了,反而是越来越多地使用pb,但pb这个的文本格式也不是很好读,并且有时候为了把一条信息打印到一行中,不得不使用ShortDebugString(), 这样使得文本更难看懂……
然后今天突然想到一个idea,既然网上那么多json visualization的工具,是不是我可以来一把曲线救国,先把pb转换成json,这样不就成了!
然后就真的找到了一个js版本的lex-yacc, http://zaach.github.io/jison/ , 然后我就写了这样的语法规则:

/* description: Proto2Json Converter */

/*lex*/

%lex
%x string
%%

s+                   /* skip whitespace */
[-0-9]+("."[0-9]+)?("e+"[0-9][0-9])?b  return 'NUMBER'
[a-zA-Z0-9_x5Dx5B\.]+   return 'ID'
"{"                   return '{'
"}"                   return '}'
":"                   return ':'
"""                  this.begin('string');
/*"""          this.popState();*/
(\"|[^"])*"""   this.popState();yytext = """ + yytext;return 'STRING';
<>               return 'EOF'
.                     return 'INVALID'

/lex

%start expressions

%%

expressions
  : object EOF
    { console.log(JSON.stringify($1, null, 4)); return $1;}
  ;

object
  : kv_list
    %{
      result = {}
      $kv_list.forEach(function (kv) {
        k = kv["key"];
        v = kv["value"];
        if (result[k] != undefined) {
          if (result[k] instanceof Array) { 
            result[k] = result[k].concat([v]);
          } else {
            result[k] = [result[k]].concat([v]);
          }
        } else {
          result[k] = v;
        }
      });
      $$ = result;
    %}
  ;

kv
  : key_type ":" literal_value
    {$$ = {"key": $key_type, "value": $literal_value};}
  | key_type "{" object "}"
    {$$ = {"key": $key_type, "value": $object};}
  | key_type "{" "}"
    {$$ = {"key": $key_type, "value": {}};}
  ;

key_type
  : ID
  | NUMBER
  ;

literal_value
  : NUMBER
  | STRING {$$ = eval($STRING);}
  | ID
  ;

kv_list
  : kv
    {$$ = [$kv];}
  | kv kv_list
    {$$ = [$kv].concat($kv_list);}
  ;

发现其实没有原来想得那么麻烦, 与其不停期盼为啥没这么一个工具,不如自己动动手。
blog也好久没新文章了,锄锄草。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s