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

如今，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连接方案（如果你愿意的话）。

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

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

推荐教程：“微信小程序”

下载微信应用

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

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

• 微信小程序可以收藏吗（微信小程序可以收藏吗？知乎）
• 如何在微信小程序中寻找好友（微信小程序实现定位）
• 一个小而美的小程序脚手架，让您更顺利、更快速地开发小程序（app脚手架）。
• 小程序选择器数据是一个对象数组
• 阅读本文开始使用小程序（小程序x）

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