这部分比之前的
request
和localStorage
还要难点,不过还是顺利移植过来了。
因为微信小程序的websocket只允许一条连接,所以复杂情况下还没进行测试,尚未发现有什么bug。
脚本定位
文件:/src/LiveQueryClient.js
函数:_getWebSocketImplementation
代码:
if (process.env.PARSE_BUILD === 'node') {
return require('ws');
} else if (process.env.PARSE_BUILD === 'browser') {
return typeof WebSocket === 'function' || typeof WebSocket === 'object' ? WebSocket : null;
} else if (process.env.PARSE_BUILD === 'react-native') {
return WebSocket;
}
原理分析
可以看到,在不同的执行环境下,返回不同的WebSocket
对象,但这些都不是微信小程序支持的。
所以我们需要重写一个简单的WebSocket
对象
编写代码
class WxSocket {
constructor (url) {
wx.connectSocket({
url
});
wx.onSocketOpen((ret) => {
this.onopen && this.onopen(ret);
});
wx.onSocketError(err => {
this.onerror && this.onerror(err);
});
wx.onSocketMessage(msg => {
this.onmessage && this.onmessage(msg);
});
wx.onSocketClose(() => {
this.onclose && this.onclose();
})
}
send (data) {
wx.sendSocketMessage({
data
})
}
close () {
wx.closeSocket();
}
onopen () {}
onerror (error) {}
onclose () {}
onmessage (event) {}
}
然后在上边的_getWebSocketImplementation
函数,直接返回WxSocket
对象即可。