微信小程序 实现websocket长连接 以及断开连接之后自动重连
app.js
let socketMsgQueue = []
let isLoading = false App({
globalData: {
userInfo: null,
localSocket: {},
callback: function () {}
},
showLoad() {
if(!isLoading) {
wx.showLoading({
title: '请稍后...',
})
isLoading = true
}
},
hideLoad() {
wx.hideLoading()
isLoading = false
},
initSocket() {
let that = this
that.globalData.localSocket = wx.connectSocket({
// url: 'wss://test.enzhico.net/app'
url: 'wss://mapp.enzhico.net/app'
})
that.showLoad()
that.globalData.localSocket.onOpen(function (res) {
console.log('WebSocket连接已打开!readyState=' + that.globalData.localSocket.readyState)
that.hideLoad()
while (socketMsgQueue.length > 0) {
var msg = socketMsgQueue.shift();
that.sendSocketMessage(msg);
}
})
that.globalData.localSocket.onMessage(function(res) {
that.hideLoad()
that.globalData.callback(res)
})
that.globalData.localSocket.onError(function(res) {
console.log('readyState=' + that.globalData.localSocket.readyState)
})
that.globalData.localSocket.onClose(function (res) {
console.log('WebSocket连接已关闭!readyState=' + that.globalData.localSocket.readyState)
that.initSocket()
})
},
//统一发送消息
sendSocketMessage: function (msg) {
if (this.globalData.localSocket.readyState === 1) {
this.showLoad()
this.globalData.localSocket.send({
data: JSON.stringify(msg)
})
} else {
socketMsgQueue.push(msg)
}
},
onShow: function(options) {
if (this.globalData.localSocket.readyState !== 0 && this.globalData.localSocket.readyState !== 1) {
console.log('开始尝试连接WebSocket!readyState=' + this.globalData.localSocket.readyState)
this.initSocket()
}
}
})
page 页面
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this
app.globalData.callback = function (res) {
//res 接收websocket onMessage事件返回的数据
}
}
//向服务器发送数据
app.sendSocketMessage(data: JSON.stringify({});
)
SocketTask
这个对象是通过wx.connetSocket(obj)来获取的,他有一个属性值readyState,有4个状态值:
1 CONNECTING:0 连接中
2 OPEN:1 已连接
3 CLOSING:2 关闭中
4 CLOSED:3 已关闭
刚开始我们使用的做法是全局一个变量socketOpen,用来表示这个socket是否打开,没有打开就重连,否则就直接调用发送消息接口了。但是经过测试发现网络不稳定,会出现这个变量没有得到及时更新一直是true。然后就不再去连接了,但实际上已经断开了
所以最后就把这个socketOpen变量去掉,直接判断SocketTask对象的属性值readyState,如果是1的话就表示直接可用;
基本思路:
1 全局维护一个SocketTask对象,用来表示websocket连接,小程序onShow时判断是否断线,是否需要重连
2 同时定义一个全局的回调函数callback回调函数,每个页面初始化的时候更新这个回调函数,那么每个页面中收到的返回信息就会执行当前页面逻辑
3 维护一个消息队列,所有的消息请求会首先判断连接是否可用,可用直接send,不可用将消息push到这个队列中。
4 在app.js的onShow函数中判断连接是否连上,如果没有连上就会触发websocket连接
5 SocketTask对象的onOpen()负责从消息队列中取出请求消息,并发送这个请求消息
6 SocketTask对象的onMessage() 负责接收返回消息。并调用每个页面自己定义的回调函数
7 SocketTask对象的onClose() 监听函数中,触发websocket连接
来自:https://blog.csdn.net/h_a_h_ahahah/article/details/80645939
微信小程序 实现websocket长连接 以及断开连接之后自动重连的更多相关文章
- 微信小程序之WebSocket
本文版权归 OSChina jsongo0 所有,转载请标明出处,以示尊重! 原文:https://my.oschina.net/jsongo/blog/757871 为什么需要websocket?传 ...
- 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能
一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...
- 微信小程序开发——websocket测试
服务端 在windows下执行 node server.js 也可参照我的前一篇部署https var httpServ = require('http') var WebSocketServer ...
- 微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
目录 0.概述websocket 1.app.js写法 2.后台写法 0.概述websocket (1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它. 一个客户端一打开就 ...
- 微信小程序使用Websocket
/** 初始化websocket stomp文档 http://jmesnil.net/stomp-websocket/doc/*/initSocket: function () {var that ...
- 【微信小程序】微信小程序 文本过长,自动换行的问题
小程序开发过程出现的问题: 文本过长,以致于在view中显示不全,没有自动换行的问题 解决方法: 在wxss样式文件中添加样式 .font-break { word-break:break-all; ...
- 微信小程序一步一步获取UnionID,实现自动登录
思路: 1.小程序端获取用户ID,发送至后台 2.后台查询用户ID,如果找到了该用户,返回Token,没找到该用户,保存到数据库,并返回Token 小程序端如何获取用户ID: 小程序端 wx.getU ...
- 微信小程序开发——活动规则类文案文件读取及自动转换为小程序排版代码
前言: 最近做的小程序活动规则内容比较多,且一直处于修改中.由于小程序并不支持类似Html5中的预排版,所以,活动规则内容修改较大的时候,仍需要对新的内容用小程序的<text>组件做下排版 ...
- 微信小程序开发(九)获取手机连接的wifi信息
// succ.wxml <view>WIFI ssid:{{wifissid}}</view> <view>WIFI bssid:{{wifiBssid}}< ...
随机推荐
- java性能监控工具jstat-windows
jstat Monitors Java Virtual Machine (JVM) statistics. This command is experimental and unsupported. ...
- sql分级汇总
--測试数据 create table tb([DB-ID] varchar(10),ENTITY varchar(10),DATE varchar(10),[CUST-NO] int,AMOUNT ...
- C/C++程序到内存分配(转)
一.一个由C/C++编译到程序占用的内存分为以下几个部分: 1.栈区(stack)——由编译器自动分配释放,在不需要的时候自动清除.用于存放函数的参数.局部变量等.操作方式类似数据结构中的栈(后进先出 ...
- mysql 修改表引擎方法
修改表引擎方法 方法1:修改mysql.ini配置文件,重启mysql服务生效 修改my.ini,在[mysqld]下加上default-storage-engine=INNODB 其中红色字体部分是 ...
- 阿里云OSS对象存储 简单上传文件
不得不说阿里云的命名比较让人摸不着头脑,开始以为是文件存储NAS,弄了半天什么文件系统,挂载点的搞不明白.后来才搞清楚原来 对象存储OSS才是我需要的. 其中EndPoint就是画红框的部分,但是要加 ...
- 零基础学python-4.5 标准类型分类
1.按存储分:原子类型和容器类型 原子类型:仅仅能包括一个对象 容器类型:能够包括多个对象 分类 python类型 原子类型 数值和字符串 容器类型 列表.元组和字典 2.按能否够变化分:可变和不可变 ...
- adb tcp 调试
su setprop service.adb.tcp.port 5555 stop adbd start adbd
- Linux 中权限的再讨论( 下 )
前言 上篇随笔讲述了Linux中权限的大致实现机制以及目录权限的相关规则.本文将讲解Linux中的三种特殊权限:SUID,SGID,Sticky权限.看完这两篇文章,你一定会对Linux的权限有个更深 ...
- storm是怎样保证at least once语义的
背景 本篇看看storm是通过什么机制来保证消息至少处理一次的语义的. storm中的一些原语 要说明上面的问题,得先了解storm中的一些原语,比方: tuple和message 在storm中,消 ...
- web前端页面中异步使用百度地图API
<div id="allmap"></div> //百度地图API功能 function loadJScript() { var script = docu ...