-
13739719116
-
-
如何在小程序中使用websocket实现实时通讯？
实时通讯就是现在互联网应用领域中非常关键的一种可视化形式，也就是小程序中经常须要同时实现的功能之一。而websocket做为一种积极支持双向通讯的协议，在小程序中同时实现实时通讯也就是非常便利的。接下来，本文将详尽了解在小程序中如何采用websocket同时实现实时通讯。
一、小程序中同时实现websocket
小程序中同时实现websocket可以采用wx.rtc.createSocketTask方法建立websocket相连接。接下来就是采用wx.rtc.createSocketTask方法同时实现websocket相连接的代码：
```
let socketOpened = false;
let socketMsgQueue = [];
const socketTask = wx.rtc.createSocketTask({
url: 'wss://example.com/socket',
header: {
'content-type': 'application/json'
},
success: function () {
socketOpened = true;
for (let i = 0; i < socketMsgQueue.length; i++) {
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
}
})
function sendSocketMessage(msg) {
if (socketOpened) {
wx.rtc.sendSocketMessage({
data: msg
})
} else {
socketMsgQueue.push(msg)
}
}
wx.rtc.onSocketMessage(function (res) {
console.log('接到服务器内容：' + res.data)
})
```
在以上代码中，首先采用wx.rtc.createSocketTask方法建立websocket相连接，必须提供更多websocket服务端的url地址，以及命令头部，可选项除了内存，顺利创建相连接后的反弹等等。建立顺利完成后websocket状态为停用。
接下来就是传送消息的函数sendSocketMessage，由于websocket并不是立即关上顺利，所以我们须要推论当前的socketOpened状态，如果socket还未关上，我们须要把消息先重新加入socketMsgQueue中，并在success里面反弹消息传送队列，这样可以确保socket相连接顺利后所有的消息都能被传送过来。
最后就是发送消息的代码，采用wx.rtc.onSocketMessage方法监听消息。
二、小程序中处置websocket的异常情况
由于websocket相连接可能会碰到网络等各种问题而引致相连接断裂，如何在小程序中处置这些异常情况呢？
针对此类问题，我们可以采用wx.onNetworkStatusChange方法监听网络状态，从而努力做到对websocket的相连接异常情况作出积极响应。同时，我们还应当考量对长时间没接到服务器消息的情况展开处置。下面就是对websocket异常情况处置的代码示例：
```
wx.onNetworkStatusChange(function (res) {
console.log(res.networkType);
console.log(res.isConnected);
if (res.isConnected) {
// 如果网络恢复正常，重连websocket
reconnectWebSocket();
}
})
let heartCheck = {
timeout: 30000,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
const self = this;
this.timeoutObj = setTimeout(function () {
self.reset();
reconnectWebSocket();
}, this.timeout)
}
}
function initHeartCheck() {
wx.rtc.onSocketMessage(function (res) {
heartCheck.reset().start();
})
}
function reconnectWebSocket() {
const socketTask = wx.rtc.createSocketTask({
url: 'wss://example.com/socket',
header: {
'content-type': 'application/json'
},
success: function () {
socketOpened = true;
heartCheck.reset().start();
for (let i = 0; i < socketMsgQueue.length; i++) {
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
}
})
}
```
在以上代码中，采用wx.onNetworkStatusChange方法监听网络状态，如果网络恢复正常，就调用reconnectWebSocket再次相连接websocket。同时我们必须高度关注websocket的消息超时，一般而言，设置一个眩晕区努维确保消息的实时性。heartCheck.reset().start()就是眩晕纸盒的具体内容同时实现，这样可以时刻维持websocket相连接的通畅。
三、小程序中webSocket安全性
由于websocket和http一样，采用明文去传输数据，因此我们须要考量websocket的安全性。
在小程序中，我们可以将websocket的相连接地址改成wss（Secure WebSocket）协议，从而同时实现对数据的加密传输。同时，在websocket相连接中，也必须采用类似https的SSL证书对传输的数据展开加密，从而保证数据的安全性。下面就是在小程序中采用wss协议相连接websocket的代码示例：
```
let socketTask = wx.rtc.createSocketTask({
url: 'wss://example.com/socket',
header: {
'content-type': 'application/json'
},
sslVerify: true,
success: function () {
console.log('websocket相连接顺利');
},
fail: function () {
console.log('websocket相连接失利');
}
})
```
在以上代码中，我们可以看见除了url和header，还减少了一个sslVerify参数，并使websocket相连接时会展开SSL证书的检验，从而保证数据的安全性。
总结：
通过以上了解，我们可以了解到在小程序中采用websocket同时实现实时通讯的方法及其流程。同时还针对websocket异常情况和安全性问题搞了适当的处置。期望此篇文章对大家自学和掌控小程序实现实时通讯获得一定的协助，并可以进一步以websocket为核心，同时实现更加强悍的可视化功能。
数据IDC、软件开发、网站建设开发、系统开发、微信小程序开发、APP移动开发、SAAS定制开发、系统二开等。全行业互联网软件开发解决方案，产品经理一对一沟通需求。