VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

使用微信小程序实现WebSocket心跳重连(WebSocket自带心跳)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

如今,WebSockets 用于开发小程序。 小程序提供了相应的原生API,使用方式与h5 API略有不同。 所以,由于一些流行的h5成熟类库使用起来有点困难,而且原生API也有一些缺陷,所以我自己实现了心跳重连机制。

一如既往,快速介绍 Websockets。

Websocket 概述

什么是 Websocket?

>

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

WebSocket 是 HTML5 引入的一种协议,用于通过单个 TCP 连接进行全双工通信。

为什么需要Websockets?

HTTP协议是一种无状态、无连接、单向的应用层协议。 使用请求/响应模型。 通信请求只能由客户端发起,服务器响应请求。

因此,如果服务器想要主动向客户端发送消息,HTTP 不会让你这样做。 要实现类似的功能,只能使用轮询或长轮询。 这种方法效率低且浪费资源。 ,WebSocket就是为了解决这些问题而诞生的。

小程序WebSocket

小程序WebSocket API

我太懒了!查看你自己的官方网站。

为什么我需要心跳重新连接?

使用本机 WebSocket 常常会感觉不稳定。 服务器发送的消息可以被客户端接收。 无法接收或者服务器无法接收客户端发送的消息。 WebSocket 还提供 onError 和 onClose 方法,但经常存在各种未知情况,即连接断开但未触发 Error 或 Close 事件。 就是这样结果,实际的连接已经断开,但客户端和服务器并没有意识到这一点,仍在等待接收消息。

所以你要解决的问题就很明确了。

检查连接状态,以便客户端和服务器都知道连接已丢失并可以重新连接。

更新您的代码

页面加载后第一个连接到套接字。

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(& #39;WebSocket 连接打开) ') }) wx.onSocketError(function (res) { console.log ('WebSocket 连接无法打开') }) wx.onSocketClose(function (res) { console.log('WebSocket 正在关闭!') }) },

我先把它放在这里,稍后再填写

断开连接并重新连接

重新连接( ){ if (this. lockReconnect) return; this.lockReconnect = true; if (this.data.limit { this.linkSocket(); this.lockReconnect = false; }, 5000); this.setData({ limit: this.data.limit+1 }) } },

设置最大锁和重连次数,避免无限重连。 为了避免服务器过载,我将其设置为每 5 秒重试一次,最多重试 12 个请求。

装修单击 initEventHandle 允许进行常规断开连接并重新连接,从而导致错误。

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() }) },

密钥是 -[ k3]- 这是一个心跳对象。

请告诉我首先做什么。

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

Heartbeat 对象超时每 10 秒发送一次心跳 timeoutObj 和 serverTimeoutObj 是用于重置定时器。

继续转换 initEventHandle() ){ let that = this.(( 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”时,服务器收到消息后会回应“ping”,就像微信聊天一样。

你在吗?

你在吗?

你现在在吗?你是吗?

迷路

别担心。 至少你可以确定你们两个还是好朋友。 否则,你甚至不知道他是否阻止了你(这是一个有点不同的主题)

如果服务器超过 10 秒没有以“pop”响应,则被视为丢失连接。马苏。

对不起,你居然有勇气删掉我的好友,我一个东北人哪能受得了那么凶的脾气? 你也删除了。 。 。 。 。 。 。 。 。 。 。 那么请立即重新申请朋友

这是一个挑剔的客户端,直接关闭连接并调用closeSocket,但是一旦我关闭onSocketClose事件,它就会重新连接(该死)

此时,Heartbeat正在连接重的。

概述

Socket心跳重连在H5中也可以类似实现,也有stomp+websocket+sockjs等成熟的第三方库。 这允许更完整的实施。 下次可以和大家分享一个更加兼容的socket连接方案(如果你愿意的话)。

如果您觉得不错,请给我们点个赞,鼓励我们。

如果您觉得这篇文章很垃圾,请点赞惩罚。

推荐教程:“微信小程序

下载微信应用

微信是一款支持发送语音消息、视频、照片和文字的移动应用. 通讯软件。 微信带来了全新的移动通信体验,您可以单独或群组聊天,还可以根据您的地理位置查找附近的人。 有需要的朋友,请快来保存您的下载体验吧!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:使用微信小程序实现WebSocket心跳重连(WebSocket自带心跳) https://zhujicankao.com/123932.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 使用微信小程序实现WebSocket心跳重连(WebSocket自带心跳)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!