微信小程序 实现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}}< ...
随机推荐
- JavaScript-4.7-friendly_table---ShinePans
<html> <head> <meta http-equiv="content-type" content="text/html;chars ...
- (一)MVVMLight安装
http://www.cnblogs.com/manupstairs/p/4890300.html 1.首先新建一个wpf项目 2. 安装完成即可在我们的项目中看到如下引用: 如果点击安装的时候出现: ...
- Android调用JNI本地方法跟踪目标代码
正如Android调用JNI本地方法经过有点改变章所说跟踪代码是可行的,但是跟踪某些代码会出现anr,点击取消,还是不好运,有提高办法吗?回答是有(gdb还没试过,本文只讨论ida). 下面是我使用 ...
- Django-form组件补充
首先来看一个用户登录的实例 from django.forms import Form from django.forms import fields from django.forms import ...
- python--网络编程--主机命令执行
import os os.system()#执行系统命令 #只能执行命令不能返回值 import subprocess # 能执行系统命令 res=subprocess.Popen('dir',she ...
- caffe学习--Lenet5的应用和原理、实现----ubuntu16.04.2+caffe+mnist+train+test
Lenet5的应用和原理.实现 ----------------------------------------------ubuntu16.04.2------------------------- ...
- linux 块设备驱动(五)——块设备应用层的操作
一: 加载好sbull驱动 root@CarRadio:/# ls /dev/sbull -l brw-r--r-- 1 root root 254, 16 Mar 25 08:25 /dev/sbu ...
- linux查看是否安装JDK(转载)
rpm -qa |grep java 看是否安装了java echo $PATH 看环境变量是否配置了java路径 find / -name java 查找java文件 一般linux服务器会自带jd ...
- 目标检测之harr---点角检测harr
Haar特征与积分图 1. Adaboost方法的引入 1.1 Boosting方法的提出和发展 在了解Adaboost方法之前,先了解一下Boosting方法. 回答一个是与否的问题,随机猜测可以获 ...
- (转)c#(wince)中使用多线程访问winform中控件的问题
我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍. 首先来看传统方法: public partial ...