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){
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()
信用卡申请被拒}
}
},
}
发布评论