uniapp中websocket的使用方法

今天研究一下在uniapp中websocket的使用方法：

基本使用：
uni.closeSocket();
关闭现有的websocket服务

uni.connectSocket({
url:“”
});
创建一个新的websocket连接,其中的url是必须传的参数。

uni.onSocketOpen(function (res) {
})
连接成功后的回调函数

uni.onSocketMessage(function (res) {
console.log(‘收到服务器内容：’ + res.data);
})
监听WebSocket接受到服务器的消息事件。

以上为基本用法。

在项目中的实际应用:

onShow(){
	//首页显示
	uni.getStorage({
			key: 'UserListYH',
				//获取本地存储中的用户信息
			success: (res)=>{
				//获取成功的回调函数
				this.isLogin = true
				//登陆状态标记为true
				uni.request({
					//根据得到的用户id发送ajax请求，获取用户的消息
					url: this.$api+'/IM/isHaveMessage/' + res.data.id,
					success: (resquert) => {
					//请求成功的回调函数
						console.log(resquert,'resquert')
						if(resquert.data.data){
							this.showxxList = true
							this.$store.state.dataList = true
						}else{
							this.showxxList = false
						}
					}
				});
				//到这里为止还没有用到websocket
				if(!this.socketOpen){
					//判断是否打开了socket服务
					this.uniOpenSocket(res.data.id);
					//如果没有打开服务，就调用开启socket的函数，把用户的id作为参数传进去
				}
			},
			fail:(e)=>{
				//如果存储中获取不到用户信息，登陆状态变成未登录
				this.isLogin = false;
			}
		});
}

uniOpenSocket(id){
			uni.closeSocket();
			//关闭现在的socket
			let _this = this;
			uni.connectSocket({
				url:"ws://uep5ems.nat.ipyingshe.com/imServer/"+id
				//可以判断这个url地址是后端地址，ws:是websocket协议，而且可以发现用户id多次出现
			});
			uni.onSocketOpen(function (res) {
				//连接成功后的回调
				_this.socketOpen = true
				//socket标记为开启状态
				_this.onSocketMessage();
				// 调用了名为onSocketMessage的函数
				uni.getStorage({
				    key: 'userMsgList',
				    success: function (res) {
						console.log('初始化聊天列表成功！');
						console.log(res);
						if(res.data.length == 0){
							_this.chatList=[{
								userId:5,
								userName:"在线客服",
								imageUrl:"/static/img/im/face/face_2.jpg",
								time:"",
								nowMsg:"欢迎提问,很高兴为您服务！",
								numberOfMsg:0,
							}]
						}else{
							console.log(res.data,'*********');
							_this.chatList = res.data
						}
				    },
					fail() {
						_this.chatList=[{
							userId:5,
							userName:"在线客服",
							imageUrl:"/static/img/im/face/face_2.jpg",
							time:"",
							nowMsg:"欢迎提问,很高兴为您服务！",
							numberOfMsg:0,
						}]
					}
				});
			});

//socket连接成功后，调用的回调函数
onSocketMessage(){
			let _this = this;
			let timer = setInterval(()=>{
				//开启一个定时器
				uni.onSocketMessage((msg)=>{
					//接收到服务器的消息
					clearInterval(timer)
					//清空定时器
					if(!msg.data){
						//如果没有消息直接退出当前执行函数
						return
					}
					const msgUser = JSON.parse(msg.data);
					//如果有消息，把消息字符串解析成json对象
					console.log(msgUser)
					let haschatList = false;
					uni.getStorage({
					    key: 'userMsgList',
					    //从本地存储中获取用户的消息列表
					    success: function (res) {
					    	//获取成功的回调
							_this.chatList = res.data
							//获取的消息列表存入data
							console.log(_this.chatList,'chatList----------');
					    },
						fail: () => {
							console.log('getstorage失败了');
						}
					});



					_this.chatList.forEach((item,index) => {
						// 判断函数----判断当前用户是否在列表
						if(item.userId == msgUser.fromUserId){
							haschatList = true;
							_this.chatList[index].time = msgUser.sendTime
							_this.chatList[index].numberOfMsg++
							_this.chatList[index].nowMsg = msgUser.contentText
							_this.chatList[index].UserAndMeMsgList.push({
								userMsgID: msgUser.fromUserId,
								time: msgUser.sendTime,
								msg: msgUser.contentText
							})
							uni.setStorage({
							    key: 'userMsgList',
							    data: _this.chatList,
								success: function () {
									uni.$emit('haveNewMsg',
									{
										userMsgID: msgUser.fromUserId,
										time: msgUser.sendTime,
										msg: msgUser.contentText
									})
								}
							});
						}
					})
					if(haschatList && _this.chatList.length != 1){
						return
					}
					uni.request({
						url: _this.$api + '/userInfo/getUserInfo?userId='+msgUser.fromUserId,
						method:'POST',
						success: (res) => {
							console.log(res.data.data)
							let msgLsit = {
								userId: msgUser.fromUserId,
								imageUrl: res.data.data.avatar,
								userName: res.data.data.name,
								time: msgUser.sendTime,
								nowMsg: msgUser.contentText,
								numberOfMsg: 1,
								UserAndMeMsgList:[]
							}
							msgLsit.UserAndMeMsgList.push({
								userMsgID: msgUser.fromUserId,
								time: msgUser.sendTime,
								msg: msgUser.contentText
							})
							_this.chatList.unshift(msgLsit)
							uni.setStorage({
							    key: 'userMsgList',
							    data: _this.chatList,
								success: function () {
									uni.$emit('haveNewMsg')
								}
							});
						},
					});
				})
			},60)