【解决方案】微信小程序如何使用 ProtoBuf 进行 WebSocket 通信

前言

故事背景

简单说下背景，项目中需要用 ProtoBuf 协议转换请求参数，并通过 WebSocket 进行双向通信。重点！一个是 web端(Vue3 + TS)，一个是微信小程序端(原生 + JS)。

剧情发展

一开始，web端通过 ts-proto 这个库进行开发，问题倒是不大。将跑通的这部分代码进行 ts 转 js 之后挪用到微信小程序端的时候，奇奇怪怪的问题就出现了。

灵异事件(一)

问题描述

问题1： 发送文本消息(电脑上正常，手机上直接发送失败)

问题描述：
发送文本消息的情况，在电脑上，也就是微信开发者工具中的 模拟器 上，是可以正常通信的；但是在手机上，也就是预览的时候，发送文本是直接无法发送， 报错提示大致意思就是方法执行失败，可以很容易定位到在数据转换(encode)的这个过程有问题 。

问题截图：

(1)电脑端 - 正确：

(2)手机端 - 报错：

问题2：发送语音消息(电脑能发但是服务端解析失败，手机上直接就发不了)

问题描述：
最离谱，也是最坑的事件来了。
当电脑端发送语音消息的时候，WS可以正常来回通信，但是服务端拿到的语音数据解析异常，导致语音文本识别失败，并且这段语音数据生成的url是无法播放的。
当手机端发送语音消息的时候，表现就和上面的发送文本消息一样，直接发送不出去，这个倒是可以接受，可以直接定位到前端数据转换(encode)的过程有问题。

问题截图：

(1)电脑端 - 发送成功，但是服务端获取到的语音数据是异常的，导致语音转文本失败：

(2)手机端 - 报错：

解决方案

1、分析原因

通过在项目中 断点调试(或者 console.log) 的方法，可以很快定位到是 proto 文件生成的 JS 文件中的变量方法 encode 在小程序端无效。注意：这个方法在浏览器web页面上是可行的！所以，大概率是由于宿主环境不同导致转编译方法的一些内部依赖无效。毕竟，web端用的第三方库主要是针对浏览器环境的，并没有明确说支持微信端 。
回顾一下 web端项目引用的第三方库是 TS 版本的 protobuf ——  ts-proto 那么以上的那个推测原因就更有可能了。

所以，第一步，在小程序端重新引用 JS 版本的 protobuf ——  protobufjs

2、npm包介绍

这部分是最精彩的部分，所以单独拎出来，作为第二步讲解。

当我们用 protobufjs 这个库的时候，需要两样东西，一个是代码中需要引用的 protobuf 本人，一个是用来转换 xxx.proto 文件用的脚本命令 pbjs 也就是我下面截图中提到的 protobufjs-cli

当我们打开  protobufjs 这个使用教程的时候，会看到下面这个安装指引。

这里需要重点说明一下，之前只要执行 npm install protobufjs --save 这端安装脚本之后，就可以使用 pbjs 命令的，但是！改了！一切都变了！请看官方说明——  pbjs-for-javascript

这里重点吐槽一下，上面截图中的 its own package 点过去还是个404页面࿰