uniapp中使⽤websocket实现实时聊天功能
直接贴代码
//scroll-view组件的scroll-top属性：设置竖向滚动条位置。只要scroll-top⼤于滚动区域最⼤⾼度，即可滚动到底部
<scroll-view scroll-y="true" :scroll-top="commentScrollCount" class="comment-scroll-body">
。。。。。。
</scroll-view>
data(){
return{
commentList:[],  //获取的评论列表
commentValue:'',  //⽤户评论内容
isSocketOpen:false,  //socket是否打开
pingpangTimes:null,  //socket⼼跳计时器
}
}
onLoad(option) {
this.chatInit()  //socket相关操作
},
beforeDestroy() {
clearInterval(this.pingpangTimes)  //清除socket⼼跳定时器
uni.closeSocket()  //关闭socket
},
methods:{
/
/链接socket以进⾏直播实时评论发送获取等相关操作
chatInit(){
url: `${this.$baseUrl}/api-live/checkLiveStatus?lid=${this.lid}&initial=1`,  //此接⼝返回socket请求地址
method: 'GET',
success: res => {
if(de==200){
let socketlink=null
if(this.userToken){  //已登录，携带token
socketlink=`${res.data.msg}?token=${this.userToken}`
}else{  //未登录
socketlink=res.data.msg
}
thismentList=[]  //创建新的socket连接前先清除之前的实时聊天记录
uni.closeSocket()  //创建新的socket连接前确保旧的已关闭
//创建⼀个socket连接
url:socketlink,
success: res=>{}
})
//监听socket打开
this.isSocketOpen=true
console.log('WebSocket连接已打开！');
})
//监听socket关闭
this.isSocketOpen=false
console.log('WebSocket连接已关闭！');
})
//监听socket错误
this.isSocketOpen=false
console.log('WebSocket连接打开失败');
})
//监听socket消息
let infos=JSON.parse(res.data)  //socket信息是字符串，需要先转成json形式再去解析内容
//后端规定cadmin为0--⽤户发⾔，为1--管理员发⾔，为2--系统提⽰，为3--需登录，为5--⼼跳信息
if(typeof(infos.cadmin)=="undefined"){  //infos.cadmin不存在说明返回的是数组，说明是第⼀次获取的之前的所有聊天记录
at(infos)
//设置定时器，到时间后滚动到最底部。使⽤scroll-view组件的scroll-top属性。只要scroll-top的值⼤于滚动区域的最⼤⾼度即可实现滚动到最底部      let scrolltimes=setTimeout(()=>{
thismentScrollCount=thismentList.length*200
clearTimeout(scrolltimes)
},600)
//后续每次更新⼀条有效的新聊天（⼼跳信息pong不是有效聊天），就会触发这个
}else if(infos.cadmin==0||infos.cadmin==1||infos.cadmin==2){
at(infos)
let scrolltimes=setTimeout(()=>{
thismentScrollCount=thismentList.length*200
clearTimeout(scrolltimes)
},150)
}else if(infos.cadmin==3){  //未登录
this.loginPopRemind="您尚未登录或您的登录已过期，请重新登录后发⾔"
this.$LoginPopup.open()
}
})
//先确保清除了之前的⼼跳定时器
clearInterval(this.pingpangTimes)
//每过⼀段时间发送⼀次⼼跳，发送Ping，服务器会反馈pong，这样操作以保持socket⼀直是连接状态，防⽌断开连接，⼼跳停⽌    this.pingpangTimes=setInterval(()=>{
uni.sendSocketMessage({
data: "ping",
success:()=>{},
fail:()=>{
this.isSocketOpen=false
}
});
},60000)
}
},
});
},
/
/发表评论
sendComment(val){websocket和socket
if(val==""){
uni.showToast({title: '说点什么吧 ~',icon:'none'})
}else if(val.length>300){
uni.showToast({title: `评论字数请勿超过300个字符，当前 ${val.length}`,icon:'none'})
}else{
if(this.userToken){  //已登录
if(this.isSocketOpen){  //socket连接正常
thismentValue=val
let theValue={
"ccontent":thismentValue
}
let transedValue=JSON.stringify(theValue)  //后端规定的评论数据格式:json转字符串
uni.sendSocketMessage({
data: transedValue,
success:()=>{
thismentValue=""
uni.showToast({title: '发送成功',icon:'none'})
},
fail:()=>{
uni.showToast({title: '发送失败，请稍后再试或重新进⼊此页⾯尝试',icon:'none'})
}
});
}else{  //socket已断开
uni.showToast({title: '聊天断开啦，请重新进⼊此页⾯尝试 ~',icon:'none'})
}
}else{  //未登录
this.$dLoginPopup.open()
}
}
},
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。