Merge branch 'master' of http://192.168.1.22:3000/frontend/pqs-9100_client
# Conflicts: # frontend/src/utils/webSocketClient.ts
This commit is contained in:
sjl
234
frontend/src/utils/jwtUtil.ts
Normal file
234
frontend/src/utils/jwtUtil.ts
Normal file
@@ -0,0 +1,234 @@
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
|
||||
// JWT Token解析后的载荷接口
|
||||
export interface JwtPayload {
|
||||
userId?: string;
|
||||
loginName?: string;
|
||||
exp?: number;
|
||||
iat?: number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// Token信息摘要接口
|
||||
export interface TokenInfo {
|
||||
userId: string | null;
|
||||
loginName: string | null;
|
||||
expiration: string | null;
|
||||
isExpired: boolean;
|
||||
remainingTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* JWT工具类
|
||||
* 提供JWT token的解析、验证等功能
|
||||
*/
|
||||
export class JwtUtil {
|
||||
/**
|
||||
* Base64URL解码
|
||||
* @param str Base64URL编码的字符串
|
||||
*/
|
||||
private static base64UrlDecode(str: string): string {
|
||||
try {
|
||||
// Base64URL转Base64
|
||||
let base64 = str.replace(/-/g, '+').replace(/_/g, '/');
|
||||
|
||||
// 补齐padding
|
||||
while (base64.length % 4) {
|
||||
base64 += '=';
|
||||
}
|
||||
|
||||
// Base64解码
|
||||
const decoded = atob(base64);
|
||||
|
||||
// 处理UTF-8编码
|
||||
return decodeURIComponent(
|
||||
decoded
|
||||
.split('')
|
||||
.map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
|
||||
.join('')
|
||||
);
|
||||
} catch (error) {
|
||||
throw new Error('Base64URL解码失败: ' + error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析JWT Token获取载荷信息
|
||||
* @param token JWT token字符串，如果不传则从store中获取
|
||||
*/
|
||||
static parseToken(token?: string): JwtPayload | null {
|
||||
try {
|
||||
let targetToken = token;
|
||||
|
||||
// 如果没有传入token，从store中获取
|
||||
if (!targetToken) {
|
||||
const userStore = useUserStore();
|
||||
targetToken = userStore.accessToken;
|
||||
}
|
||||
|
||||
if (!targetToken) {
|
||||
console.warn('Token不存在');
|
||||
return null;
|
||||
}
|
||||
|
||||
// JWT token由三部分组成，用.分割：header.payload.signature
|
||||
const parts = targetToken.split('.');
|
||||
if (parts.length !== 3) {
|
||||
console.error('无效的JWT token格式');
|
||||
return null;
|
||||
}
|
||||
|
||||
// 解码payload部分（第二部分）
|
||||
const payload = parts[1];
|
||||
const decodedPayload = this.base64UrlDecode(payload);
|
||||
const tokenData: JwtPayload = JSON.parse(decodedPayload);
|
||||
|
||||
return tokenData;
|
||||
} catch (error) {
|
||||
console.error('解析JWT Token失败:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定字段的值
|
||||
* @param field 字段名
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getField<T = any>(field: string, token?: string): T | null {
|
||||
const tokenData = this.parseToken(token);
|
||||
return tokenData?.[field] || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户ID
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getUserId(token?: string): string | null {
|
||||
return this.getField<string>('userId', token);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取登录名
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getLoginName(token?: string): string | null {
|
||||
return this.getField<string>('loginName', token);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取Token过期时间戳（秒）
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getExpiration(token?: string): number | null {
|
||||
return this.getField<number>('exp', token);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取Token签发时间戳（秒）
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getIssuedAt(token?: string): number | null {
|
||||
return this.getField<number>('iat', token);
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查Token是否过期
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static isExpired(token?: string): boolean {
|
||||
const exp = this.getExpiration(token);
|
||||
if (!exp) return true;
|
||||
|
||||
// JWT中的exp是秒级时间戳，需要转换为毫秒
|
||||
const expTime = exp * 1000;
|
||||
return Date.now() >= expTime;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取Token剩余有效时间（毫秒）
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getRemainingTime(token?: string): number {
|
||||
const exp = this.getExpiration(token);
|
||||
if (!exp) return 0;
|
||||
|
||||
const expTime = exp * 1000;
|
||||
const remaining = expTime - Date.now();
|
||||
return Math.max(0, remaining);
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化剩余时间为可读字符串
|
||||
* @param ms 毫秒数
|
||||
*/
|
||||
static formatRemainingTime(ms: number): string {
|
||||
if (ms <= 0) return '已过期';
|
||||
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `${days}天 ${hours % 24}小时`;
|
||||
if (hours > 0) return `${hours}小时 ${minutes % 60}分钟`;
|
||||
if (minutes > 0) return `${minutes}分钟 ${seconds % 60}秒`;
|
||||
return `${seconds}秒`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取完整的Token信息摘要
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getTokenInfo(token?: string): TokenInfo {
|
||||
const exp = this.getExpiration(token);
|
||||
const remainingMs = this.getRemainingTime(token);
|
||||
|
||||
return {
|
||||
userId: this.getUserId(token),
|
||||
loginName: this.getLoginName(token),
|
||||
expiration: exp ? new Date(exp * 1000).toLocaleString() : null,
|
||||
isExpired: this.isExpired(token),
|
||||
remainingTime: this.formatRemainingTime(remainingMs)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证Token是否有效（格式正确且未过期）
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static isValid(token?: string): boolean {
|
||||
const tokenData = this.parseToken(token);
|
||||
return tokenData !== null && !this.isExpired(token);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取Token的头部信息
|
||||
* @param token JWT token字符串，可选
|
||||
*/
|
||||
static getHeader(token?: string): any | null {
|
||||
try {
|
||||
let targetToken = token;
|
||||
|
||||
if (!targetToken) {
|
||||
const userStore = useUserStore();
|
||||
targetToken = userStore.accessToken;
|
||||
}
|
||||
|
||||
if (!targetToken) return null;
|
||||
|
||||
const parts = targetToken.split('.');
|
||||
if (parts.length !== 3) return null;
|
||||
|
||||
const header = parts[0];
|
||||
const decodedHeader = this.base64UrlDecode(header);
|
||||
return JSON.parse(decodedHeader);
|
||||
} catch (error) {
|
||||
console.error('解析JWT Header失败:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例方法，方便直接调用
|
||||
export const jwtUtil = JwtUtil;
|
||||
@@ -1,186 +1,703 @@
|
||||
import {ElMessage} from "element-plus";
|
||||
/**
|
||||
* WebSocket客户端服务
|
||||
* 提供WebSocket连接管理、心跳机制、消息处理等功能
|
||||
* 集成JWT token解析，支持自动获取用户登录名
|
||||
*
|
||||
* @author hongawen
|
||||
* @version 2.0
|
||||
*/
|
||||
|
||||
import { ElMessage } from "element-plus";
|
||||
import { jwtUtil } from "./jwtUtil";
|
||||
|
||||
// ============================================================================
|
||||
// 类型定义 (Types & Interfaces)
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* WebSocket消息接口定义（对应后端WebSocketVO结构）
|
||||
*/
|
||||
interface WebSocketMessage<T = any> {
|
||||
type: string; // 消息类型
|
||||
requestId?: string; // 请求ID
|
||||
operateCode?: string; // 操作代码
|
||||
code?: number; // 状态码
|
||||
desc?: string; // 描述信息
|
||||
data?: T; // 泛型数据
|
||||
}
|
||||
|
||||
/**
|
||||
* 回调函数类型定义
|
||||
*/
|
||||
type CallbackFunction<T = any> = (message: WebSocketMessage<T>) => void;
|
||||
|
||||
/**
|
||||
* WebSocket配置接口
|
||||
*/
|
||||
interface SocketConfig {
|
||||
url: string; // WebSocket服务器地址
|
||||
heartbeatInterval?: number; // 心跳间隔时间(ms)
|
||||
reconnectDelay?: number; // 重连延迟时间(ms)
|
||||
maxReconnectAttempts?: number; // 最大重连次数
|
||||
timeout?: number; // 超时时间(ms)
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接状态枚举
|
||||
*/
|
||||
enum ConnectionStatus {
|
||||
DISCONNECTED = 'disconnected', // 未连接
|
||||
CONNECTING = 'connecting', // 连接中
|
||||
CONNECTED = 'connected', // 已连接
|
||||
RECONNECTING = 'reconnecting', // 重连中
|
||||
ERROR = 'error' // 连接错误
|
||||
}
|
||||
|
||||
/**
|
||||
* 常用的WebSocket消息类型定义命名空间
|
||||
*/
|
||||
namespace WebSocketMessageTypes {
|
||||
/**
|
||||
* 预检测相关消息
|
||||
*/
|
||||
export interface PreTestMessage {
|
||||
deviceId?: string;
|
||||
status?: string;
|
||||
progress?: number;
|
||||
errorInfo?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 系数校准相关消息
|
||||
*/
|
||||
export interface CoefficientMessage {
|
||||
deviceId: string;
|
||||
channel: number;
|
||||
voltage?: string;
|
||||
current?: string;
|
||||
calibrationResult?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 正式检测相关消息
|
||||
*/
|
||||
export interface TestMessage {
|
||||
deviceId: string;
|
||||
testType: string;
|
||||
testResult?: 'success' | 'failed' | 'processing';
|
||||
testData?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用响应消息
|
||||
*/
|
||||
export interface CommonResponse {
|
||||
success: boolean;
|
||||
message?: string;
|
||||
timestamp?: number;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 导出类型
|
||||
// ============================================================================
|
||||
|
||||
export type {
|
||||
WebSocketMessage,
|
||||
CallbackFunction,
|
||||
SocketConfig,
|
||||
WebSocketMessageTypes
|
||||
};
|
||||
|
||||
export {
|
||||
ConnectionStatus
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 主要服务类
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* WebSocket服务类
|
||||
* 单例模式实现，提供完整的WebSocket连接管理功能
|
||||
*/
|
||||
export default class SocketService {
|
||||
static instance = null;
|
||||
static get Instance() {
|
||||
// ========================================================================
|
||||
// 静态属性和方法 (Static)
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 单例实例
|
||||
*/
|
||||
private static instance: SocketService | null = null;
|
||||
|
||||
/**
|
||||
* 获取单例实例
|
||||
* @returns SocketService实例
|
||||
*/
|
||||
static get Instance(): SocketService {
|
||||
if (!this.instance) {
|
||||
this.instance = new SocketService();
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
// 和服务端连接的socket对象
|
||||
ws = null;
|
||||
// 存储回调函数
|
||||
callBackMapping = {};
|
||||
// 标识是否连接成功
|
||||
connected = false;
|
||||
// 记录重试的次数
|
||||
sendRetryCount = 0;
|
||||
// 重新连接尝试的次数
|
||||
connectRetryCount = 0;
|
||||
work:any;
|
||||
workerBlobUrl:any;
|
||||
lastActivityTime= 0; // 上次活动时间戳
|
||||
lastResponseHeartTime = Date.now();//最后一次收到心跳回复时间
|
||||
|
||||
reconnectDelay= 5000; // 重新连接延迟，单位毫秒
|
||||
// ========================================================================
|
||||
// 实例属性 (Properties)
|
||||
// ========================================================================
|
||||
|
||||
// 定义连接服务器的方法
|
||||
connect() {
|
||||
/**
|
||||
* WebSocket连接实例
|
||||
*/
|
||||
private ws: WebSocket | null = null;
|
||||
|
||||
/**
|
||||
* 消息回调函数映射表
|
||||
*/
|
||||
private callBackMapping: Record<string, CallbackFunction<any>> = {};
|
||||
|
||||
/**
|
||||
* 当前连接状态
|
||||
*/
|
||||
private connectionStatus: ConnectionStatus = ConnectionStatus.DISCONNECTED;
|
||||
|
||||
/**
|
||||
* 发送消息重试计数器
|
||||
*/
|
||||
private sendRetryCount: number = 0;
|
||||
|
||||
/**
|
||||
* 连接重试计数器
|
||||
*/
|
||||
private connectRetryCount: number = 0;
|
||||
|
||||
/**
|
||||
* 心跳Worker实例
|
||||
*/
|
||||
private heartbeatWorker: Worker | null = null;
|
||||
|
||||
/**
|
||||
* Worker脚本的Blob URL
|
||||
*/
|
||||
private workerBlobUrl: string | null = null;
|
||||
|
||||
/**
|
||||
* 最后一次收到心跳响应的时间戳
|
||||
*/
|
||||
private lastResponseHeartTime: number = Date.now();
|
||||
|
||||
/**
|
||||
* WebSocket连接配置
|
||||
*/
|
||||
private config: SocketConfig = {
|
||||
url: 'ws://127.0.0.1:7777/hello',
|
||||
heartbeatInterval: 9000, // 9秒心跳间隔
|
||||
reconnectDelay: 5000, // 5秒重连延迟
|
||||
maxReconnectAttempts: 5, // 最多重连5次
|
||||
timeout: 30000 // 30秒超时
|
||||
};
|
||||
|
||||
// 连接服务器
|
||||
// ========================================================================
|
||||
// 构造函数 (Constructor)
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 私有构造函数，防止外部直接实例化
|
||||
*/
|
||||
private constructor() {
|
||||
this.initializeProperties();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化属性
|
||||
*/
|
||||
private initializeProperties(): void {
|
||||
this.lastResponseHeartTime = Date.now();
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Getter属性 (Computed)
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 获取连接状态
|
||||
* @returns 是否已连接
|
||||
*/
|
||||
get connected(): boolean {
|
||||
return this.connectionStatus === ConnectionStatus.CONNECTED;
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// 公共方法 (Public Methods)
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 配置WebSocket连接参数
|
||||
* @param config 部分配置对象
|
||||
*/
|
||||
public configure(config: Partial<SocketConfig>): void {
|
||||
this.config = { ...this.config, ...config };
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接WebSocket服务器（同步方式，保持向后兼容）
|
||||
*/
|
||||
public connect(): Promise<void> | void {
|
||||
// 检查浏览器支持
|
||||
if (!window.WebSocket) {
|
||||
return console.log('您的浏览器不支持WebSocket');
|
||||
console.log('您的浏览器不支持WebSocket');
|
||||
return;
|
||||
}
|
||||
|
||||
// let token = $.cookie('123');
|
||||
// let token = '4E6EF539AAF119D82AC4C2BC84FBA21F';
|
||||
// 防止重复连接
|
||||
if (this.connectionStatus === ConnectionStatus.CONNECTING || this.connected) {
|
||||
console.warn('WebSocket已连接或正在连接中');
|
||||
return;
|
||||
}
|
||||
|
||||
this.connectionStatus = ConnectionStatus.CONNECTING;
|
||||
|
||||
try {
|
||||
this.ws = new WebSocket(this.buildWebSocketUrl());
|
||||
this.setupEventHandlersLegacy();
|
||||
} catch (error) {
|
||||
this.connectionStatus = ConnectionStatus.ERROR;
|
||||
console.error('WebSocket连接失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 异步连接WebSocket服务器
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
public connectAsync(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 检查浏览器支持
|
||||
if (!window.WebSocket) {
|
||||
const error = '您的浏览器不支持WebSocket';
|
||||
console.error(error);
|
||||
reject(new Error(error));
|
||||
return;
|
||||
}
|
||||
|
||||
// 防止重复连接
|
||||
if (this.connectionStatus === ConnectionStatus.CONNECTING || this.connected) {
|
||||
console.warn('WebSocket已连接或正在连接中');
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
this.connectionStatus = ConnectionStatus.CONNECTING;
|
||||
|
||||
try {
|
||||
this.ws = new WebSocket(this.buildWebSocketUrl());
|
||||
this.setupEventHandlers(resolve, reject);
|
||||
} catch (error) {
|
||||
this.connectionStatus = ConnectionStatus.ERROR;
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册消息回调函数（支持泛型）
|
||||
* @param messageType 消息类型
|
||||
* @param callback 回调函数
|
||||
*/
|
||||
public registerCallBack<T = any>(messageType: string, callback: CallbackFunction<T>): void {
|
||||
if (!messageType || typeof callback !== 'function') {
|
||||
console.error('注册回调函数参数无效');
|
||||
return;
|
||||
}
|
||||
this.callBackMapping[messageType] = callback;
|
||||
console.log(`注册消息处理器: ${messageType}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 注销消息回调函数
|
||||
* @param messageType 消息类型
|
||||
*/
|
||||
public unRegisterCallBack(messageType: string): void {
|
||||
if (this.callBackMapping[messageType]) {
|
||||
delete this.callBackMapping[messageType];
|
||||
console.log(`注销消息处理器: ${messageType}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送数据到WebSocket服务器
|
||||
* @param data 要发送的数据
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
public send(data: any): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.connected || !this.ws) {
|
||||
// 未连接时的重试机制
|
||||
if (this.sendRetryCount < 3) {
|
||||
this.sendRetryCount++;
|
||||
setTimeout(() => {
|
||||
this.send(data).then(resolve).catch(reject);
|
||||
}, this.sendRetryCount * 500);
|
||||
return;
|
||||
} else {
|
||||
reject(new Error('WebSocket未连接且重试失败'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
// 重置重试计数
|
||||
this.sendRetryCount = 0;
|
||||
|
||||
// 尝试发送JSON数据，失败则发送原始数据
|
||||
const message = typeof data === 'string' ? data : JSON.stringify(data);
|
||||
this.ws.send(message);
|
||||
|
||||
console.log('发送消息:', message);
|
||||
resolve();
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭WebSocket连接
|
||||
*/
|
||||
public closeWs(): void {
|
||||
console.log('正在关闭WebSocket连接...');
|
||||
|
||||
// 清理心跳
|
||||
this.clearHeartbeat();
|
||||
|
||||
// 关闭连接
|
||||
if (this.ws) {
|
||||
this.ws.close(1000, '主动关闭连接');
|
||||
this.ws = null;
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
this.connectionStatus = ConnectionStatus.DISCONNECTED;
|
||||
this.connectRetryCount = 0;
|
||||
this.sendRetryCount = 0;
|
||||
|
||||
console.log('WebSocket连接已关闭');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前连接状态
|
||||
* @returns 连接状态枚举值
|
||||
*/
|
||||
public getConnectionStatus(): ConnectionStatus {
|
||||
return this.connectionStatus;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取连接统计信息
|
||||
* @returns 连接统计对象
|
||||
*/
|
||||
public getConnectionStats(): {
|
||||
status: ConnectionStatus;
|
||||
connectRetryCount: number;
|
||||
lastResponseHeartTime: number;
|
||||
} {
|
||||
return {
|
||||
status: this.connectionStatus,
|
||||
connectRetryCount: this.connectRetryCount,
|
||||
lastResponseHeartTime: this.lastResponseHeartTime
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
const url = 'ws://127.0.0.1:7777/hello?name=cdf'
|
||||
//const url = 'ws://192.168.1.124:7777/hello?name=cdf'
|
||||
this.ws = new WebSocket(url);
|
||||
// 连接成功的事件
|
||||
=======
|
||||
// ========================================================================
|
||||
// 私有方法 (Private Methods)
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 构建完整的WebSocket URL
|
||||
* 自动从JWT token中获取loginName作为name参数
|
||||
* @returns 完整的WebSocket URL
|
||||
*/
|
||||
private buildWebSocketUrl(): string {
|
||||
const { url } = this.config;
|
||||
|
||||
// 直接从JWT token中获取loginName作为name参数
|
||||
const loginName = jwtUtil.getLoginName();
|
||||
|
||||
if (loginName) {
|
||||
const separator = url.includes('?') ? '&' : '?';
|
||||
return `${url}${separator}name=${encodeURIComponent(loginName)}`;
|
||||
}
|
||||
|
||||
// 如果无法获取loginName，返回原始URL并输出警告
|
||||
console.warn('无法从JWT token中获取loginName，WebSocket连接可能会失败');
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置WebSocket事件处理器（异步版本）
|
||||
* @param resolve Promise resolve回调
|
||||
* @param reject Promise reject回调
|
||||
*/
|
||||
private setupEventHandlers(resolve: () => void, reject: (error: Error) => void): void {
|
||||
if (!this.ws) return;
|
||||
|
||||
// 连接成功事件
|
||||
this.ws.onopen = () => {
|
||||
ElMessage.success("WebSocket连接服务端成功");
|
||||
console.log('WebSocket连接成功');
|
||||
this.connectionStatus = ConnectionStatus.CONNECTED;
|
||||
this.connectRetryCount = 0;
|
||||
this.startHeartbeat();
|
||||
resolve();
|
||||
};
|
||||
|
||||
// 连接关闭事件
|
||||
this.ws.onclose = (event: CloseEvent) => {
|
||||
console.log('WebSocket连接关闭', event.code, event.reason);
|
||||
this.connectionStatus = ConnectionStatus.DISCONNECTED;
|
||||
this.clearHeartbeat();
|
||||
|
||||
// 非正常关闭且未超过最大重连次数，尝试重连
|
||||
if (event.code !== 1000 && this.connectRetryCount < this.config.maxReconnectAttempts!) {
|
||||
this.attemptReconnect();
|
||||
}
|
||||
};
|
||||
|
||||
// 连接错误事件
|
||||
this.ws.onerror = (error: Event) => {
|
||||
console.error('WebSocket连接错误:', error);
|
||||
ElMessage.error("WebSocket连接异常");
|
||||
this.connectionStatus = ConnectionStatus.ERROR;
|
||||
reject(new Error('WebSocket连接失败'));
|
||||
};
|
||||
|
||||
// 消息接收事件
|
||||
this.ws.onmessage = (event: MessageEvent) => {
|
||||
this.handleMessage(event);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置WebSocket事件处理器（兼容版本）
|
||||
*/
|
||||
private setupEventHandlersLegacy(): void {
|
||||
if (!this.ws) return;
|
||||
|
||||
// 连接成功事件
|
||||
>>>>>>> d6d63523a3b094a6b60ea32f7779cb3888d13923
|
||||
this.ws.onopen = () => {
|
||||
ElMessage.success("webSocket连接服务端成功了");
|
||||
console.log('连接服务端成功了');
|
||||
this.connected = true;
|
||||
// 重置重新连接的次数
|
||||
this.connectionStatus = ConnectionStatus.CONNECTED;
|
||||
this.connectRetryCount = 0;
|
||||
this.updateLastActivityTime();
|
||||
this.startHeartbeat();
|
||||
};
|
||||
// 1.连接服务端失败
|
||||
// 2.当连接成功之后, 服务器关闭的情况
|
||||
this.ws.onclose = () => {
|
||||
|
||||
// 连接关闭事件
|
||||
this.ws.onclose = (event: CloseEvent) => {
|
||||
console.log('连接webSocket服务端关闭');
|
||||
this.connected = false;
|
||||
this.connectRetryCount++;
|
||||
this.connectionStatus = ConnectionStatus.DISCONNECTED;
|
||||
this.clearHeartbeat();
|
||||
/* setTimeout(() => {
|
||||
|
||||
// 保持原有的重连逻辑（被注释掉的）
|
||||
// this.connectRetryCount++;
|
||||
/* setTimeout(() => {
|
||||
this.connect();
|
||||
}, 500 * this.connectRetryCount);*/
|
||||
|
||||
|
||||
};
|
||||
|
||||
// 连接错误事件
|
||||
this.ws.onerror = () => {
|
||||
ElMessage.error("webSocket连接异常！");
|
||||
|
||||
|
||||
this.connectionStatus = ConnectionStatus.ERROR;
|
||||
};
|
||||
|
||||
// 消息接收事件
|
||||
this.ws.onmessage = (event: MessageEvent) => {
|
||||
this.handleMessage(event);
|
||||
};
|
||||
}
|
||||
|
||||
// 得到服务端发送过来的数据
|
||||
this.ws.onmessage = (event) => {
|
||||
// console.log('🚀 ~ SocketService ~ connect ~ event:', event)
|
||||
if(event.data == 'over') {
|
||||
//心跳消息处理
|
||||
this.lastResponseHeartTime = Date.now();
|
||||
this.updateLastActivityTime(); // 收到心跳响应时更新活动时间
|
||||
}else {
|
||||
let message: { [key: string]: any };
|
||||
try {
|
||||
console.log('Received message:',event.data)
|
||||
message = JSON.parse(event.data);
|
||||
} catch (e) {
|
||||
return console.error("消息解析失败", event.data, e);
|
||||
}
|
||||
/**
|
||||
* 处理接收到的消息
|
||||
* 支持心跳响应、JSON消息和普通文本消息
|
||||
* @param event WebSocket消息事件
|
||||
*/
|
||||
private handleMessage(event: MessageEvent): void {
|
||||
// console.log('Received message:', event.data);
|
||||
|
||||
// 心跳响应处理
|
||||
if (event.data === 'over') {
|
||||
console.log(`${new Date().toLocaleTimeString()} - 收到心跳响应`);
|
||||
this.lastResponseHeartTime = Date.now();
|
||||
return;
|
||||
}
|
||||
|
||||
/* 通过接受服务端发送的type字段来回调函数 */
|
||||
// 检查消息是否为空或无效
|
||||
if (!event.data || event.data.trim() === '') {
|
||||
console.warn('收到空消息，跳过处理');
|
||||
return;
|
||||
}
|
||||
|
||||
// 业务消息处理
|
||||
try {
|
||||
// 检查是否为JSON格式
|
||||
if (typeof event.data === 'string' && (event.data.startsWith('{') || event.data.startsWith('['))) {
|
||||
const message: WebSocketMessage = JSON.parse(event.data);
|
||||
if (message?.type && this.callBackMapping[message.type]) {
|
||||
this.callBackMapping[message.type](message);
|
||||
} else {
|
||||
console.log("抛弃====>")
|
||||
console.log(event.data)
|
||||
/* 丢弃或继续写你的逻辑 */
|
||||
console.warn('未找到对应的消息处理器:', message.type);
|
||||
}
|
||||
} else {
|
||||
// 非JSON格式的消息，作为普通文本处理
|
||||
console.log('收到非JSON格式消息:', event.data);
|
||||
// 可以添加文本消息的处理逻辑
|
||||
if (this.callBackMapping['text']) {
|
||||
this.callBackMapping['text']({
|
||||
type: 'text',
|
||||
data: event.data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
startHeartbeat() {
|
||||
this.lastResponseHeartTime = Date.now();
|
||||
const _this = this
|
||||
_this.workerBlobUrl = window.URL.createObjectURL(new Blob(['(function(e){setInterval(function(){this.postMessage(null)},9000)})()']));
|
||||
|
||||
this.work = new Worker(_this.workerBlobUrl);
|
||||
this.work.onmessage = function(e){
|
||||
//判断多久没收到心跳响应
|
||||
|
||||
if(_this.lastActivityTime - _this.lastResponseHeartTime > 30000){
|
||||
//说明已经三轮心跳没收到回复了，关闭检测，提示用户。
|
||||
ElMessage.error("业务主体模块发生未知异常，请尝试重新启动！");
|
||||
_this.clearHeartbeat();
|
||||
return;
|
||||
}
|
||||
_this.sendHeartbeat();
|
||||
}
|
||||
|
||||
}
|
||||
sendHeartbeat() {
|
||||
console.log(new Date()+"进入心跳消息发送。。。。。。。。。。。。。")
|
||||
this.ws.send('alive');
|
||||
this.updateLastActivityTime(); // 发送心跳后更新活动时间
|
||||
}
|
||||
|
||||
|
||||
updateLastActivityTime() {
|
||||
this.lastActivityTime = Date.now();
|
||||
}
|
||||
|
||||
clearHeartbeat() {
|
||||
const _this = this
|
||||
if (_this.work) {
|
||||
_this.work.terminate();
|
||||
_this.work = null;
|
||||
}
|
||||
if (_this.workerBlobUrl) {
|
||||
window.URL.revokeObjectURL(_this.workerBlobUrl); // 释放临时的Blob URL
|
||||
_this.workerBlobUrl = null;
|
||||
|
||||
} catch (error) {
|
||||
console.error('消息解析失败:', event.data, error);
|
||||
console.error('消息类型:', typeof event.data);
|
||||
console.error('消息长度:', event.data?.length || 0);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// 重连机制相关方法
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 尝试重新连接WebSocket
|
||||
*/
|
||||
private attemptReconnect(): void {
|
||||
if (this.connectionStatus === ConnectionStatus.RECONNECTING) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 回调函数的注册
|
||||
registerCallBack(socketType, callBack) {
|
||||
this.callBackMapping[socketType] = callBack;
|
||||
}
|
||||
// 取消某一个回调函数
|
||||
unRegisterCallBack(socketType) {
|
||||
this.callBackMapping[socketType] = null;
|
||||
}
|
||||
// 发送数据的方法
|
||||
send(data) {
|
||||
// 判断此时此刻有没有连接成功
|
||||
if (this.connected) {
|
||||
this.sendRetryCount = 0;
|
||||
this.connectionStatus = ConnectionStatus.RECONNECTING;
|
||||
this.connectRetryCount++;
|
||||
|
||||
const delay = this.config.reconnectDelay! * this.connectRetryCount;
|
||||
|
||||
console.log(`尝试第${this.connectRetryCount}次重连，${delay}ms后开始...`);
|
||||
|
||||
setTimeout(() => {
|
||||
try {
|
||||
this.ws.send(JSON.stringify(data));
|
||||
} catch (e) {
|
||||
this.ws.send(data);
|
||||
const result = this.connect();
|
||||
if (result instanceof Promise) {
|
||||
result.catch((error: any) => {
|
||||
console.error('重连失败:', error);
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('重连失败:', error);
|
||||
}
|
||||
} else {
|
||||
this.sendRetryCount++;
|
||||
setTimeout(() => {
|
||||
this.send(data);
|
||||
}, this.sendRetryCount * 500);
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// 心跳机制相关方法
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 启动心跳机制
|
||||
*/
|
||||
private startHeartbeat(): void {
|
||||
this.lastResponseHeartTime = Date.now();
|
||||
this.createHeartbeatWorker();
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建心跳Worker
|
||||
* 使用Worker在独立线程中处理心跳定时器，避免主线程阻塞
|
||||
*/
|
||||
private createHeartbeatWorker(): void {
|
||||
try {
|
||||
// 创建Worker脚本
|
||||
const workerScript = `
|
||||
setInterval(function() {
|
||||
postMessage('heartbeat');
|
||||
}, ${this.config.heartbeatInterval});
|
||||
`;
|
||||
|
||||
this.workerBlobUrl = window.URL.createObjectURL(
|
||||
new Blob([workerScript], { type: 'application/javascript' })
|
||||
);
|
||||
|
||||
this.heartbeatWorker = new Worker(this.workerBlobUrl);
|
||||
|
||||
// 心跳Worker消息处理
|
||||
this.heartbeatWorker.onmessage = (event: MessageEvent) => {
|
||||
this.handleHeartbeatTick();
|
||||
};
|
||||
|
||||
// Worker错误处理
|
||||
this.heartbeatWorker.onerror = (error: ErrorEvent) => {
|
||||
console.error('心跳Worker错误:', error);
|
||||
this.clearHeartbeat();
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('创建心跳Worker失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 断开方法
|
||||
closeWs() {
|
||||
if (this.connected) {
|
||||
this.ws.close()
|
||||
/**
|
||||
* 处理心跳定时器事件
|
||||
* 检查连接超时并发送心跳消息
|
||||
*/
|
||||
private handleHeartbeatTick(): void {
|
||||
// 检查是否超时（距离上次收到心跳响应的时间）
|
||||
const timeSinceLastResponse = Date.now() - this.lastResponseHeartTime;
|
||||
|
||||
if (timeSinceLastResponse > this.config.timeout!) {
|
||||
console.error(`WebSocket心跳超时: ${timeSinceLastResponse}ms > ${this.config.timeout}ms`);
|
||||
ElMessage.error("WebSocket连接超时，请检查网络连接！");
|
||||
this.clearHeartbeat();
|
||||
this.closeWs();
|
||||
return;
|
||||
}
|
||||
console.log('执行WS关闭命令..');
|
||||
|
||||
this.sendHeartbeat();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送心跳消息到服务器
|
||||
*/
|
||||
private sendHeartbeat(): void {
|
||||
if (this.connected && this.ws) {
|
||||
console.log(`${new Date().toLocaleTimeString()} - 发送心跳消息`);
|
||||
this.ws.send('alive');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理心跳机制
|
||||
* 终止Worker并清理相关资源
|
||||
*/
|
||||
private clearHeartbeat(): void {
|
||||
if (this.heartbeatWorker) {
|
||||
this.heartbeatWorker.terminate();
|
||||
this.heartbeatWorker = null;
|
||||
}
|
||||
|
||||
if (this.workerBlobUrl) {
|
||||
window.URL.revokeObjectURL(this.workerBlobUrl);
|
||||
this.workerBlobUrl = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -199,7 +199,6 @@ const handleSubmitFast = () => {
|
||||
if (preTestStatus.value == 'waiting') {
|
||||
if (checkStore.selectTestItems.preTest) {
|
||||
startPreTest({
|
||||
userPageId: "cdf",
|
||||
devIds: deviceIds,
|
||||
planId: planId,
|
||||
operateType: checkStore.reCheckType == 1 ? '1' : '2',
|
||||
@@ -227,7 +226,6 @@ const handleSubmitFast = () => {
|
||||
if (channelsTestStatus.value == 'waiting') {
|
||||
if (!checkStore.selectTestItems.preTest && checkStore.selectTestItems.channelsTest) {
|
||||
startPreTest({
|
||||
userPageId: "cdf",
|
||||
devIds: deviceIds,
|
||||
planId: planId,
|
||||
operateType: checkStore.reCheckType == 1 ? '1' : '2',
|
||||
@@ -253,7 +251,6 @@ const handleSubmitFast = () => {
|
||||
if (TestStatus.value == "waiting") {
|
||||
if (!checkStore.selectTestItems.preTest && !checkStore.selectTestItems.channelsTest && checkStore.selectTestItems.test) {
|
||||
startPreTest({
|
||||
userPageId: "cdf",
|
||||
devIds: deviceIds,
|
||||
planId: planId,
|
||||
operateType: checkStore.reCheckType == 1 ? '1' : '2',
|
||||
@@ -392,7 +389,6 @@ const sendResume = () => {
|
||||
const sendReCheck = () => {
|
||||
console.log('发送重新检测指令')
|
||||
startPreTest({
|
||||
userPageId: "cdf",
|
||||
devIds: checkStore.devices.map((item) => item.deviceId),
|
||||
planId: checkStore.plan.id,
|
||||
operateType: '2', // 0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
|
||||
|
||||
Reference in New Issue
Block a user