websocket 通用类封装和使用

最新推荐文章于 2024-09-30 14:09:02 发布

桃根仙

最新推荐文章于 2024-09-30 14:09:02 发布

阅读量795

点赞数 6

文章标签： websocket 网络协议网络

本文链接：https://blog.youkuaiyun.com/taotaobaobei/article/details/136369016

版权

文章介绍了如何封装WebSocket服务类，包括实例化、连接管理、回调函数注册与取消以及数据发送功能。还展示了如何在Vue应用中使用这个SocketService进行通信操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket 工具类封装

export default class SocketService{
	static instance=null;
	static get Instance(){
		if(!this.instance){
			this.instance=new SocketService();
		}
	}
	wx=null;
	callBackMapping={};
	connected=false;
	sendRetryCount=0;
	connectRetryCount=0;
	connect(){
		if(!window.WebSocket){
			return console.log("您的浏览器不支持websocket")
		}
		let url="ws:127.0.0.1:8888/websocket";
		this.ws=new WebSocket(url)
		this.ws.onopen=()=>{
			console.log("连接成功")
			this.connected=true;
			this.connectRetryCount=0;
		};
		this.ws.onclose=()=>{
			console.log("链接失败")
			this.connected=false;
			this.connectRetryCount++;
			setTimeout(()=>{
				this.connect();
			},500*this.connectRetryCount);
		};
	}
	//回调函数的注册
	registerCallBack(socketType,callBack){
		this.callBackMapping[socketType]=callBack;
	}
	//取消回调函数注册
	unRegisterCallBack(socketType){
		this

最低0.47元/天解锁文章