微信小程序的websocket使用stomp协议--简单实用的npm包

需求背景

在公司实习期间，要求做一个小程序的websocket连接，用于设备的实时控制和状态查询。

其中后端使用的是stomp协议，而微信小程序是不支持stomp协议的。但是当我知道的时候，后端已经全部调好只等我接入了...

由于小程序的心跳机制和浏览器略有不同，其原生的websocketAPI对于stomp协议也不支持。所以就萌生了封装一个适用于stomp协议的websocketapi的想法

实现过程

解决心跳机制问题

由于小程序的没有window对象，而前端的stompjs使用到的心跳机制是依赖于window对象完成的。所以需要对原生的stomp稍加修改：

Stomp.setInterval = function (interval, f) {
    return setInterval(f, interval);
};
Stomp.clearInterval = function (id) {
  return clearInterval(id);
};

解决微信原生接口不会处理JSON数组问题

当后端使用stomp的时候，会向前端发送JSON数组，而前端也应该向后端发布JSON数组的形式。同时stomp也会发送单个字符来表示当前状态

例如以下network的message：

后端连接回复：

a["CONNECTED\nversion:1.1\nheart-beat:0,0\n\n\u0000"]

前端发送消息：

["SEND\ndestination:/api\ncontent-length:104\n\n{"msg":{"msg_id":1,"msg_no":0,"gateway":"123"}}\u0000"]

心跳等待标志：

h

微信的原生接口不会处理这类数据，这意味着我们使用send()发送信息以及onmessage()接收信息都需要对数据进行预处理。对于stompjs作为后端所发送的常见形式来说，我们可以这样处理：

发送阶段：

this.socketTask.send({ 
          data: JSON.stringify([frame]),
          success: (res) => {
            // console.log('sendBack: ',res)
          },
          fail: (err) => {
            console.log('sendBackERR: ',err)
          } 
        });

接收消息：

this.socketTask.onMessage((frame) => {
        if(frame.data.indexOf('[') == -1) return
        let str = frame.data.slice(frame.data.indexOf('['))
        if(str.length > 0) {
          str = `${JSON.parse(str)}`
          this.ws.onmessage({
            data: str
          })
        }
      })

封装成npm包（wx-stomp）

解决完原生的问题，我们将其他的几类功能和监听也都封装成函数，并且写成类的形式方便到处创建实例。

为了在以后的相同环境下也可以快速使用，同时也为了其他遇到这样问题的同学一起入坑😋，所以将API封装成了一个npm包，其名称为wx-stomp

使用方法：

1. 终端安装:npm i wx-stomp
2. 微信开发者工具上面菜单栏的工具栏->构建npm
3. 构建成功后在需要使用的页面引用import Wx from 'wx-stomp'
4. 更多使用方法可以查看npm包的README

npm包地址： wx-stomp - npm (npmjs.com)

后记

由于之前对于websocket也没有达到很了解的地步，特别是后端的stomp协议，不知道是不是一定需要发送和接收JSON数组形式。但是我们后端是这样跟我说的😂，所以就按照这样的规范设计了。

另一方面，我仅仅是在我们的小程序的使用环境下封装了几个常用必用的方法，像连接，订阅，发送，取消订阅等。如果需要其他方法，可以在gitee上提出issue，或者加入这个开源项目，完善wx-stomp。

其实我更希望是后者，在这个坑里爬了好几天了，也不知道填没填平，来个大佬救救孩子吧。。。