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>

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