详解微信小程序实现WebSocket心跳重连 - CSDN文库

136 浏览量更新于2023-05-04 1 收藏 75KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

最近在开发小程序用到了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) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38679839

粉丝: 4
资源: 975

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈