GolangLeaf服务器与JavaScript Websocket+ProtoBuff连接互通

Websocket就是改进型的Http，可以保持连接不断开。

ProtoBuff就是一个序列化工具，它可以把以.proto命名的特殊语法格式写的代码，变成你想要使用的目标代码语法的代码。

比如把my.proto里的内容转换成javascript可以使用的 my.js，

或者go可以使用的my.go.

当然ProtoBuff还提供了一些方法，让数据序列化为二进制的格式，就是通过它转换之后，大家都能认识这种数据到底是什么数据，所以要用它做数据交换。

通过网上调研，发现了3种方法互通。后表。

A.Leaf服务器ProtoBuff环境搭建

要把.Ptoto文件翻译为Golang可以读取的语法格式，需要

a.ProtoBuff编译器

b.Golang环境

1.于是开始下载：

ProtoBuff编译器

Golang

值得一提的是ProtoBuff下载3.4的编译器，因为3.5以上的不支持 *.proto语法。

为了省事ProtoBUff直接下载这个版本。protoc-3.4.0-win32.zip

2.安装Golang，配置GOROOT环境变量，就是Golang安装目录。然后把Golang安装目录的bin目录加到path环境变量中。

3.在H:\Proto\protoc-3.4.0-win32\bin下可以找到protoc.exe 这个就是ProtoBuff编译器，以后无论将.proto文件转换到其他格式的语法任何语言都要用到它。

现在定义一个my.proto文件。

syntax = "proto3"

package msg;

message helloWorld 

{

    string info = "helloworld";

}

现在我们编译my.proto为go的形式。

protoc --go_out=. *.proto

于是出现了 my.pb.go

打开一看，就是go的语法。

4.同样，开始编译为js能认识的语法。

protoc --js_out=import_style=common.js, binary:. my.proto

这里有两种形式，一种是common.js，一种是closure（google style）.

common.js生成的js要使用 require命令导入

closuer.js生成的js要使用goo.provide命令来导入。

在这里使用的是common.js,my.proto生成了my.js

5.在这里之后，我们使用 <script src="my.js "></script>

发现 它报错 require 不是命令，在这里可以下载require.js来继续使用，但有网友提供了另外一种方法解决。

为什么会报错，因为这个require命令是针对node.js而不是浏览器的。

浏览器使用。

另外一种办法就是 写一个exports.js

var myProto = require('./my');


module.exports = {
DataProto: myProto

}

然后调用命令

browserfy exports.js > bundle.js

至此生成了bundle.js

我们再使用<script src="bound.js "></script>

发现没有报错了

使用的具体格式要加上包名。

比如 

var helloReq = new proto.msg.helloWorld();

helloReq.info="Awesome hah";

6.使用Websocket.

直接在<script></script>里使用，

var ws = new WebSocket('ws://127.0.0.1');

ws.onopen = function()

{

var bingoArray = loginReq.serializeBinary();
            var uint8Array = new Uint8Array(2+bingoArray.length);
            uint8Array[0] = 0;
            uint8Array[1] = 0;
            uint8Array.set(bingoArray, 2);
            ws.send(uint8Array);

}

这里为什么要使用 2+bingoArray.length呢？因为在Leaf中使用Protobuf说了，WebSocket消息格式如下。

-------------------------
| id | protobuf message |
-------------------------

其中 id 为 2 个字节

而我们这个helloWorld msg是第一个message也是第0号message，所以前2个自己设置为0,0.

数据结构长度也要+2；

到这里服务器就收到了客户端的消息啦。