小程序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的介绍什么的就不说了网上一搜一大堆,这里 ...
随机推荐
- 微信小程序调起支付API
官方文档: https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7 https://developers.weixin.q ...
- redis 安装 集群 主从 哨兵 docker
安装redis 官方文档 docker run -d --net host -v /opt/myconfig/redis/redis.conf:/usr/local/etc/redis/redis.c ...
- 树莓派使用Python使用PiCamera录制视频
个人博客 地址:https://www.wenhaofan.com/article/20190430144020 代码 在树莓派环境下官方提供了乐酷 PiCamera 让我们可以很方便的操作树莓派连接 ...
- vue自学入门-4(vue slot)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- .NetCore学习笔记:一、UnitOfWork工作单元
Maintains a list of objects affected by a business transaction and coordinates the writing out of ch ...
- react-路由和Ant design
路由的使用 react-router import React from 'react' // 如果要使用 路由模块,第一步,运行 yarn add react-router-dom // 第二步,导 ...
- python xlrd 模块(获取Excel表中数据)
python xlrd 模块(获取Excel表中数据) 一.安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装,前提是已经安装了pyt ...
- Java开发技术
1.基础技术 数据结构与算法 逻辑结构:数据对象中的数据元素之间的逻辑关系 1.集合结构:集合结构中的数据元素除了同属一个集合外,没有其他关系. 2.线性结构:线性结构中的数据元素之间是一对一的关 ...
- 158.Clickjacking点击劫持攻击实现和防御措施
clickjacking攻击: clickjacking攻击又称为点击劫持攻击,是一种在网页中将恶意代码等隐藏在看似无害的内容(如按钮)之下,并诱使用户点击的手段. clickjacking攻击场景: ...
- resize函数
#include<opencv2/opencv.hpp>#include<opencv2/highgui.hpp> using namespace cv;using names ...