uniapp中websocket即时通信 用法笔记

一、在app.vue中编写

1.在<script></script>标签中编写公共的创建链接封装

<script>
//socket连接标识 false未连接，true 连接
	let socket_flag=false; 
	var  SocketTask =	uni.connectSocket({
			header:{'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI4NTEyMjQyNiIsImNyZWF0ZWQiOjE1ODY1NzMzNjE5ODksImV4cCI6MTU4NzE3ODE2MX0.15CjVJh5Adz1pXTdGkDDiT6HzOwtnOj-y4l6sDVD2eBNO4zFMkPw1ixhfyB8fOx62AF6FTv2z1maNO2i6-FS-g',
			 'content-type': 'application/json'},
			url:'ws://10.0.106.21:8201/mall-portal/socket/9',
			fail:function(res){
				console.log("连接服务器websocket_失败",res);
			},
			success:function(res){
				console.log("连接服务器websocket_成功",res);
				socket_flag = true;
			},
			complete:function(res){
				console.log("连接服务器websocket_完成",res);
			}
		});
</script>

2.还是在app.vue中 export default下将第一步封装连接通信导出为全局方法使用

export default {
		  globalData: { //   导出为全局方法使用
		    SocketTask: SocketTask  
		  },  
		 methods: {
		 }
}	

3.还是在app.vue中 methods下 编写“SocketTask 通信接受消息” 等方法

methods: {
			...mapMutations(['login']),
			
			onmessage_fun:function(){
				console.log("onmessage_fun_______");
				SocketTask.onMessage(function(data){
					console.log("SocketTask 通信接受消息______",data);
					uni.$emit('app_test',data); 
				})
			},
			//中转事件
			app_test:function(data){
				 console.log("监听到了，接受消息的事件回调::ffffffffff::::::")
			},
			
			openSocketFun:function(){
				SocketTask = uni.connectSocket({
						header:{'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI4NTEyMjQyNiIsImNyZWF0ZWQiOjE1ODY1NzMzNjE5ODksImV4cCI6MTU4NzE3ODE2MX0.15CjVJh5Adz1pXTdGkDDiT6HzOwtnOj-y4l6sDVD2eBNO4zFMkPw1ixhfyB8fOx62AF6FTv2z1maNO2i6-FS-g',
						 'content-type': 'application/json'},
						url:'ws://10.0.106.21:8201/mall-portal/socket/9',
						fail:function(res){
							console.log("连接服务器websocket_失败",res);
						},
						success:function(res){
							console.log("连接服务器websocket_成功",res);
						},
						complete:function(res){
							console.log("连接服务器websocket_完成",res);
						}
					}); 
				getApp().globalData.SocketTask  = SocketTask;
			}
		},

需要注意的：methods中app_test这个中转事件不写不行，不写就会报错，不执行创建连接通信方法，因为在接受通信信息时候需要$emit触发这个“中间事件”来传递 “信息”；创建连接方法也需要在methods中写一遍
4.还是在app.vue中 onshow下 调用methods中的方法等 监听信息，

onShow: function() {
		console.log('App Show')
		// 判断socket连接标识 false未连接，true 连接
		if(!socket_flag){
			// 调用methods中方法打开创建连接
			this.openSocketFun();
		}
		// 调用全局的创建连接方法    执行.onOpen打开连接
		SocketTask.onOpen((res)=>{
			console.log("socketTask 打开连接: ",res);
			socket_flag  = true;// 修改连接标识 为true
			this_.onmessage_fun(); // 调用接收通信信息的方法 接收信息
		});
		
		
	},

5.还是app.vue中的onHide下，在页面离开时

onHide: function() {
			console.log('App Hide')
			// 关闭连接
			SocketTask.close({
				code:1000,
				success:function(){
					console.log("SocketTask close success ");
				},
				fail:function(res){
					console.log("SocketTask close fail ",res);
				}
				
			});
			// 关闭连接并且修改标识
			SocketTask.onClose(function(){
				console.log("SocketTask onClose success ");
				socket_flag = false;
			})
			
		},

二、在需要通信的页面编写

1.在<script></script>标签中编写app.vue中方法的使用，调用

<script>
	let app=  getApp();
</script>

2.在onLoad页面加载中，监听app.vue中的全局事件

onLoad(option) {
	uni.$on('app_test',( data)=> { // 监听app.vue中的全局事件
			  // 接受到后台发来的对话信息   data
			  var nowDate = new Date();
			  let newData = JSON.parse(data.data) // 一条数据
			  let userId = newData.user  // id 对方的
			  let type = newData.type
			   console.log("收到消息_______",data)
			// 收到信息后进行信息数据类型判断  后再显示

	  })
},
// 页面离开后移除监听 
onUnload() {  
		    // 移除监听事件
			uni.$off('onmessage_fun');
		},

3.在页面methods中编写发送信息的方法

// 发送消息
			sendMsg(content,type){
			// content为要发送的内容  type为要发送的内容类型  文字还是图片等
				
				var nowDate = new Date();
				// 自己发出的消息
				let myId = this.myuid // 自己的id
				let uid = this.other_partyId // 发给谁的id
				// let uid = '8' // 发给谁的id
				let msg = {id:9,toUserName:"大黑哥",face:"/static/img/face.jpg",time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,msg:content};
				this.screenMsg(msg); // 这是一个自己写的判断信息类型的方法
				let data = {
					user: uid, // 发给谁的id
					type: type,
					data: content
				}
				let dataStr = JSON.stringify(data)
				// console.log(app.globalData.SocketTask)
				app.globalData.SocketTask.send({ // 发送消息
					data:dataStr,
					success:function(res){
						console.log("SocketTask 发送消息成功", res);
					},
					fail:function(res){
						console.log("SocketTask 发送消息失败",res);
					},
					complete() { // 成功或失败都执行
						console.log("SocketTask 发送消息完成");
					}
				})
				
			},

到这儿差不多完成了 但是细节太多 还有bug 需要解决 先做个记录