uniapp使用websocket请求

本文只是小弟在开发过程中的需求。踩坑后写博客做笔记。如果代码中有什么不足之处，希望大家指出，谢谢！感觉问题可以解决了，动动小手指点个赞吧~O(∩_∩)O1.这里是我的需求：通过websocket接收后端传来的数据，赋值给输入框，然后进行一系列操作，如果websocket连接失败，会弹窗提示，心跳连接无限建立，不允许断开。废话不多说，直接代码截图。A.websocket的主要步骤：使用uniapp官网提供的API建立websocket链接，进入连接监听，在失败监听中设置定时器定时发送连接，直到服务器连接成功，踩过的坑on在写的过程中莫名其妙，忘记怎么描述了，写的不好请大家指出，第一次写。1、下面是一个html调用的例子。代码删除了很多不相关的代码，只看调用方式。2.下面是JS封装的代码letisSocketClose=false;//是否关闭socketreconnectCount=5;//重连次数letheartbeatInterval="";//心跳定时器letsocketTask=null;//websocket对象letagainTimer=null;//断线重连定时器leturl=null;letonReFn=null;letonSucFn=null;letonErrFn=null;/***socketUrl:websocet的地址*onReceive:消息监听回调*onErrorEvent:抛出错误回调，弹窗提示连接失败*onErrorSucceed:抛出成功回调，主要用于隐藏连接失败提示框**/constsokcet=(sockeUrl,onReceive,onErrorEvent,onErrorSucceed)=>{url=socketUrl;onReFn=onReceive;onErrFn=onErrorEvent;onSucFn=onErrorSucceed;(socketTask){socketTask.close();socketTask=null;clearInterval(heartbeatInterval);}//WebSocket地址//【很重要】一定要保证你的服务器成功，如果是手机测试，不要用ws://127.0.0.1:9099【一个特别容易犯的错误】leturl=socketUrl//连接socketTask=uni.connectSocket({url:url,success(data){console.log("websocket连接成功");clearInterval(againTimer)//断线重连定时器},fail:(err)=>{console.log("error",err);}});//连接打开socketTask.onOpen((res)=>{console.log('WebSocketopen');clearInterval(againTimer)//断开重连定时器onErrorSucceed({isShow:false})//用于隐藏提示框heartbeatInterval&&clearInterval(heartbeatInterval);//每10秒发送一次心跳heartbeatInterval=setInterval(()=>{sendMsg('heartbeat')},1000*5)})//监听连接失败socketTask.onError((err)=>{console.log('WebSocket连接打开失败，请检查',err);//停止发送心跳clearInterval(heartbeatInterval)//如果没有手动关闭，重新连接if(!isSocketClose){reconnect(url,onErrorEvent)}})////监听连接关闭-socketTask.onClose((e)=>{console.log('WebSocketconnectionclosed!');clearInterval(heartbeatInterval)if(!isSocketClose){reconnect(url,onErrorEvent)}})//监听收到的消息socketTask.onMessage((res)=>{uni.hideLoading()console.log(res,'reslistensforreceivedmessages')letserverData=res.data//返回与后端的值代表什么，写入业务逻辑serverData&&onReceive(服务器数据);});}constreconnect=(url,onErrorEvent)=>{console.log('进入断线重连',isSocketClose);clearInterval(againTimer)//断线重连定时器clearInterval(heartbeatInterval);socketTask&&socketTask.close();//确保它在重新打开之前已经关闭socketTask=null;onErrorEvent({isShow:true,messge:'Thescanningheadserviceisconnecting...'})//connectionre-callagainCreatewebsocetmethodTimer=setInterval(()=>{sokcet(url,onReFn,onErrFn,onSucFn)console.log('reconnecting...');},1000*5)}constsendMsg=(msg)=>{//向后端发送命令msg=JSON.stringify(msg)try{//通过WebSocket发送数据连接socketTask.send({数据：味精}）；}catch(e){if(isSocketClose){return}else{reconnect(url,onErrFn)}}}//关闭websocket【必须在实例销毁前关闭，否则会报未定义错误】beforeDestroy(){websocetObj.stop();}conststop=()=>{isSocketClose=trueclearInterval(heartbeatInterval);clearInterval(againTimer)//断线重连定时器socketTask.close();//确保它在重新打开之前关闭socketTask=null;}exportconstwebsocetObj={sokcet,stop,sendMsg};