H5 websocket 封装

H5 + WebSocket

index.html 请求

import { WS } from './js/request.js';
WS.init()

handleClick() {
	WS.checkSocketReady(() => {
		WS.sendMessage("周四，你好", (res) => {
		console.log("wozao接收消息SSS：", res)
	})
  })		
},

request.js封装

export const WS = {
	base: {
		baseUrl: "wss://echo.websocket.org",
		socketTask: null,
		heartbeatInterval: null,
		maxReconnectAttempts: 5,
		reconnectAttempts: 0,
		isConnected: false
	},
	init: () => {
		WS.base.socketTask = new WebSocket(WS.base.baseUrl);
		if (WS.base.socketTask) {
			console.log('WebSocket 已经连接');
		}
		
		if (!WS.base.baseUrl) {
			console.error('服务器地址未配置')
			return
		}
		
		// 连接成功时触发
		WS.base.socketTask.onopen = function(event) {
		    console.log('连接已建立');
		    WS.base.isConnected = true;
		  	WS.base.reconnectAttempts = 0;
		    WS.executeMonitoring();
		  	WS.base.socketTask.send('Hello Server!'); // 尝试发送
		};

		
		// 连接关闭时触发
		WS.base.socketTask.onclose = function(event) {
		  console.log('连接已关闭', event);
			WS.base.isConnected = false;
			WS.base.reconnectAttempts = 0;
			WS.base.socketTask = null;
		};
		
		// 发生错误时触发
		WS.base.socketTask.onerror = function(error) {
		  console.error('Websocket 错误: ', error);
		  WS.reconnect() // 重连
		};
	},
	sendMessage: (msg, callback) => {
		WS.base.socketTask.send(msg)
		WS.base.socketTask.onmessage = function(event) {
			callback(event.data)
		}
	},
	checkSocketReady(callback) {
		// 检查连接状态
		if (WS.base.socketTask && WS.base.socketTask.readyState === 1) {
			callback();
		} else {
			WS.base.socketTask?.onOpen(() => { callback(); });
		}
	},
	executeMonitoring() {
		// 监听注册事件
		if (WS.base.socketTask) {
			WS.base.socketTask.onmessage = (event) => {
				console.log(`%c服务器响应数据：`, "background: blue; color: white;");
				console.log('服务器响应数据：',event.data);
			}
		}
	},
	reconnect() {
		// 重连方法
		WS.base.socketTask = null
		if (WS.base.reconnectAttempts < WS.base.maxReconnectAttempts) {
		    WS.base.reconnectAttempts++;
		    // const delay = Math.min(1000 * WS.base.reconnectAttempts, 10000);
		    setTimeout(WS.init(), 3000);
		} else {
			console.error('已达到最大重连次数，停止重连');
		}
	}
}