微信小程序 实现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}}< ...
随机推荐
- electron 缓存目录 禁用缓存
C:\Users\Administrator\AppData\Roaming\linksame // 禁用缓存 app.commandLine.appendSwitch("--disable ...
- 本机上使用Three.js载入纹理
怎样载入纹理 // 首先, 创建一个纹理 var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var m ...
- 混合背包 hdu5410 CRB and His Birthday
传送门:点击打开链接 题意:你有M块钱,如今有N件商品 第i件商品要Wi块,假设你购买x个这种商品.你将得到Ai*x+Bi个糖果 问能得到的最多的糖果数 思路:很好的一道01背包和全然背包结合的题目 ...
- mqtt client python example
This is a simple example showing how to use the [Paho MQTT Python client](https://eclipse.org/paho/c ...
- 抽象类的子类能够new
纠结了半天,我以为继承了Activity后不能new这里被那个onCreate方法迷惑了以为会出现故障一直没直接创建对象类使用 后来试了试才知道 activity似乎是一个抽象类吧. 你要用他的方法, ...
- 对canvas arc()中counterclockwise参数的一些误解
一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法,对它的认识比较模糊,导致犯了一些错误,特发此文,以纠正之前的错误理解. arc()方法定义如下: arc() 方 ...
- 《Android Studio有用指南》7.1 AndroidStudio代码检查工具概述
本文节选自<Android Studio有用指南> 作者: 毕小朋 博客: http://blog.csdn.net/wirelessqa 眼下本书已上传到百度阅读, 在百度中搜索[Anr ...
- 解析java.math.BigInteger类——构造函数
最早由于做作业,结识了java的BigInrger类.读着读着,越来越觉得有趣.后来作业做完,也不忍丢下它,索性把全部代码研究一遍. 开始的时候,一个上午时间最多读懂2个方法.但是还是有滋有味的坚持了 ...
- 目标检测之积分图---integral image 积分图2
前面在图像处理一栏中涉及到boxfilter 的时候,简单介绍过积分图,就是每个像素点是左边和上边的累加和,这样的话可以方便均值和方差,以及直方图统计的相关运算,这里再次结合网络资源重新单独对积分图做 ...
- WinCE下使用C#的几个小技巧
1.我们知道,在使用Windows的开发机上用C#启动一个外部程序的方法有很多,但这些方法用在使用WinCE的目标工控机上都无能为力,现在小嫚儿以打开一个IE为例,介绍如何在WinCE下使用C#来打开 ...