未加星标

微信小程序实现WebSocket心跳重连

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套心跳重连机制。

惯例,先简单介绍一下Websocket。

Websocket简介 Websocket是什么

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。

WebSocket 是 html5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

为什么需要Websocket

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。

所以当我们想服务器主动给客户端发送消息,HTTP是做不到的,我们只能使用轮询或者长轮询来实现类似的功能,这样的方式效率低并且浪费资源,为了解决这样的问题,WebSocket诞生了。

小程序中的WebSocket 小程序WebSocket的API

把你给懒得!自己官网看去!

为什么要做心跳重连

在使用原生WebSocket的时候,我们经常会感觉不太稳定,服务端发送的消息有时候客户端接收不到,或者是客户端发送的消息服务端接收不到,虽然WebSocket也提供了onError和onClose的方法,但是经常会有各种未知情况导致断开连接而并不触发Error或Close事件。这样就导致实际连接已经断开了,而客户端和服务端却不知道,还在傻傻的等着消息来。

所以我们要解决的问题就很清晰了:

保证连接状态,连接断开时让客户端与服务端都能知道,进而重连。 上代码 页面载入后,我们连接socket先 onLoad(){ this.linkSocket() }, linkSocket(){ let that = this wx.connectSocket({ url: app.globalData.wsUrl + 'websocket?' + this.data.taskId + '&' + this.data.userId, success() { console.log('连接成功') that.initEventHandle() } }) }, 复制代码 绑定事件

然后调用initEventHandle来绑定各种各样的事件

initEventHandle(){ let that = this wx.onSocketMessage((res) => { //收到消息 }) wx.onSocketOpen(()=>{ console.log('WebSocket连接打开') }) wx.onSocketError(function (res) { console.log('WebSocket连接打开失败') }) wx.onSocketClose(function (res) { console.log('WebSocket 已关闭!') }) }, 复制代码

这个先放在这我们一会往里填东西

断线重连 reconnect(){ if (this.lockReconnect) return; this.lockReconnect = true; clearTimeout(this.timer) if (this.data.limit<12){ this.timer = setTimeout(() => { this.linkSocket(); this.lockReconnect = false; }, 5000); this.setData({ limit: this.data.limit+1 }) } }, 复制代码

我们设置一个锁和最大的重连次数,避免出现无限重连的情况,为了不给服务器太大的压力我这里设置的是5秒重试一次,最多请求12次。

改造一下initEventHandle这样我们就可以实现一般的触发Error的断线重连。

initEventHandle(){ let that = this wx.onSocketMessage((res) => { //收到消息 }) wx.onSocketOpen(()=>{ console.log('WebSocket连接打开') }) wx.onSocketError((res)=>{ console.log('WebSocket连接打开失败') this.reconnect() }) wx.onSocketClose((res)=> { console.log('WebSocket 已关闭!') this.reconnect() }) }, 复制代码 关键的来的---心跳对象

先撸为敬

let heartCheck = { timeout: 10000, timeoutObj: null, serverTimeoutObj: null, reset: function () { clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); return this; }, start: function () { this.timeoutObj = setTimeout(()=> { console.log("发送ping"); wx.sendSocketMessage({ data:"ping", // success(){ // console.log("发送ping成功"); // } }); this.serverTimeoutObj = setTimeout(() =>{ wx.closeSocket(); }, this.timeout); }, this.timeout); } }; 复制代码

心跳对象内timeout为每10秒发一次心跳,timeoutObj、serverTimeoutObj是清除定时器用的对象,reset方法重置定时器,start发送心跳。

继续改造我们的initEventHandle

initEventHandle(){ let that = this wx.onSocketMessage((res) => { //收到消息 if (res.data == "pong"){ heartCheck.reset().start() }else{ \\处理数据 } }) wx.onSocketOpen(()=>{ console.log('WebSocket连接打开') heartCheck.reset().start() }) wx.onSocketError((res)=>{ console.log('WebSocket连接打开失败') this.reconnect() }) wx.onSocketClose((res)=> { console.log('WebSocket 已关闭!') this.reconnect() }) }, 复制代码

打开连接的时候调用start开始心跳,每隔10秒向服务端发送消息"ping",服务端接收到消息后给我们回个话"pong",就好像微信聊天。

在吗?

在吗?

在吗?

别看在吗很烦,至少能确定你们俩还是好友,要不他把你拉黑了你还不知道(有点跑题了)

如果超过10秒服务端还没回复“pong”,则认为连接断开的

我擦,敢删我好友,我这东北爷们的暴脾气这能忍?我把你也删了 。。。。。。。。。。。然后赶紧重新申请好友

这是暴脾气的客户端直接把连接关闭,调用closeSocket,可是一关闭我们的onSocketClose事件又去重连了(渣男)

至此,心跳重连实现完毕

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: WebSocket,wx,gt,console,log,res,重连,连接,服务端,initEventHandle,data,客户端,心跳,start
分页:12
转载请注明
本文标题:微信小程序实现WebSocket心跳重连
本站链接:https://www.codesec.net/view/582520.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(30)