经验总结

微信小程序websocket的注意事项：使用SocketTask，弃用wx

示例代码

socketTask的示例代码如下

引用的代码

var ws1 = wx.connectSocket({//打开websocket连接	url: 'wss://test.com/ws1',	success: function (resConnect) {//打开连接成功		// console.log(resConnect)	},	fail: function (resConnectError) {//打开连接失败		// console.log(resConnectError)	}})ws1.onOpen(function (res) {	if (ws1.readyState === 1) {		ws1.send({			data: JSON.stringify({				number: '123',			}),			success: function (resSend) {				// console.log(resSend)			},			fail: function (resSendError) {				// console.log(resSendError)			}		})	}})ws1.onMessage(function (data) {	console.log(data.data)})var ws2 = wx.connectSocket({//打开websocket连接	url: 'wss://test.com/ws2',	success: function (resConnect) {//打开连接成功		// console.log(resConnect)	},	fail: function (resConnectError) {//打开连接失败		// console.log(resConnectError)	}})ws2.onOpen(function (res) {	if (ws2.readyState === 1) {		ws2.send({			data: JSON.stringify({				number: '234',			}),			success: function (resSend) {				// console.log(resSend)			},			fail: function (resSendError) {				// console.log(resSendError)			}		})	}})ws2.onMessage(function (data) {	console.log(data.data)})

问题来源

最近工作上有分析与解决了一个微信小程序websocket连接异常的问题，所有就有了这篇总结分享，供小伙伴参考

当时的情况是这样的，某业务方引用了公司平台的两个SDK（SDK-A, SDK-B）,两个SDK都有使用了websocket连接，如果先初始化SDK-A，再初始化SDK-B，两个SDK都能正常工作。但如果先初始化SDK-B，再初始化SDK-A，大概率会导致两个SDK的websocket连接异常，SDK-A的websocket使终连接不上，SDK-B的websocket的连接会频繁断开与重连（连接不稳定但或可以正常跟服务器交互一段时间）PS:由于没有SDK-B的代码权限，同时SDK-A的代码自己不熟悉，所以只能通过对比正常情况的日志输出与异常情况的日志输去分析了

在分析此类问题上，我们要注意一个点是日志输出是否充够，一个SDK的日志输出都是有级别控制的，所以我们在优先设置好日志输出的级别，尽可能多的输出日志于。另外在分析微信小程序或web端的网络问题dev_tool工具（inspector）中的Network功能要会使用

在查看日志以及关键代码的排查了，最终是确定SDK-A的websocket使用了wx实例去操作websocket，而不是使用socketTask

所以就算微信小程序APP本身算依赖的SDK都使用了socketTask，但APP的业务逻辑层是使用wx实例去操作websocket的话，会也大概率导致所有的websocket不能正常工作！

关键的日志截图！！（异常时SDK-A也收到了SDK-B的消息，）

说明：

SDK-A使用了，wx.onSocketMessage(function callback)

下面的URI是自定义的协议包的ID

另外，当现现如上异常后，SDK-A的websocket连接连协议心跳包都没有发出去过！！！

// 如果进行typescript的话，成员变量socketTask可以声名为any	private socketTask: any = null;

参考文章

转载地址：http://hkmbi.baihongyu.com/

你可能感兴趣的文章