微信小程序版webSocket组件的封装
最近接了一个微信小程序项目开发,其中用到了 webSocket,所以三下五除二的封装了一下,特此分享给大家,为需要的小伙伴提供参考。
如果小伙伴想学小程序开发的可以看我之前一篇文章《微信小程序入门教程实例讲解》
// socket 已经连接成功 var socketOpen = false // socket 已经调用关闭 function var socketClose = false // socket 发送的消息队列 var socketMsgQueue = [] // 判断心跳变量 var heart = '' // 心跳失败次数 var heartBeatFailCount = 0 // 终止心跳 var heartBeatTimeOut = null; // 终止重新连接 var connectSocketTimeOut = null; // 心跳信息 var connectFailTimes = 0 var webSocket = { /** * 创建一个 WebSocket 连接 * @param {options} * url String 是 开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名 * header Object 否 HTTP Header , header 中不能设置 Referer * method String 否 默认是 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT * protocols StringArray 否 子协议数组 1.4.0 * success Function 否 接口调用成功的回调函数 * fail Function 否 接口调用失败的回调函数 * complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行) */ connectSocket: function(options) { wx.showLoading({ title: '', mask: true, }) socketOpen = false socketClose = false this.webSocketClose = false socketMsgQueue = [] wx.connectSocket({ url: 'wss://aqm.runde.pro/wss', success: function(res) { if (options) { // 成功回调 options.success && options.success(res); } }, fail: function(res) { if (options) { // 失败回调 options.fail && options.fail(res); } } }) }, /** * 通过 WebSocket 连接发送数据 * @param {options} * data String / ArrayBuffer 是 需要发送的内容 * success Function 否 接口调用成功的回调函数 * fail Function 否 接口调用失败的回调函数 * complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行) */ sendSocketMessage: function(options) { if (socketOpen) { wx.sendSocketMessage({ data: options.msg, // data: JSON.stringify(options), success: function(res) { if (options) { options.success && options.success(res); } }, fail: function(res) { if (options) { options.fail && options.fail(res); } } }) } else { socketMsgQueue.push(options) } }, /** * 关闭 WebSocket 连接。 * @param {options} * code Number 否 一个数字值表示关闭连接的状态号,表示连接被关闭的原因。如果这个参数没有被指定,默认的取值是 1000 (表示正常连接关闭) * reason String 否 一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本(不是字符) * fail Function 否 接口调用失败的回调函数 * complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行) */ closeSocket: function(options) { if (connectSocketTimeOut) { clearTimeout(connectSocketTimeOut); connectSocketTimeOut = null; } socketClose = true; var self = this; self.stopHeartBeat(); wx.closeSocket({ success: function(res) { console.log('WebSocket 已关闭!'); if (options) { options.success && options.success(res); } }, fail: function(res) { if (options) { options.fail && options.fail(res); } } }) }, // 收到消息回调 onSocketMessageCallback: function(msg) { }, // 开始心跳 startHeartBeat: function() { console.log('socket 开始心跳') var self = this; heart = 'heart'; self.heartBeat(); }, // 结束心跳 stopHeartBeat: function() { console.log('socket 结束心跳') var self = this; heart = ''; if (heartBeatTimeOut) { clearTimeout(heartBeatTimeOut); heartBeatTimeOut = null; } if (connectSocketTimeOut) { clearTimeout(connectSocketTimeOut); connectSocketTimeOut = null; } }, // 心跳 heartBeat: function() { var self = this; if (!heart) { return; } self.sendSocketMessage({ // msg: JSON.stringify({ // 'msg_type': 'heart' // }), msg: JSON.stringify({ "act": "app_heartbeat" }), success: function(res) { console.log('socket 心跳成功'); if (heart) { heartBeatTimeOut = setTimeout(() => { self.heartBeat(); }, 7 * 1000); } }, fail: function(res) { console.log('socket 心跳失败'); if (heartBeatFailCount > 2) { // 重连 self.connectSocket(); } if (heart) { heartBeatTimeOut = setTimeout(() => { self.heartBeat(); }, 7 * 1000); } heartBeatFailCount++; }, }); } } // 监听 WebSocket 连接打开事件。callback 回调函数 wx.onSocketOpen(function(res) { connectFailTimes = 0 console.log('WebSocket 连接已打开!') wx.hideLoading(); // 如果已经调用过关闭 function if (socketClose) { webSocket.closeSocket(); } else { socketOpen = true for (var i = 0; i < socketMsgQueue.length; i++) { webSocket.sendSocketMessage(socketMsgQueue[i]) } socketMsgQueue = [] webSocket.startHeartBeat(); } }) // 监听 WebSocket 错误。 wx.onSocketError(function(res) { connectFailTimes++ console.log('WebSocket 连接打开失败,请检查!', res) }) // 监听 WebSocket 接受到服务器的消息事件。 wx.onSocketMessage(function(res) { console.log('收到服务器内容:' + res.data) webSocket.onSocketMessageCallback(res.data) }) // 监听 WebSocket 关闭。 wx.onSocketClose(function(res) { console.log('WebSocket 已关闭!') webSocket.webSocketClose = true; if (connectFailTimes <= 3) { if (!socketClose) { clearTimeout(connectSocketTimeOut) connectSocketTimeOut = setTimeout(() => { webSocket.connectSocket(); }, 3000); } } else { wx.hideLoading() wx.showModal({ title: '', content: '服务器异常,请重新登录', }) clearTimeout(connectSocketTimeOut) } }) module.exports = webSocket;
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 微信小程序版webSocket组件的封装
码云笔记 » 微信小程序版webSocket组件的封装