websocket封装与使用

avatar
作者
猴君
阅读量:0

新建WebSocketService.js

export default class WebSocketService {     constructor(url, getSocketMsg, sendSucc) {         this.url = url;         this.getSocketMsg = getSocketMsg;         this.sendSucc = sendSucc; // 发送命令成功后的回调,可有可无 		 		         this.socketTask = null;         this.isOpenSocket = false;         this.socketPrestore = {             state: false,             data: null         };     }      connect() {         this.socketTask = uni.connectSocket({             url: this.url,             success: ()=>{ 				console.log('正在建立socket链接:', this.url); 			},         });          this.socketTask.onOpen(() => { 			console.log("WebSocket连接已发开...!");             this.isOpenSocket = true; 			             if (this.socketPrestore.state) {                 this.sendSocketData(this.socketPrestore.data);                 this.socketPrestore.state = false;             }         });          this.socketTask.onMessage((res)=>{ 			this.getSocketMsg(res) 		});         this.socketTask.onClose(() => {             this.isOpenSocket = false;         });     }; 	sendSocketData(data) { 	    if (this.isOpenSocket) { 	        const sendData = JSON.stringify(data); 			console.log("发送socket数据:", sendData); 	        this.socketTask.send({  				data: sendData, 				success: ()=>{ 					console.log("socket消息发送成功"); 					this.sendSucc && this.sendSucc() 				} 			}); 	    } else { 	        this.socketPrestore.data = data; 	        this.socketPrestore.state = true; 			this.connect(this.url) 	    } 	};     close() {         if (this.isOpenSocket) {             this.socketTask.close();             this.isOpenSocket = false;         }     } } 

关于socketPrestore 部分代码处理机制是根据我的业务添加的,防止发送命令的时候socket链接被服务主动断开做的机制处理,若不需要直接删除就行。

方法调用

<script> 	//引入websocket文件 	import WebSocketService from '@/utils/WebSocketService.js' 	export default { 		data() { 			return { 				socket: null, 			} 		}, 		mounted() { 			const url = 'wss://.....'// socket地址 			this.socket = new WebSocketService(url, this.receiveSocketData, this.sendSucc) 		}, 		methods: { 			receiveSocketData(res){ 				console.log('接收到socket数据:', res); 			}, 			sendSucc(){ 				console.log('发送命令成功后的回调'); 			} 		} 	} </script> 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!