uni-app 前端聊天室 Socket 使用 挖坑

没时间解释了，快上车！！！

刚弄完聊天室，一看右下角17:40了，这个socket使用方法就简单粗暴些吧

参考官方文档

1、打开一个socket连接 uni.connectSocket

这个连接微信只能用wss协议，所以具体还是看需要和后台给的链接了，我这里只讲前端部分，后台给的地址大概长这样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

在这里是已经登录成功了，之后每次发送消息都需要调用一次的uni.sendSocketMessage，具体需要参数看后台需要了，每次调用发送uni.sendSocketMessage之后都能被uni.onSocketMessage监听到，只需要在监听到的时候重新获取一下消息

	uni.onSocketMessage((ress)=>{
		console.log('收到的消息',ress)
		let res = JSON.parse(ress.data);
		if(res.code==3||res.code==0){//这里的判断是在发送消息成功的时候，获取新的消息列表
			this.getMsg();
		}
	})

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
		})
	})
},