当前位置: 首页 > news >正文

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.lryc.cn/news/129747.html

相关文章:

  • labelme安装以及标注自己的目标检测数据集
  • 归并排序JS
  • matlab 计算点云平均密度
  • c++ | uint8_t、uint16_t、unint32_t 和size_t
  • mysql 超大 sql 文件导入过程
  • 【悬挂绝缘子的串效模型】测量每个绝缘子盘之间的电压并测量串效研究(Simulink)
  • P3957 [NOIP2017 普及组] 跳房子
  • VR数字工厂多元化展现,打造数字企业工厂名片
  • uniapp封装组件,选中后右上角显示对号√样式(通过css实现)
  • 华为OD面试(部分)
  • 从零做软件开发项目系列之一综论软件项目开发
  • msvcp110.dll是什么意思,msvcp110.dll丢失的解决方法
  • 【报错】git push --set-upstream origin XXXX重名
  • 探索树算法:C语言实现二叉树与平衡树
  • Ubuntu 20.04(服务器版)安装 Anaconda
  • IDEA项目实践——JavaWeb简介以及Servlet编程实战
  • 【Freertos基础入门】队列(queue)的使用
  • 从零构建深度学习推理框架-8 卷积算子实现
  • 【Spring Boot】JdbcTemplate数据连接模板 — JdbcTemplate入门
  • 视频汇聚集中存储EasyCVR平台调用iframe地址视频无法播放,该如何解决?
  • 从今天起,重新出发
  • Java多态详解(1)
  • optee读取Arm系统寄存器的模板
  • VSCode 使用总结
  • GuLi商城-前端基础Vue-使用Vue脚手架进行模块化开发
  • LeetCode450. 删除二叉搜索树中的节点
  • Java动态调试技术原理及实践
  • Lua + Redis 实战代码
  • 类的访问限定符,实例化,对象存储方式,this指针
  • 《Linux从练气到飞升》No.15 Linux 环境变量