在微信小程序中全局使用websocket连接,同时自定义心跳包

近期由于工作需要开发微信小程序,需使用websocket进行连接,由于所要用来接收和发送websocket连接数据的页面比较多;同时发现如果不自定义心跳包,全局的调用生命周期只有onLanch和onShow ,由于onLanch只能在小程序注册时全局调用一次,而onShow只有在小程序进入后台再重新进入前台才能再次执行,故在websocket因网络或其它问题中断以后不能重新启动连接,故必须自定义心跳包。
但在个平台的大神文章中要么是在有心跳包的情况下,每个单独页面使用websocket;要么是在全局统一使用一个websocket而没有心跳包机制,参考借鉴了大神们的思路,自己做了一下改进,从而实现,全局统一使用一个websocket,且有心跳包机制,且其它数据不与心跳包干扰,下发到各个页面;欢迎大神们欢迎指教交流。
具体实现如下:
app.js

App({
  globalData: {
	ipw: "wss://www.*****.cn/******/",//自己的服务器网址
	limit: 0,
    timeout: 10000,
    timeoutObj: null,
    serverTimeoutObj: null,
    callback: function () {},
    },
    
    onLaunch: function() {
    this.linkSocket();
 	 },

	//建立websocket连接
 	 linkSocket() {
  	  	var that = this
    	wx.connectSocket({
     		 url: that.globalData.ipw + "webSocketServer.mn",
      		success() {
       			 that.initEventHandle()
     		 }
   		 })
	  },

	//绑定事件
	  initEventHandle() {
	    var that = this
	    wx.onSocketMessage((res) => {
	      if (res.data == "pong") {
	        that.reset()
	        that.start()
	      } else {
	        that.globalData.callback(res)
	      }
	    })
	    wx.onSocketOpen(() => {
	      console.log('WebSocket连接打开')
	      that.reset()
	      that.start()
	    })
	    wx.onSocketError((res) => {
	      console.log('WebSocket连接打开失败')
	      that.reconnect()
	    })
	    wx.onSocketClose((res) => {
	      console.log('WebSocket 已关闭!')
	      that.reconnect()
	    })
	  },

	//重新连接
	  reconnect() {
	    var that = this;
	    if (that.lockReconnect) return;
	    that.lockReconnect = true;
	    clearTimeout(that.timer)
	    if (that.globalData.limit < 10) {//连接10次后不再重新连接
	      that.timer = setTimeout(() => {
	        that.linkSocket();
	        that.lockReconnect = false;
	        console.log("次数:" + that.globalData.limit)
	      }, 5000);//每隔5秒连接一次
	      that.globalData.limit = that.globalData.limit + 1
	    }
	  },

	//心跳包开始
	  reset: function () {
	    var that = this;
	    clearTimeout(that.globalData.timeoutObj);
	    clearTimeout(that.globalData.serverTimeoutObj);
	    return that;
	  },
	
	  start: function () {
	    var that = this;
	    var randomNum = that.randomWord(false, 16);//生成随机码
	    that.globalData.timeoutObj = setTimeout(() => {
	      console.log("发送ping");
	      wx.sendSocketMessage({
	        data: randomNum + "ping",
	        success() {
	          console.log("发送ping成功");
	        }
	      });
	      that.globalData.serverTimeoutObj = setTimeout(() => {
	        wx.closeSocket();
	      }, that.globalData.timeout);
	    }, that.globalData.timeout);
	  },
	  //心跳包结束

	//创建随机数,服务器用来存储是哪个小程序的心跳包的key,由于本案逻辑需要与其它信息存储的key分开,如果逻辑不需要,可以不进行分离,自定义存储的key
	  randomWord: function (randomFlag, min, max) {
	    var str = "",
	      range = min,
	      arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
	    // 随机产生
	    if (randomFlag) {
	      range = Math.round(Math.random() * (max - min)) + min;
	    }
	    for (var i = 0; i < range; i++) {
	      var pos = Math.round(Math.random() * (arr.length - 1));
	      str += arr[pos];
	    }
	    return str;
	  }
})

PageA.js

var app = getApp();
Page({
  onShow: function() {
    var that = this;
	app.globalData.callback = function (res) {//接收服务器发来的非心跳包数据
		/**
		*里面写收到服务器发来的非心跳包数据,根据业务需求做后续逻辑处理
		*/
		}
	},
	example:function(){//根据业务需求自己定义名称,此处为举例
		wx.sendSocketMessage({
	        data: "要向服务器发送的数据",
	      })
	}

其它页面同PageA;至此功能完结,如有疑问,欢迎留言。

  • 8
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在微信上,可能你会使用轮询的方式进行,不过这太消耗资源,大量的请求也加重了服务器的负担,而且延迟问题比较严重。如果是自己开发的app,为了解决这些问题,很多团队会自建socket,使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队,采用这种方式自然没什么大问题。不过小团队可能就要花费很多时间去调试,要解决很多难题,这个在成本上就划不来。 H5引入了webSocket来解决网页端的长链接问题,而微信小程序也支持websocket。这是一个非常重要的特性,所以本系列的文章会专门拿出一篇来讨论websocketwebSocket本质上也是TCP连接,它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗,另一方面数据可以是比较实时的进行双向传输(因为是长链接),而且WebSocket允许跨域通信(这里有个潜在的跨域安全的问题,得靠服务端来解决)。目前除IE外的浏览器已经对webSocket支持得很好了,微信小程序再推一把之后,它会变得更加流行。 我们来设计一个新的demo,一个比较有趣的小游戏,多人版扫雷,准确地讲,多人版挖黄金。 游戏规则是这样的:把雷换成金子,挖到金子加一分,每人轮流一次(A挖完轮到B,B挖完A才能再点击),点金子就算你的,也不会炸,游戏继续,直到把场上所有的金子都挖完游戏才结束。跟扫雷一样,数字也是表示周边有几个金子,然后用户根据场上已经翻出来的数字来猜哪一格可能有金子。 这种交互的游戏难点在于,用户的点击操作都要传到服务器上,而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据,这样才不至于重复点同一个格子。简单讲,就是你要上报操作给服务器,而服务器也要实时给你推消息。为了简化整个模型,我们规定玩家必须轮流来点击,玩家A点完后,才能轮到玩家B,玩家B操作完,玩家A才能点。 我们分几步来实现这个功能。 一、实现思路 1、第一步,我们要先生成扫雷的地图场景 这个算法比较简单,简述一下。随机取某行某列就可以定位一个格子,标记成金子(-1表示金子)。mimeCnt表示要生成的金子的数量,用同样的方式循环标记mimeCnt个随机格子。生成完后,再用一个循环去扫描这些-1的格子,把它周边的格子都加1,当然必须是非金子的格子才加1。代码放在这里。 其increaseArround用来把这格金子周边的格子都加1,实现也比较简单: 执行genMimeArr(),随机生成结果如下: -1表示金子。看了下貌似没什么问题。接下去,我们就要接入webSocket了。 (这个是js版本的,其实生成地图场景的工作是在后台生成,这个js版本只是一个演示,不过算法是一样的。) 2、我们需要一个支持webSocket的服务端 本例子,我们使用python的tornado框架来实现(tornado提供了tornado.websocket模块)。当然读者也可以使用socket.io,专为webSocket设计的js语言的服务端,用起来非常简单,它也对不支持webSocket的浏览器提供了兼容(flash或comet实现)。 笔者本人比较喜欢使用tornado,做了几年后台开发,使用最多的框架之一的就是它,NIO模型,而且非常轻量级,同样的rps,java可能需要700-800M的内存,tornado只要30-40M,所以在一台4G内存的机子上可以跑上百个tornado服务,而java,对不起,只能跑3个虚拟机。微服务的时代,这一点对小公司很重要。当然如果读者本人对java比较熟悉的话,也可以选择netty框架尝试一下。 webSocket用tornado的另一个好处是,它可以在同一个服务(端口)上同时支持webSocket及http两种协议。tornado的官方demo代码展示了怎么实现同时使用两种协议。在本游戏,可以这么用:用户进入首页,用http协议去拉取当前的房间号及数据。因为首页是打开最多的,进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接,webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号后,进去下一个游戏页面再开始建立webSocket链接。 3、客户端 使用微信小程序开发工具,直接连接是会报域名安全错误的,因为工具内部做了限制,对安全域名才会允许连接。所以同样的,这里我们也继续改下工具的源码,把相关的行改掉就行修改方式如下: 找到asdebug.js的这一行,把它改成: if(false)即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值