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>

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