主机参考: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连接方案(如果你愿意的话)。
如果您觉得不错,请给我们点个赞,鼓励我们。
如果您觉得这篇文章很垃圾,请点赞惩罚。
推荐教程:“微信小程序”
下载微信应用
微信是一款支持发送语音消息、视频、照片和文字的移动应用. 通讯软件。 微信带来了全新的移动通信体验,您可以单独或群组聊天,还可以根据您的地理位置查找附近的人。 有需要的朋友,请快来保存您的下载体验吧!
这几篇文章你可能也喜欢:
- 微信小程序翻译功能上线:现已支持18种语言
- 如何使用微信小程序中的车牌号输入法(如何使用微信小程序中的车牌号输入法进行打印)
- 微信小程序无法获取位置信息怎么办?(微信小程序无法获取位置信息)
- 微信小程序如何实现九宫格跳(如何在小程序中配置九宫格抽奖)
- 如何调节微信小程序的亮度?
本文由主机参考刊发,转载请注明:使用微信小程序实现WebSocket心跳重连(WebSocket自带心跳) https://zhujicankao.com/123932.html
评论前必须登录!
注册