在小程序中,通常来说websocket的连接直接按照官方微信开放文档来做就好,不是什么难点。但是当小程序不仅一个socket连接时,就会出现一些问题:
比如,我一开始写了一个websocket连接,用来发送图片,但是后来,项目开发伙伴在上面增加了mqtt部分,在这种时候,一旦运行微信小程序就会出现一些问题--比如我这里遇到的问题就是它连接到server端之后就自己断开,无法发送/接受数据。
一开始是这样写的:
wx.connectSocket({
url: 'ws://(...)',
success(){
console.log("成功")
},
fail(){
console.log("失败")
},
complete(){
console.log("完成");
}
})
wx.onSocketOpen(function (res) {
console.log('WebSocket连接已打开!')
wx.sendSocketMessage({
data:'HelloWorld:'
})
})
wx.onSocketError(function(res){
console.log('WebSocket连接打开失败,请检查!')
})
wx.onSocketMessage(function (res) {
console.log(res)
})
wx.onSocketClose(function (res) {
console.log('WebSocket连接已关闭!')
})
},
解决办法:
var pagethis = this;//存一下“this”
console.log('准备连接')
pagethis.data.localSocket=wx.connectSocket({
url: '...',
}),
pagethis.data.localSocket.onOpen(function(res){
console.log('WebSocket连接已打开!')
if (pagethis.data.localSocket.readyState === 1){
pagethis.data.localSocket.send({
data: 'hw'
})
}
}),
pagethis.data.localSocket.onMessage(function(res){
console.log(res)
pagethis.data.localSocket.close()
})
//监听该次websocket是否关闭
pagethis.data.localSocket.onClose(function (res) {
console.log('WebSocket连接已关闭!')
})
这样修改之后,这里的websocket面对的就只是我们要连接的websocket了,而并非是这个这个小程序要面对的所有socket。
而且,在这里我在注意到一点,wx.closeSocket()[修改过的程序中的pagethis.data.localSocket.close()函数]函数不能拎出来用,否则会有警告/报错,因为单独拎出来后,要close就得先确认open,一般加在发送函数或者接收数据函数那里。
如何确认小程序是连接上,然后出现问题;而不是一开始就没有连接上-->
查看网络请求:
查看左侧打马赛克部分有无出现目标地址。