1、打开一个socket连接 uni.connectSocket
这个连接VX只能用wss协yi,所以具体还是看需要和后台给的链接了,我这里只讲前端部分,后台给的地址大概长这样*ws://****.com/WebSocketServer.ashx ,需要参数直接加在后面
uni.connectSocket({
url:'ws://*****.com/WebSocketServer.ashx?id:id'
})
2、监听连接是否成功 uni.onSocketOpen
参考官方文档,这些是一个监听api,写在uni.connectSocket 之后,监听连接成功之后进行一次socket发送uni.sendSocketMessage ,第一次为登录,具体的登录参数咨询后台
uni.onSocketOpen((ress)=>{
console.log('成功连接',ress)
uni.sendSocketMessage({ data: JSON.stringify({MsgType: 1}) });//{MsgType: 1}为后台需要的参数
//获取消息列表
})
3、监听新消息 uni.onSocketMessage
4、发送消息
在连接成功 || 发送消息时,调用 uni.sendSocketMessage 成功之后,可以被3、监听,当然,对方也是会监听到这个消息的更新,并做更新后的操作
部分代码
//创建连接
async openSocket(){
const res = await post('Message/GetWebSocketId',{
UserId: this.userId,
Token: this.token,
ToMemberId:this.id
})
// 创建连接
uni.connectSocket({
url:'ws://ywapi.wtvxin.com/WebSocketServer.ashx?Signature='+res.data.Signature,
complete(err){
console.log(err,res.data.Signature)
}
})
uni.onSocketOpen((ress)=>{
console.log('成功连接',ress)
this.sendSocketMsg({MsgType: 1})
this.getMsg();
})
uni.onSocketError((err)=>{
console.log('失败连接',err)
toast('系统错误,请重新尝试')
setTimeout(()=>{
uni.navigateBack();
},1500)
})。
uni.onSocketMessage((ress)=>{
console.log('收到的消息',ress)
let res = JSON.parse(ress.data);
if(res.code==3||res.code==0){
this.getMsg();
}
})
},
// 发送socket
sendSocketMsg(data){
uni.sendSocketMessage({ data: JSON.stringify(data) });
},
//发送消息
async send(data){
const res = await post('Message/SendMessage',{
UserId: this.userId,
Token: this.token,
ToMemberId:this.id,
Info:this.Comment
})
this.sendSocketMsg({
MsgType:3,
Id:res.data.Id,
Info:this.Comment
})
this.Comment='';
},
//获取消息
async getMsg(){
const res = await post('Message/ReadMessage',{
UserId: this.userId,
Token: this.token,
ToMemberId:this.id,
})
const data = res.data;
let time=0;
data.map(item=>{
let nowTime = new Date(item.AddTime).getTime();
if((nowTime-time)/1000/60>5){
item.AddTime = item.AddTime.slice(0,item.AddTime.lastIndexOf(':'))
}else{
item.AddTime ='';
}
time = nowTime;
})
this.list = data;
//在下一次更新dom时滑动到底部
this.$nextTick(function(){
// 滚动至页面底部
uni.pageScrollTo({
scrollTop: 99999999999,
duration:100
})
})
},