在开发程序过程中通信功能还是比较常用到的，本文主要介绍的是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>以上完成，如果疑问评论区留言即可。