// socket已经连接成功
var socketOpen = false
// socket已经调用关闭function
var socketClose = false
// socket发送的消息队列
var socketMsgQueue = []
// 判断心跳变量
var heart = ''
// 心跳失败次数
var heartBeatFailCount = 0
// 终止心跳
var heartBeatTimeOut = null;
// 终止重新连接
var connectSocketTimeOut = null;
var i=1
const url = ''//socket链接地址,需要在微信后台配置
var webSocket = {
connectSocket: function () {
// wx.showLoading({
// title: '',
// mask: true,
// })
socketOpen = false
socketClose = false
socketMsgQueue = []
wx.connectSocket({
url: 'ws://' +url+'/websocket/'+wx.getStorageSync('token'),
// header: { 'ticket': wx.getStorageSync('token')},
success: function (res) {
if (res) {
// 成功回调
// console.log(res)
// options.success && options.success(res);
}
},
fail: function (res) {
if (res) {
// 失败回调
// 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,
success: function (res) {
if (options) {
options.success && options.success(res);
}
},
fail: function (res) {
if (options) {
options.fail && options.fail(res);
}
}
})
} else {
socketMsgQueue.push(options.msg)
}
}, /**
* 关闭 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({
'messageType':1//心跳
}),
success: function (res) {
console.log('socket心跳成功');
if (heart) {
heartBeatTimeOut = setTimeout(() => {
self.heartBeat();
}, 60000);
}
},
fail: function (res) {
console.log('socket心跳失败');
if (heartBeatFailCount > 2) {
// 重连
self.connectSocket();
}
if (heart) {
heartBeatTimeOut = setTimeout(() => {
self.heartBeat();
}, 60000);
}
heartBeatFailCount++;
},
});
}
} // 监听WebSocket连接打开事件。callback 回调函数
wx.onSocketOpen(function (res) {
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) {
console.log('WebSocket连接打开失败,请检查!', res)
}) // 监听WebSocket接受到服务器的消息事件。
wx.onSocketMessage(function (res) {
console.log('收到服务器内容:' + res.data)
if (res.data =='SUCCESS'){
return;
}
webSocket.onSocketMessageCallback(res.data)
}) // 监听WebSocket关闭。
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭!')
//if (!socketClose) {
let time = Math.pow(2, i)
i++
if (time==8){
i=1
}
clearTimeout(connectSocketTimeOut)
connectSocketTimeOut = setTimeout(() => {
webSocket.connectSocket();
}, time*1000);
//}
}) module.exports = webSocket;

 在需要的页面引入,然后在onload函数中加入

   chat.onSocketMessageCallback = this.onSocketMessageCallback;//onSocketMessageCallback是回调函数名
   以上就是一个完整的wobsocket实例

小程序websocket用法的更多相关文章

  1. 微信小程序websocket

    微信小程序websocket 微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况, ...

  2. 微信小程序 WebSocket 使用非 443 端口连接

    前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...

  3. 关于小程序websocket全套解决方案,Nginx代理wss

    需求对话 提问 我在本地web能够使用ws协议去链接websocket,但是小程序不能使用. 回答 由于小程序使用的是SSL加密协议,所以需要使用wss.这里wss与ws的关系就相当于https于ht ...

  4. 小程序websocket心跳库——websocket-heartbeat-miniprogram

    前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...

  5. 微信小程序-WebSocket

    wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...

  6. 微信小程序-WebSocket应用

    为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...

  7. 快速上手微信小程序webSocket

    WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSocket API也被W3 ...

  8. uniapp小程序webSocket封装使用

    目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...

  9. es6Promise及小程序Promise用法

    本文主要说一下Promise,Prepending(进行时),Resolve(成功了),Reject(失败了),then在小程序中的实际应用 关于promise的介绍什么的就不说了网上一搜一大堆,这里 ...

随机推荐

  1. Cows Of The Round Table【DFS】

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAz0AAAKiCAIAAABzTSUAAAAgAElEQVR4Aey9C5RnWVXff4GBUR6j8u ...

  2. Milestone

    为什么开博客?     事情要从一只蝙蝠说起...       准备用博客做什么?     记录自己在开发中遇到的issue以及解决的思路:记录一些读书笔记以便温故:练习如何制造仪式感,ect.   ...

  3. Linux网络课程学习第四天

    课程内容包括:管道符.重定向与环境变量. 学习心得:个人感觉本章节还是不太好理解,尤其是对自己的基础还不是特别的扎实课余时间还是要反复的复习.

  4. ArcScene 创建三维模型数据

    1. 拉伸 添加面元素图层 在图层上右键----属性 , 设置拉伸值,可以输入固定值或者选择字段值. 2. 导入   3DMAX 的 3ds 文件,和 Google SketchUp 的skp文件, ...

  5. 支付宝网站支付接口配置 RSA 公钥 私钥

    个人博客 地址:http://www.wenhaofan.com/article/20190419143333 下载签名工具 访问:https://docs.open.alipay.com/291/1 ...

  6. Java体系结构

    java程序运行过程图 文章中内容大多来自该处Java虚拟机规范----JVM体系结构 - Java初级码农 - 博客园 JDK体系 JDK体系结构图 JDK.JRE.JVM之间的关系 JDK:Jav ...

  7. poj1141题解

    题意 空序列是规则序列:用小括号(或者方括号)把一个规则序列括起来依然是规则序列:两个规则序列并列在一起仍然是规则序列. 给出一个括号字符串S,求一个规则序列ANS,满足S是ANS的子序列且ans尽可 ...

  8. jQuery---三组基本动画 show hide

    三组基本动画 show hide //show不传参数,没有动画效果 $("div").show(); //show(speed) //speed:动画的持续时间 可以是毫秒值 还 ...

  9. python笔记-02

    Python基础知识 —————————————— A,B,先把A乘以3,然后加上B,最后在加上列表A A = [1, 2, 3, 4, 5, 6] 赋值 B = [1, 2, 3] 变量 定义一个变 ...

  10. ApiBehaviorOptions 统一模型验证配置不生效

    ApiBehaviorOptions 的统一模型验证配置一定要放到(.AddMvc)后面.