小程序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 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函数中加入
小程序websocket用法的更多相关文章
- 微信小程序websocket
微信小程序websocket 微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况, ...
- 微信小程序 WebSocket 使用非 443 端口连接
前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...
- 关于小程序websocket全套解决方案,Nginx代理wss
需求对话 提问 我在本地web能够使用ws协议去链接websocket,但是小程序不能使用. 回答 由于小程序使用的是SSL加密协议,所以需要使用wss.这里wss与ws的关系就相当于https于ht ...
- 小程序websocket心跳库——websocket-heartbeat-miniprogram
前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...
- 微信小程序-WebSocket
wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...
- 微信小程序-WebSocket应用
为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...
- 快速上手微信小程序webSocket
WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSocket API也被W3 ...
- uniapp小程序webSocket封装使用
目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...
- es6Promise及小程序Promise用法
本文主要说一下Promise,Prepending(进行时),Resolve(成功了),Reject(失败了),then在小程序中的实际应用 关于promise的介绍什么的就不说了网上一搜一大堆,这里 ...
随机推荐
- mongo操作图片储存
python 将图片存入mongodb,读取图片,gridfs模块原创A873054267 最后发布于2018-11-06 15:49:30 阅读数 2785 收藏展开导入图片引入模块,其中gridf ...
- 论文阅读笔记(八)【IEEEAccess2019】:High-Resolution and Low-Resolution Video Person Re-Identification: A Benchmark
Introduction (1)Motivation: 监控视频中的行人,有的比较清晰,有的因为距离较远非常模糊. 在高低分辨率方面的行人重识别缺乏数据集和研究. (2)Contribution: ① ...
- 【笔记0-开篇】面试官系统精讲Java源码及大厂真题
背景 开始阅读 Java 源码的契机,还是在第一年换工作的时候,被大厂的技术面虐的体无完肤,后来总结大厂的面试套路,发现很喜欢问 Java 底层实现,即 Java 源码,于是我花了半年时间,啃下了 J ...
- Mysql快速入门(二)
多表关联查询 JOIN 按照功能大致分为如下三类: CROSS JOIN(交叉连接) INNER JOIN(内连接或等值连接). OUTER JOIN(外连接) 交叉连接 交叉连接的关键字:CROSS ...
- Hadoop学习之路(4)Intelij+Maven搭建Hadoop项目
1创建工程 点击project--Maven--next 2通过maven导入项目依赖jar包 (1)设置maven自动导入依赖jar包 勾选 Import Maven projects automa ...
- 854. Floyd求最短路(模板)
给定一个n个点m条边的有向图,图中可能存在重边和自环,边权可能为负数. 再给定k个询问,每个询问包含两个整数x和y,表示查询从点x到点y的最短距离,如果路径不存在,则输出“impossible”. 数 ...
- php 文件追加写入
//追加写入 file_put_contents('xml.text',json_encode($postObj,JSON_FORCE_OBJECT).PHP_EOL,FILE_APPEND);
- Udacity_deep_learning_anconda
1.创建anconda的虚拟环境: conda create -n your_env_name Python=X.X(2.7.3.6等) 2.查看anconda 有哪些虚拟环境: conda env ...
- spring中实现基于注解实现动态的接口限流防刷
本文将介绍在spring项目中自定义注解,借助redis实现接口的限流 自定义注解类 import java.lang.annotation.ElementType; import java.lang ...
- No module named 'flask.ext'
在学习flask进行web开发的时候,遇到如下报错信息: No module named 'flask.ext' 原因:新版的flask不再支持flask.ext,所以,需要换种方式导入相应第三方库 ...