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 = thisvar 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 = thisconsole.error("心跳监测")if (that.isLive == 1) { //满足:已经开启过链接且中途断开方可重连//设置定时开始心跳检测interVal = setInterval(function() {//发送消息,验证是否存在心跳that.handleSend()}, 5 * 1000)}/* else {console.error("心跳监测222", interVal)if (interVal) {clearInterval(interVal)}} */},//发送消息handleSend() {var that = thisvar data = {state: 1,method: 'heartbeat'}socketTaskChat.send({data: data,success(res) {},fail(res) {console.log('发送失败', that.isLive)//重连socektthat.reconnect()}});},// 重新连接socketreconnect() {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>

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44206.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

POJ 1064 Cable master 二分搜索

一、思路 再本题目中&#xff0c;输入的所有数字都是只有两位小数&#xff0c;输出的答案也是两位小数&#xff0c;为了简单&#xff0c;我直接把每个数字乘以100&#xff0c;变成整数&#xff0c;然后去二分搜索&#xff0c;二分搜素的比较条件为数组所有元素都除以middle&am…

【小梦C嘎嘎——启航篇】vector 以及日常使用的接口介绍

【小梦C嘎嘎——启航篇】vector 日常使用的接口介绍&#x1f60e; 前言&#x1f64c;vector 是什么&#xff1f;vector 比较常使用的接口 总结撒花&#x1f49e; &#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01…

TypeScript入门指南

TypeScript学习总结内容目录&#xff1a; TypeScript概述 TypeScript特性。Javascript与TypeScript的区别 * TypeScript安装及其环境搭建TypeScript类型声明 * 单个类型声明&#xff0c;多个类型声明 * 任意类型声明 * 函数类型声明 * unknown类型…

css-flex使用

文章目录 flex弹性容器属性flex-directionflex-wrapflex-flowalign-itemsjustify-contentalign-content主轴和侧轴 弹性元素默认大小属性flex-growflex-shrinkalign-selfflex-basisflexorder 高度坍塌flex布局子元素宽度超出父元素 flex 弹性盒&#xff0c;伸缩盒&#xff0c;…

micropython SSD1306/SSD1315驱动

目录 简介 代码 功能 显示ASCII字符 ​编辑 画任意直线 画横线 画竖线 画矩形 画椭圆 画立方体 画点阵图 翻转 反相 滚动 横向滚动 纵向滚动 奇葩滚动 简介 我重新写了一个驱动&#xff0c;增加了一些功能&#xff0c;由于我的硬件是128*64oled单色I2C&#xff0c;我只…

【数据结构】如何用队列实现栈?图文详解(LeetCode)

LeetCode链接&#xff1a;225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 本文默认读者已经掌握栈与队列的基本知识 或者先看我的另一篇博客&#xff1a;【数据结构】栈与队列_字节连结的博客-CSDN博客 做题思路 由于我们使用的是C语言&#xff0c;不能直接使用队…

vue中使用html2canvas+jsPDF实现pdf的导出

导入依赖 html2canvas依赖 npm install html2canvasjspdf依赖 npm install jspdfpdf导出 以导出横向&#xff0c;A4大小的pdf为例 规律&#xff1a;1. html2canvas 中&#xff0c;在保持jsPDF中的宽高不变的情况下&#xff0c;设置html2canvas中的 width 和 height 值越小&a…

npm 不是内部或外部命令,也不是可运行的程序或批处理文件。

遇到问题&#xff1a; 1.遇到问题&#xff1a;npm 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 2.遇到问题&#xff1a;或者使用npm安装插件时会出现 XXX\node\node_modules\npm不可用 情况 如下图&#xff1a; 分析问题&#xff1a; nodejs在nodejs官网…

分布式ID

分布式ID 背景Snowflake(雪花算法)背景 分布式系统,用什么做为主键呢? uuid 太长(MySQL官方有明确的建议主键要尽量越短越好[4],36个字符长度的UUID不符合要求。)、 无规律(在InnoDB引擎下,UUID的无序性可能会引起数据位置频繁变动,严重影响性能。)SnowflakeLeaf h…

GO学习之 数据库(mysql)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

【vue3】同个页面引入多个图表组件实现自适应的方法

首先说明&#xff0c;此方案仅针对vue3项目在同一个页面引入了多个图表组件&#xff0c;因为我发现不能框架不同的引入&#xff0c;resize的写法还不同 window.addEventListener("resize", function() {...// 在此处重新调用即可 }以下是具体写法&#xff1a; 循环…

前端实习第五周周记

前言 每一天做了什么还是要记录一下&#xff0c;不然过两天后就会发现&#xff0c;慢慢遗忘自己的收获与做过的东西。 这周做的是医学检验系统的样本库部分。由于是公司的代码所以不能交代具体&#xff0c;那么久聊一下每天具体做了些什么以及我的一些收获。 周一 周一上午…

【C++】四种强制类型转换

内容来自《C Primer&#xff08;第5版&#xff09;》4.11.3 显示转换、6.4 函数重载、19.2.1 dynamic_cast运算符 目录 1. static_cast 2. const_cast 3. reinterpret_cast 4. dynamic_cast 4.1 指针类型的dynamic_cast 4.2 引用类型的dynamic_cast C语言的强制类型转换&…

Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)

文章目录 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)服务端客户端 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四) 服务端 服务端结构如下&#xff1a; UserModel using System; using System.Collections.Generic; usin…

Qt 编译使用Bit7z库接口调用7z.dll、7-Zip.dll解压压缩常用Zip、ISO9660、Wim、Esd、7z等格式文件(二)

修改qt5 7zip源码编译及使用(含展示进度)一文中的封装类ZlibHelper代码类&#xff0c;继承多线程&#xff0c;使解压&#xff0c;压缩时进度条不影响界面&#xff0c;同时添加压缩文件中的文件预览功能&#xff0c;建议直接看源码 导读 相关代码内容扩展预览内容时获取文件修改…

深入探究arthas的命令

Arthas是一个Java诊断工具&#xff0c;用于在线诊断Java应用程序&#xff0c;以便更轻松地监控和分析应用程序的性能和行为。Arthas中有许多用于诊断Java应用程序的命令。 1. jvm 和 dashboard 命令的区别&#xff1a; jvm&#xff1a;该命令用于显示当前的JVM信息&#xff0c…

pointnet C++推理部署--tensorrt框架

classification 如上图所示&#xff0c;由于直接export出的onnx文件有两个输出节点&#xff0c;不方便处理&#xff0c;所以编写脚本删除不需要的输出节点193&#xff1a; import onnxonnx_model onnx.load("cls.onnx") graph onnx_model.graphinputs graph.inpu…

【C++】C++入门基础:引用详解

本篇继续分享关于C入门的相关知识&#xff0c;有关命名空间、缺省参数和函数重载的部分欢迎阅读我的上一篇文章【C】C入门基础详解&#xff08;1&#xff09;_王笃笃的博客-CSDN博客 继续我们的学习 引用 在C语言中我们接触过指针&#xff0c;很多人都或多或少为他感到头痛过…

使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地

本文主要实现了在Ubuntu云服务器后台运行Jupyter Notebook&#xff0c;并使用SSH隧道将服务器端口映射到本地 1. 生成配置文件 运行以下命令生成Jupyter Notebook的配置文件&#xff1a; jupyter notebook --generate-config这将在用户主目录下生成一个名为.jupyter的文件夹&…

MySQL索引ES索引

MySQL MySQL索引的种类 按照索引列值的唯一性:索引可分为唯一索引和非唯一索引; 唯一索引:此索引的每一个索引值只对应唯一的数据记录,对于单列唯一性索引,这保证单列不包含重复的值。对于多列唯一性索引,保证多个值的组合不重复。主键索引是唯一索引的特定类型。该索引…