uniapp websocket机制 心跳 重连

这篇具有很好参考价值的文章主要介绍了uniapp websocket机制 心跳 重连。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在开发程序过程中通信功能还是比较常用到的,本文主要介绍的是uniapp中websocket的使用

websocket建立连接后,断开、心跳机制重新链接的一个过程。

关于uni.connectSocket可仔细阅读uniapp官网中的uni.connetSocket以及连接socket创建的实例SocketTask 

具体代码如下:内有代码详细注解,如果疑问可在评论区留言。

<script>
    
    var socketTaskChat//全局定义websocket创建的实例名称
    var interVal //全局定义定时执行心跳监测定时器ID,用于清除定时器
	var reconnectTimer //全局定义定时执行一次重连定时器ID,用于清除定时器

    export default{
        data(){

        },
        onLoad(){
            //设置屏幕保持常亮不灭
            uni.setKeepScreenOn({
				keepScreenOn: true
			});
            //创建socket链接
            this.webSocketConfig()
        },
        methods:{
           //建立socekt链接
            webSocketConfig()
            {
              //清除心跳、重连定时器,停止心跳检测
              clearTimeout(reconnectTimer)
              clearInterval(interVal)
              var that = this
              var socketOpen = false;
              uni.closeSocket() //socketTaskChat
                //创建连接
              socketTaskChat = uni.connectSocket(
                {
                  url: "wss://ws.xxxx.net/",
                  data()
                  {
                    return {};
                  },
                  header:
                  {
                    'content-type': 'application/json',
                  },
                  method: 'GET',
                  success: res =>
                  {
                    console.log("socket链接成功")
                  },
                  fail: () =>
                  {
                    that.$refs.uToast.showToast(1, "WebSocket连接打开失败")
                  },
                  complete: () =>
                  {
                    console.error("complete")
                  }
                });
              socketTaskChat.onError(function(res)
                                     {
                uni.showToast(
                  {
                    title: '连接超时,请耐心等候',
                    duration: 4000,
                    icon: 'none',
                    mask: true
                  })
                //心跳监测
                that.handleHeart()
              });
              socketTaskChat.onClose(function(res)
                                     {
                console.error("onClose")
                that.isConnect = false
              });
              socketTaskChat.onOpen(function(res)
                                    {
                // clearInterval(interVal)
                console.error("onOpen")
                socketOpen = true;
                that.isConnect = true
                 //停止心跳检测
                clearTimeout(reconnectTimer)
                clearInterval(interVal)
               
              });
              socketTaskChat.onMessage(function(res)
                                       {
                // console.error("res", res)
                const data = JSON.parse(res.data);
                if(data.tips == '未开播')
                {
                  that.$refs.uToast.showToast(1, "抖音未开播")
                  that.contentShow = "当前直播间未开播,确定关闭吗?"
                  that.showModal = true
                }
                else if(data.status == 1)
                {
                    that.isLive = 1
                    //接收到的消息处理区域
                    //xxxxxxx
                    //xxxxxxx
                }
              });
            },
            //心跳检测
			handleHeart() {
				var that = this
				console.error("心跳监测")
				if (that.isLive == 1) { //满足:已经开启过链接且中途断开方可重连
                    //设置定时开始心跳检测
					interVal = setInterval(function() {
                        //发送消息,验证是否存在心跳
						that.handleSend()
					}, 5 * 1000)
				}
				/* else {
					console.error("心跳监测222", interVal)
					if (interVal) {
						clearInterval(interVal)
					}
				} */
			},
            //发送消息
            handleSend() {
				var that = this
				var data = {
					state: 1,
					method: 'heartbeat'
				}
				socketTaskChat.send({
					data: data,
					success(res) {},
					fail(res) {
						console.log('发送失败', that.isLive)
						//重连socekt
						that.reconnect()
					}
				});
			},
            // 重新连接socket
			reconnect() {
				var that = this
				// 停止发送心跳
				clearTimeout(reconnectTimer)
				clearInterval(interVal)
				if (that.isLive == 1) { //满足:已经开启过链接且中途断开方可重连
                    //定时执行一次websocket链接方法,进行socket重连
					reconnectTimer = setTimeout(() => {
                        //开启socket链接
						that.webSocketConfig()
					}, 5 * 1000)
				}
			},
        }
    }

</script>

我这边实现的是类似抖音直播评论区的展示效果,每接收一条数据从列表最底部加入更新

transform 属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的

旋转 rotate(deg)

可以对元素进行旋转,正值为顺时针,负值为逆时针

外层scroll-view设置180度,内层view设置180度就可以实现

<scroll-view scroll-y class="scroll-list">
                <view class="show-view" v-for="(item,index) in barrageList" :key="index">

                        {{item.content}}

                </view>
 </scroll-view>

<style lang="scss" scoped>

.scroll-list {
		position: fixed;
		top: 700rpx;
		bottom: 0;
		transform: rotate(180deg);//主要是这一行跟.show-view中的样式决定从底部更新展示
	}

	.show-view {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		padding: 0 5%;
		transform: rotate(180deg);//主要是这一行跟.scroll-list中的样式决定从底部更新展示

	}
</style>

以上完成,如果疑问评论区留言即可。

 文章来源地址https://www.toymoban.com/news/detail-659519.html

到了这里,关于uniapp websocket机制 心跳 重连的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebSocket心跳检测和重连机制

    心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。 websocket 连接断开有以下两证情况: 前端断开 在使用 websocket 过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时关闭,这时候websocket的连接已经断开,而不同浏览器有不同

    2024年01月21日
    浏览(39)
  • websocket的基础使用,心跳机制,断线重连

    websoket出现的原因: 传统的http请求只能是由前端向后台发送一个请求,然后后台把结果返回给前端,前端再进行展示。这里就暴露了一个问题,就是通信只能由前端发起,而后台无法主动与前端通信。而websoket的出现就是为了解决这个问题,让前端可以主动联系后台,后台也

    2024年02月06日
    浏览(46)
  • Flutter:WebSocket封装-实现心跳、重连机制

    前言Permalink Flutter简介 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Nat

    2024年02月10日
    浏览(49)
  • WebSocket实战之六心跳重连机制

    WebSocket应用部署到生产环境,我们除了会碰到因为经过代理服务器无法连接的问题(注:该问题可以通过搭建WSS来解决,具体配置请看 WebSocket实战之四WSS配置 ),另外一个问题就是外网环境不稳定经常会断开或者服务器重启或者网络中间服务器当发现一个长连接长时间没有

    2024年02月07日
    浏览(46)
  • WebSocket心跳机制/服务器端开连接(JS前端)

    情景: 前端使用 WebSocket 的时候,后端长时间没有推送数据,导致 WebSocket 连接经常断开,后端也会报错。 解决方法: 通过 心跳机制 让前端和后端始终保持连接。 代码: 使用方法: 注意: 后端收到以后需要给前端返回数据,否则还是无法保持连接 代码参考了:https://bl

    2024年02月12日
    浏览(36)
  • websocket实时通讯和socket.io实时通信库的使用;心跳机制与断线重连

    https://zh.javascript.info/websocket WebSocket 是一种网络通信协议,就类似于 HTTP 也是一种通信协议。 为什么需要 WebSocket? 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。 代码解析: 创建WebSocket实例:通过 new WebSocket() 创建一个WebSocket实例。在括号中传入服务器的URL,该URL指定了

    2024年02月16日
    浏览(41)
  • websocket超时重连、心跳检测

    在单个TCP连接上进行全双工通信的协议,可以实现服务端和客户端双向推送信息的协议。我们在使用webscoket通信时必须要注意的问题超时重连和心跳检测。 超时重连:当出现错误时客户端尝试重新连接websocket。 心跳检测:客户端长时间没接收到服务端消息,就向服务端发送

    2024年02月11日
    浏览(41)
  • websocket断线重连&&心跳检测

    封装websocket 实现断线重连跟心态检测,使用的typeScript去封装 在nodejs 安装ws库 代码如下(示例):  服务端实现ws 创建一个server.js 文件 运行ws服务   node .server.js  客户端实现websocket 创建一个socket.ts 文件 vue 页面使用 断开ws服务 断线  启动服务后 自动重连

    2024年01月19日
    浏览(38)
  • 为什么WebSocket需要前端心跳检测,有没有原生的检测机制?

    本文代码 github、gitee、npm 在web应用中,WebSocket是很常用的技术。通过浏览器的WebSocket构造函数就可以建立一个WebSocket连接。但当需要应用在具体项目中时,几乎都会进行心跳检测。 设置心跳检测,一是让通讯双方确认对方依旧活跃,二是浏览器端及时检测当前网络线路可用

    2024年02月03日
    浏览(57)
  • mosquitto心跳和网络重连机制(基于MQTT协议)

    在网络通信中,心跳(Heartbeat)指的是一种周期性的消息,用于维持通信连接的活动状态。心跳包的主要作用是检测连接是否处于活动状态,及时发现连接异常并重新恢复连接,维护网络通信的稳定性和可靠性。 MQTT(Message Queuing Telemetry Transport)是一种轻量级、开放式的消息

    2024年02月03日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包