需求背景
在公司实习期间,要求做一个小程序的websocket
连接,用于设备的实时控制和状态查询。
其中后端使用的是stomp协议,而微信小程序是不支持stomp协议的。但是当我知道的时候,后端已经全部调好只等我接入了…
由于小程序的心跳机制和浏览器略有不同,其原生的websocket
API对于stomp协议也不支持。所以就萌生了封装一个适用于stomp协议的websocket
api的想法
实现过程
解决心跳机制问题
由于小程序的没有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
使用方法:
- 终端安装:
npm i wx-stomp
- 微信开发者工具上面菜单栏的工具栏->构建npm
- 构建成功后在需要使用的页面引用
import Wx from 'wx-stomp'
- 更多使用方法可以查看npm包的README
npm包地址: wx-stomp - npm (npmjs.com)
后记
由于之前对于websocket
也没有达到很了解的地步,特别是后端的stomp协议,不知道是不是一定需要发送和接收JSON数组形式。但是我们后端是这样跟我说的😂,所以就按照这样的规范设计了。
另一方面,我仅仅是在我们的小程序的使用环境下封装了几个常用必用的方法,像连接,订阅,发送,取消订阅和关闭连接等。如果需要其他方法,可以在gitee上提出issue,或者加入这个开源项目,完善wx-stomp。