详解微信小程序实现详解微信小程序实现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) {
weixin_38679839
- 粉丝: 4
- 资源: 976
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- Xilinx SRIO详解.pptx
- Informatica PowerCenter 10.2 for Centos7.6安装配置说明.pdf
- 现代无线系统射频电路实用设计卷II 英文版.pdf
- 电子产品可靠性设计 自己讲课用的PPT，包括设计方案的可靠性选择，元器件的选择与使用，降额设计，热设计，余度设计，参数优化设计 和 失效分析等
- MPC5744P-DEV-KIT-REVE-QSG.pdf
- 通信原理课程设计报告（ASK FSK PSK Matlab仿真--数字调制技术的仿真实现及性能研究）
- ORIGIN7.0使用说明
- 在VMware Player 3.1.3下安装Redhat Linux详尽步骤
- python学生信息管理系统实现代码
- 西门子MES手册 13 OpcenterEXCR_PortalStudio1_81RB1.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0