app.js

  1. let socketMsgQueue = []
  2. let isLoading = false
  3.  
  4. App({
  5. globalData: {
  6. userInfo: null,
  7. localSocket: {},
  8. callback: function () {}
  9. },
  10. showLoad() {
  11. if(!isLoading) {
  12. wx.showLoading({
  13. title: '请稍后...',
  14. })
  15. isLoading = true
  16. }
  17. },
  18. hideLoad() {
  19. wx.hideLoading()
  20. isLoading = false
  21. },
  22. initSocket() {
  23. let that = this
  24. that.globalData.localSocket = wx.connectSocket({
  25. // url: 'wss://test.enzhico.net/app'
  26. url: 'wss://mapp.enzhico.net/app'
  27. })
  28. that.showLoad()
  29. that.globalData.localSocket.onOpen(function (res) {
  30. console.log('WebSocket连接已打开!readyState=' + that.globalData.localSocket.readyState)
  31. that.hideLoad()
  32. while (socketMsgQueue.length > 0) {
  33. var msg = socketMsgQueue.shift();
  34. that.sendSocketMessage(msg);
  35. }
  36. })
  37. that.globalData.localSocket.onMessage(function(res) {
  38. that.hideLoad()
  39. that.globalData.callback(res)
  40. })
  41. that.globalData.localSocket.onError(function(res) {
  42. console.log('readyState=' + that.globalData.localSocket.readyState)
  43. })
  44. that.globalData.localSocket.onClose(function (res) {
  45. console.log('WebSocket连接已关闭!readyState=' + that.globalData.localSocket.readyState)
  46. that.initSocket()
  47. })
  48. },
  49. //统一发送消息
  50. sendSocketMessage: function (msg) {
  51. if (this.globalData.localSocket.readyState === 1) {
  52. this.showLoad()
  53. this.globalData.localSocket.send({
  54. data: JSON.stringify(msg)
  55. })
  56. } else {
  57. socketMsgQueue.push(msg)
  58. }
  59. },
  60. onShow: function(options) {
  61. if (this.globalData.localSocket.readyState !== 0 && this.globalData.localSocket.readyState !== 1) {
  62. console.log('开始尝试连接WebSocket!readyState=' + this.globalData.localSocket.readyState)
  63. this.initSocket()
  64. }
  65. }
  66. })

page 页面

  1. /**
  2. * 生命周期函数--监听页面显示
  3. */
  4. onShow: function () {
  5. var that = this
  6. app.globalData.callback = function (res) {
  7. //res 接收websocket onMessage事件返回的数据
  1. }
  2. }
    //向服务器发送数据
    app.sendSocketMessage(data: JSON.stringify({});
  1. )

  

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长连接 以及断开连接之后自动重连的更多相关文章

  1. 微信小程序之WebSocket

    本文版权归 OSChina jsongo0 所有,转载请标明出处,以示尊重! 原文:https://my.oschina.net/jsongo/blog/757871 为什么需要websocket?传 ...

  2. 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能

    一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...

  3. 微信小程序开发——websocket测试

    服务端 在windows下执行 node  server.js 也可参照我的前一篇部署https var httpServ = require('http') var WebSocketServer ...

  4. 微信小程序使用websocket通讯的demo,含前后端代码,亲测可用

    目录 0.概述websocket 1.app.js写法 2.后台写法 0.概述websocket (1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它. 一个客户端一打开就 ...

  5. 微信小程序使用Websocket

    /** 初始化websocket stomp文档 http://jmesnil.net/stomp-websocket/doc/*/initSocket: function () {var that ...

  6. 【微信小程序】微信小程序 文本过长,自动换行的问题

    小程序开发过程出现的问题: 文本过长,以致于在view中显示不全,没有自动换行的问题 解决方法: 在wxss样式文件中添加样式 .font-break { word-break:break-all; ...

  7. 微信小程序一步一步获取UnionID,实现自动登录

    思路: 1.小程序端获取用户ID,发送至后台 2.后台查询用户ID,如果找到了该用户,返回Token,没找到该用户,保存到数据库,并返回Token 小程序端如何获取用户ID: 小程序端 wx.getU ...

  8. 微信小程序开发——活动规则类文案文件读取及自动转换为小程序排版代码

    前言: 最近做的小程序活动规则内容比较多,且一直处于修改中.由于小程序并不支持类似Html5中的预排版,所以,活动规则内容修改较大的时候,仍需要对新的内容用小程序的<text>组件做下排版 ...

  9. 微信小程序开发(九)获取手机连接的wifi信息

    // succ.wxml <view>WIFI ssid:{{wifissid}}</view> <view>WIFI bssid:{{wifiBssid}}< ...

随机推荐

  1. electron 缓存目录 禁用缓存

    C:\Users\Administrator\AppData\Roaming\linksame // 禁用缓存 app.commandLine.appendSwitch("--disable ...

  2. 本机上使用Three.js载入纹理

    怎样载入纹理 // 首先, 创建一个纹理 var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var m ...

  3. 混合背包 hdu5410 CRB and His Birthday

    传送门:点击打开链接 题意:你有M块钱,如今有N件商品 第i件商品要Wi块,假设你购买x个这种商品.你将得到Ai*x+Bi个糖果 问能得到的最多的糖果数 思路:很好的一道01背包和全然背包结合的题目 ...

  4. mqtt client python example

    This is a simple example showing how to use the [Paho MQTT Python client](https://eclipse.org/paho/c ...

  5. 抽象类的子类能够new

    纠结了半天,我以为继承了Activity后不能new这里被那个onCreate方法迷惑了以为会出现故障一直没直接创建对象类使用 后来试了试才知道 activity似乎是一个抽象类吧. 你要用他的方法, ...

  6. 对canvas arc()中counterclockwise参数的一些误解

    一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法,对它的认识比较模糊,导致犯了一些错误,特发此文,以纠正之前的错误理解. arc()方法定义如下: arc() 方 ...

  7. 《Android Studio有用指南》7.1 AndroidStudio代码检查工具概述

    本文节选自<Android Studio有用指南> 作者: 毕小朋 博客: http://blog.csdn.net/wirelessqa 眼下本书已上传到百度阅读, 在百度中搜索[Anr ...

  8. 解析java.math.BigInteger类——构造函数

    最早由于做作业,结识了java的BigInrger类.读着读着,越来越觉得有趣.后来作业做完,也不忍丢下它,索性把全部代码研究一遍. 开始的时候,一个上午时间最多读懂2个方法.但是还是有滋有味的坚持了 ...

  9. 目标检测之积分图---integral image 积分图2

    前面在图像处理一栏中涉及到boxfilter 的时候,简单介绍过积分图,就是每个像素点是左边和上边的累加和,这样的话可以方便均值和方差,以及直方图统计的相关运算,这里再次结合网络资源重新单独对积分图做 ...

  10. WinCE下使用C#的几个小技巧

    1.我们知道,在使用Windows的开发机上用C#启动一个外部程序的方法有很多,但这些方法用在使用WinCE的目标工控机上都无能为力,现在小嫚儿以打开一个IE为例,介绍如何在WinCE下使用C#来打开 ...