前段时间项目要求需要用saga+websocket+protobufjs，当时对这些还是不是很了解，走了一些弯路，不过最后还算是完成了。

关于整个流程梳理:

• 进入页面时候，页面dispatch一个消息到saga告诉saga需要连接websocket

• saga接收到消息，开始进行websocket连接

  
  
  image

• 连接好了之后就可以进行数据传输等了；按照ws的几个操作，onopen、onmessage等等

  
  
  image

最重要的就是：数据转化部分

potobuf我们怎样在前端接收解析呢？

• 安装protobufjs:npm install protobufjs

• 拿到和后台共同定义的potobuf文件；放在saga文件夹下（我是酱紫放的）

  
  
  image
• 将potobuf文件转化成json或者js；我这里是转化成json应用的
  node pbjs -t json .proto的文件目录 -o 生成的json或者js放置的文件目录（包含文件名）
• 最后一步就是在onmessage中引用转化过来的json或者js对后端传过来的数据进行解析转化成可用的数据啦

        var jsonDescriptor = require("./msg.json");
        var root = protobuf.Root.fromJSON(jsonDescriptor);
        var messageFile = root.lookupType("Web.Message");
        var buf = new Uint8Array(e.data);
        var message = messageFile.decode(buf);
        console.log(message.classId);

当时写完了之后；发现其实很简单，但是当时由于没有了解用过，并且找相关资料的时候遇到问题；所以当时还是花了一些时间。总结，希望对也是同样情况的有一点帮助啦！