全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[咸阳seo公司哪家好]用微信小程序实现WebSocket心跳重连

  最近在开发小程序用到了WebSocket,小程序提供了相应的原生API●•▪▼,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷▼▷…,所以就自己实现了一套心跳重连机制。

  惯例◆=▽○,先简单介绍一下Websocket□▲。

  

Websocket简介

  


Websocket是什么

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

  WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

  为什么需要Websocket

  HTTP 协议是一种无状态的、[孝感seo公司立荐久澳]你一定要知道的css属性值规范铁力市小程序开发哪家好无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。

  所以当我们想服务器主动给客户端发送消息,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) {
 console○▷•○.log('WebSocket 已关闭!')
 })
 }•▼•,

 

  这个先放在这我们一会往里填东西

  

断线重连

  

 reconnect(){
 if (this.lockReconnect) return;
 this.lockReconnect = true◆▽☆▽;
 clearTimeout(this.timer)
 if (this△•.data……•.limit<-○▪■;12){
 this▲■△▼.timer = setTimeout(() => {
 this.linkSocket();
 this■▷▪.lockReconnect = false;
 }▪□▼◆, 5000)▷◇◆□;
 this.setData({
 limit: this.data•▷.limit+1
 })
 }
 }-▷,

 

  我们设置一个锁和最大的重连次数,避免出现无限重连的情况▷◇,为了不给服务器太大的压力我这里设置的是5秒重试一次,最多请求12次。

  改造一下initEventHandle这样我们就可以实现一般的触发Error的断线重连。

  

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

关键的来的---心跳对象

  先撸为敬

  

let heartCheck = {
 timeout: 10000, 
 timeoutObj: null,
 serverTimeoutObj: null◁◆-○,
 reset: function () {
 clearTimeout(this▼•.timeoutObj);
 clearTimeout(this=◁◁.serverTimeoutObj);
 return this--○◇;
 }△•,
 start◆▲=: function () {
 this-☆◆▲.timeoutObj = setTimeout(()=>•△; {
 console.log("•▼○;发送ping"◆△=▪;)◁◆■○;
 wx.sendSocketMessage({
 data:"…•◁;ping"▲=▷▪,
 // success(){
 // console.log("发送ping成功"○•;)▼○;
 // }
 })◁●◇△;
 this.serverTimeoutObj = setTimeout(() =>{
 wx.closeSocket(); 
 }, this.timeout)◁•▷;
 }…-▲, this.timeout);
 }
};

心跳对象内timeout为每10秒发一次心跳,timeoutObj△▼◆、serverTimeoutObj是清除定时器用的对象▼◇▷,reset方法重置定时器,[咸阳seo公司哪家好]start发送心跳=★●。

  继续改造我们的initEventHandle

  

 initEventHandle(){
 let that = this
 wx•▽-★.onSocketMessage((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",服务端接收到消息后给我们回个话"pong"★•◇▪,就好像微信聊天▪•。

  在吗-◇▷?

  在

  在吗?

  在

  在吗○▪△?

  滚

  别看在吗很烦,至少能确定你们俩还是好友,要不他把你拉黑了你还不知道(有点跑题了)

  如果超过10秒服务端还没回复…-•◇“pong••★”,则认为连接断开的

  我擦,敢删我好友,我这东北爷们的暴脾气这能忍●○?我把你也删了 。。。。。。。。。。=◇○。然后赶紧重新申请好友

  这是暴脾气的客户端直接把连接关闭■■-★,调用closeSocket,可是一关闭我们的onSocketClose事件又去重连了(渣男)

  至此,心跳重连实现完毕

  总结

  


 

  Socket心跳重连在H5中可以有类似的实现,也有成熟的第三方库,比如说stomp+websocket+sockjs可以实现更加完整的更兼容的socket连接方案,可以下次给大家分享(看我心情)。

  如果觉得还行就点个赞鼓励一下我。

  如果觉得写得什么垃圾,点个赞惩罚一下我把●△▷。

  推荐教程:《微信小程序》

  以上就是用微信小程序实现WebSocket心跳重连的详细内容,更多请关注久澳传媒编程栏目其它相关文章▼■!

[咸阳seo公司哪家好]用微信小程序实现WebSocket心跳重连

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。