app网站开发教程,企业查询网站企查查,什么是网络营销基本思想,上海建设工程施工许可证查询网站6在开发程序过程中通信功能还是比较常用到的#xff0c;本文主要介绍的是uniapp中websocket的使用
websocket建立连接后#xff0c;断开、心跳机制重新链接的一个过程。
关于uni.connectSocket可仔细阅读uniapp官网中的uni.connetSocket以及连接socket创建的实例SocketTask …在开发程序过程中通信功能还是比较常用到的本文主要介绍的是uniapp中websocket的使用
websocket建立连接后断开、心跳机制重新链接的一个过程。
关于uni.connectSocket可仔细阅读uniapp官网中的uni.connetSocket以及连接socket创建的实例SocketTask
具体代码如下内有代码详细注解如果疑问可在评论区留言。
scriptvar 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 classscroll-listview classshow-view v-for(item,index) in barrageList :keyindex{{item.content}}/view/scroll-viewstyle langscss 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 以上完成如果疑问评论区留言即可。
