websocket 通用类封装和使用

桃根仙

于 2024-02-29 14:05:39 发布

阅读量665

点赞数 6

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

本文链接：https://blog.csdn.net/taotaobaobei/article/details/136369016

版权

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

摘要由CSDN通过智能技术生成

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.callBackMapping[socketType]=null;
	}
	
	//发送数据的函数
	send(data){
		if(this.connected){
			this.sendRetryCount=0;
			try{
				this.ws.send(JOON.stringify(data));
			}catch(e){
				this.ws.send(data)
			}
		}else{
			this.sendRetryCount++;
			setTimeout(()=>{
				this.send(data);
			},this.sendRetryCount*500)
		}
	}
}

如何使用

1.导入
import SocketService from "@/utils/SocketService"

2.在data中定义全局句柄
socketServe:SocketService.Instance

3.初始化并使用

mounted(){
	init();
	this.socketServe.ws.onmessage=function(msg){
		console.log(msg.data,"chat————从服务器获取到了数据")
		const res=JSON.parse(msg.data)
		console.log("res的状态",res.type)
		if(res.type===0){
			this.receiveAllMsg.push({
				'type':'receive',
				'content':res.params.message
			})
		}
		if(res.type===2){
			this.receiveAllMsg.push({
				"type":"receive",
				"content":res.params.message
			})
		}
	}
}


function init(){
	Toast.loading({message:"加载中...",forbidClick:true})
	const data=queryEyeUser().then(res=>{
		this.userlist=data.content;
		//向后端发送注册用户的消息
		sendRegisterData()
		Toast.clear()
	})
}


SocketService.Instance.connect();


this.socketServe=SocketService.Instance;
this.socketServe.registerCallBack("callback1",this.socketServe)

//发送注册消息
function sendRegisterData(){
	const data={
		type:7,
		params:{
			openid:store.state.userInfo.openid,
			userName:store.state.userInfo.email
		}
	}
	this.socketServe.send(data);
}

//发送消息

function sendMsg2(){
	const data={
		type:1,
		params:{
			toMessageId:toUser.openid,
			message:content,
			fileType:0,
		}
	};
	this.socketServe.send(data)
	this.receiveAllMsg.push({
		'type':'self',
		'connect':content
	})
	this.content=""
}