前端 websocket使用

前端 websocket使用

• 定义 socket.js

export default class SocketService {
	constructor(url, againConnect = true) {
		this.url = url;
		this.againConnect = againConnect;
	}
	instance = null; //页面中使用的SocketService实例
	ws = null; // 和服务端连接的socket对象
	url = ""; //地址
	againConnect; //断开是否重连
	connected = false; // 标识是否连接成功
	sendRetryCount = 0; // 记录重试的次数
	connectRetryCount = 0; // 重新连接尝试的次数

	//单例模式保证只有一个SocketService实例
	static get Instance() {
		if (!this.instance) {
			const url = "ws://192.168.0.11:8888";
			this.instance = new SocketService(url, true);
		}
		return this.instance;
	}
	//  定义连接服务器的方法
	connect() {
		// 这里判断你的浏览器支不支持websocket
		if (!window.WebSocket) {
			return console.log("您的浏览器不支持WebSocket");
		}
		this.ws = new WebSocket(this.url);
		//连接上了
		this.ws.onopen = () => {
			this.connected = true;
			// 重置重新连接的次数
			this.connectRetryCount = 0;
		};
		//连接关闭了，设置标识值为false，
		this.ws.onclose = () => {
      // 给每个回调发送一个错误信息
			for (let key in this.subscribeList) {
				const obj = {
					code: 1,
					msg: "服务器异常，请稍后重试",
					data: null,
				};
				this.subscribeList[key].forEach(item => item.call(this, obj));
			}

			this.connected = false;
			this.connectRetryCount++;
			if (this.againConnect) {
				setTimeout(() => {
					this.connect();
				}, 500 * this.connectRetryCount);
			} else {
				sessionStorage.clear();
				localStorage.clear();
			}
		};
		this.ws.onerror = () => {
       // 给每个回调发送一个错误信息
			for (let key in this.subscribeList) {
				const obj = {
					code: 1,
					msg: "服务器异常，请稍后重试",
					data: null,
				};
				this.subscribeList[key].forEach(item => item.call(this, obj));
			}

			this.connected = false;
			this.connectRetryCount++;
			if (this.againConnect) {
				setTimeout(() => {
					this.connect();
				}, 500 * this.connectRetryCount);
			}
		};
		this.ws.onmessage = e => {
			if (e.data) {
				let resData = JSON.parse(e.data);
				const requestId = resData.uuid;
				resData.data = resData.data ? JSON.parse(resData.data) : {};
				if (this.subscribeList[requestId]) {
					this.subscribeList[requestId].forEach(item => item.call(this, resData));
				}
			} else {
				console.log("服务器异常");
				for (let key in this.subscribeList) {
					const obj = {
						code: 1,
						msg: "服务器异常，请稍后重试",
						data: null,
					};
					this.subscribeList[key].forEach(item => item.call(this, obj));
				}
			}
		};
	}

	//销毁回调函数
	unSubscribe() {
		//停止消息发送
		this.idList.forEach(item => {
			// this.send({ uuid: item, type: "unsub" });
			delete this.subscribeList[item];
		});
		this.idList = [];
	}
	subscribeList = {}; //记载回调函数
	idList = [];
	// 发送数据的方法
	send(data, callback) {
		//判断此时有没有ws
		if (!this.ws) {
			this.connect();
			this.send(data, callback);
		} else {
			// 判断此时此刻有没有连接成功
			if (this.connected) {
				this.sendRetryCount = 0;
				this.ws.send(JSON.stringify(data));

				//存储id
				this.idList.push(data.uuid);
				//存储回调函数,
				if (!this.subscribeList[data.uuid]) {
					this.subscribeList[data.uuid] = [callback];
				} else {
					this.subscribeList[data.uuid].push(callback);
				}
			} else {
				this.sendRetryCount++;
				setTimeout(() => {
					this.send(data, callback);
				}, this.sendRetryCount * 500);
			}
		}
	}
}

• 使用

import SocketService from "../js/socket.js";
mounted() {
  this.ws = SocketService.Instance;

  this.sendRequest("getuser", {}, callback);
},
 destroyed() {
     this.ws.unSubscribe();
 },
 methods:{
     sendRequest(api, params, callback) {
		const uuid = "123e4567-e89b-12d3-a456-426655440000"; //测试用, 需使用工具生成uuid
		const data = {
			route: api,
			uuid: uuid,
			params: params,
		};
		this.ws.send(data, callback);
	},
	callback(res) {
		if (res.code == 0) {
			console.log(res);
		} else {
			Message.error(res.msg);
		}
	},
 }