401 lines
12 KiB
TypeScript
401 lines
12 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-use-before-define */
|
||
import type { MenuProps } from 'antd';
|
||
import { Button, Dropdown } from 'antd';
|
||
import React, { useEffect, useRef, useState } from 'react';
|
||
// import { RFB } from '@novnc/novnc/core/rfb';
|
||
import RFB from '@/public/novnc/core/rfb';
|
||
|
||
import './index.less';
|
||
|
||
interface VncRemoteDesktopProps {
|
||
vncUrl: string;
|
||
password?: string;
|
||
onConnected?: () => void;
|
||
onDisconnected?: () => void;
|
||
onError?: (error: string) => void;
|
||
loadingText?: string;
|
||
className?: string;
|
||
isFullscreen?: boolean;
|
||
viewOnly?: boolean;
|
||
autoScale?: boolean;
|
||
maxRetries?: number;
|
||
retryInterval?: number;
|
||
}
|
||
|
||
/**
|
||
* 封装的noVNC远程桌面控制组件
|
||
* 使用项目中已安装的@novnc/novnc包
|
||
*/
|
||
const VncRemoteDesktop: React.FC<VncRemoteDesktopProps> = ({
|
||
vncUrl,
|
||
password,
|
||
onConnected,
|
||
onDisconnected,
|
||
onError,
|
||
loadingText = '正在连接远程桌面...',
|
||
className = '',
|
||
viewOnly = false,
|
||
autoScale = true,
|
||
maxRetries = 3,
|
||
retryInterval = 2000,
|
||
}) => {
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const rfbRef = useRef<RFB | null>(null);
|
||
const retryCountRef = useRef(0);
|
||
const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||
const [connectionStatus, setConnectionStatus] = useState<
|
||
'disconnected' | 'connecting' | 'connected'
|
||
>('disconnected');
|
||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||
const [visible, setVisible] = useState(false);
|
||
|
||
// 监听浏览器窗口关闭事件
|
||
useEffect(() => {
|
||
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
|
||
event.preventDefault();
|
||
disconnect();
|
||
return '';
|
||
};
|
||
|
||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||
return () => {
|
||
window.removeEventListener('beforeunload', handleBeforeUnload);
|
||
};
|
||
}, []);
|
||
|
||
// 清除重试定时器
|
||
const clearRetryTimeout = () => {
|
||
if (retryTimeoutRef.current) {
|
||
clearTimeout(retryTimeoutRef.current);
|
||
retryTimeoutRef.current = null;
|
||
}
|
||
};
|
||
|
||
// 连接到VNC服务器
|
||
const connect = (resetRetry = false) => {
|
||
if (!vncUrl || !canvasRef.current) {
|
||
return;
|
||
}
|
||
|
||
// 清除之前的重试定时器
|
||
clearRetryTimeout();
|
||
|
||
// 重置重试计数（如果需要）
|
||
if (resetRetry) {
|
||
retryCountRef.current = 0;
|
||
}
|
||
|
||
// 断开已有连接
|
||
if (rfbRef.current) {
|
||
disconnect();
|
||
}
|
||
|
||
setConnectionStatus('connecting');
|
||
setErrorMessage(null);
|
||
|
||
try {
|
||
// 验证URL格式
|
||
if (!vncUrl.startsWith('ws://') && !vncUrl.startsWith('wss://')) {
|
||
throw new Error('无效的VNC URL格式，请使用ws://或wss://开头');
|
||
}
|
||
|
||
console.log('WebSocket URL=========', vncUrl);
|
||
|
||
console.log('尝试连接到VNC服务器:', vncUrl);
|
||
|
||
// 创建RFB实例
|
||
const rfb = new RFB(canvasRef.current, vncUrl, {
|
||
credentials: password ? { password } : undefined,
|
||
shared: true,
|
||
wsProtocols: ['binary'],
|
||
// focusOnClick: !viewOnly,
|
||
dragViewport: true,
|
||
scaleViewport: true,
|
||
resizeSession: true,
|
||
// viewOnly: viewOnly,
|
||
// background: '#000000',
|
||
});
|
||
|
||
// 保存RFB实例引用，用于后续操作和事件处理
|
||
rfbRef.current = rfb;
|
||
console.log('rfbRef.current=====保存RFB实例引用', rfbRef.current);
|
||
|
||
// 监听连接事件
|
||
rfb.addEventListener('connect', () => {
|
||
console.log('VNC连接成功');
|
||
retryCountRef.current = 0; // 重置重试计数
|
||
setConnectionStatus('connected');
|
||
onConnected?.();
|
||
});
|
||
|
||
// 监听断开连接事件
|
||
rfb.addEventListener('disconnect', () => {
|
||
console.log('VNC连接断开');
|
||
setConnectionStatus('disconnected');
|
||
onDisconnected?.();
|
||
console.log('rfbRef.current=====监听断开连接事件', rfbRef.current);
|
||
});
|
||
|
||
// 监听安全失败事件
|
||
rfb.addEventListener('securityfailure', (e: any) => {
|
||
console.error('VNC安全连接失败:', e.detail);
|
||
setErrorMessage('安全连接失败: ' + e.detail);
|
||
setConnectionStatus('disconnected');
|
||
onError?.('安全连接失败: ' + e.detail);
|
||
console.log('rfbRef.current=====监听安全失败事件', rfbRef.current);
|
||
rfbRef.current = null;
|
||
});
|
||
|
||
// 监听凭证请求事件
|
||
rfb.addEventListener('credentialsrequired', () => {
|
||
console.log('需要凭证');
|
||
if (password && rfbRef.current) {
|
||
rfbRef.current.sendCredentials({ password });
|
||
}
|
||
});
|
||
|
||
// 监听错误事件
|
||
rfb.addEventListener('error', (e: any) => {
|
||
const errorDetail = e.detail || {};
|
||
const errorMsg = errorDetail.message || errorDetail || '未知错误';
|
||
console.error('VNC错误:', errorMsg);
|
||
|
||
// 提供更具体的错误信息
|
||
let userFriendlyError = '';
|
||
if (errorMsg.toString().includes('WebSocket')) {
|
||
userFriendlyError = `WebSocket连接失败: ${errorMsg}\n可能的原因: 服务器不可达、网络问题或防火墙阻止`;
|
||
} else if (errorMsg.toString().includes('401')) {
|
||
userFriendlyError = '认证失败: 用户名或密码错误';
|
||
} else if (errorMsg.toString().includes('403')) {
|
||
userFriendlyError = '权限不足: 您没有访问该远程桌面的权限';
|
||
} else if (errorMsg.toString().includes('timeout')) {
|
||
userFriendlyError = '连接超时: 服务器响应超时，请检查网络连接';
|
||
} else {
|
||
userFriendlyError = `连接错误: ${errorMsg}`;
|
||
}
|
||
|
||
setErrorMessage(userFriendlyError);
|
||
setConnectionStatus('disconnected');
|
||
onError?.(userFriendlyError);
|
||
|
||
// 自动重试连接（如果未达到最大重试次数）
|
||
if (retryCountRef.current < maxRetries) {
|
||
retryCountRef.current++;
|
||
console.log(`尝试重新连接 (${retryCountRef.current}/${maxRetries})`);
|
||
retryTimeoutRef.current = setTimeout(() => {
|
||
connect();
|
||
}, retryInterval);
|
||
}
|
||
});
|
||
console.log('RFB连接配置完成');
|
||
} catch (error) {
|
||
console.error('创建VNC连接失败:', error);
|
||
const errorMsg = error instanceof Error ? error.message : '创建连接失败';
|
||
setErrorMessage(errorMsg);
|
||
setConnectionStatus('disconnected');
|
||
onError?.(errorMsg);
|
||
}
|
||
};
|
||
|
||
// 断开连接
|
||
const disconnect = () => {
|
||
// 清除重试定时器
|
||
clearRetryTimeout();
|
||
|
||
console.log('rfbRef.current=====断开连接', rfbRef);
|
||
console.log('rfbRef.current=====断开连接', rfbRef.current);
|
||
|
||
if (rfbRef.current) {
|
||
try {
|
||
// 确保完全断开连接并释放所有资源
|
||
rfbRef.current.disconnect();
|
||
} catch (error) {
|
||
console.error('Error during disconnect/cleanup:', error);
|
||
}
|
||
}
|
||
|
||
// 重置重试计数
|
||
retryCountRef.current = 0;
|
||
};
|
||
|
||
// 连接
|
||
const reconnect = () => {
|
||
setVisible(true);
|
||
connect(true); // 重置重试计数后连接
|
||
};
|
||
|
||
// 当vncUrl或password变化时重新连接
|
||
useEffect(() => {
|
||
if (vncUrl && visible) {
|
||
connect(true); // 重置重试计数后连接
|
||
}
|
||
|
||
// 组件卸载时断开连接并清理资源
|
||
return () => {
|
||
disconnect();
|
||
clearRetryTimeout();
|
||
};
|
||
}, [visible, vncUrl, password, maxRetries, retryInterval]);
|
||
|
||
// 当autoScale或viewOnly属性变化时更新RFB实例
|
||
useEffect(() => {
|
||
if (rfbRef.current) {
|
||
rfbRef.current.viewOnly = viewOnly;
|
||
rfbRef.current.focusOnClick = !viewOnly;
|
||
rfbRef.current.dragViewport = !viewOnly;
|
||
rfbRef.current.scaleViewport = autoScale;
|
||
rfbRef.current.resizeSession = autoScale;
|
||
}
|
||
}, [viewOnly, autoScale]);
|
||
|
||
const menuItems: MenuProps = {
|
||
items: [
|
||
{
|
||
key: '1',
|
||
label: <div>挂载优化工具</div>,
|
||
// label: (
|
||
// <Button
|
||
// onClick={() => {}}
|
||
// disabled={connectionStatus === 'connecting'}
|
||
// title="挂载优化工具"
|
||
// >
|
||
// 挂载优化工具
|
||
// </Button>
|
||
// ),
|
||
},
|
||
{
|
||
key: '2', // 注意 key 应该唯一
|
||
label: <div>挂载应用软件盘</div>,
|
||
// label: (
|
||
// <Button
|
||
// onClick={() => {}}
|
||
// disabled={connectionStatus === 'connecting'}
|
||
// title="挂载应用软件盘"
|
||
// >
|
||
// 挂载应用软件盘
|
||
// </Button>
|
||
// ),
|
||
},
|
||
{
|
||
key: '3',
|
||
label: <div>挂载应用软件盘</div>,
|
||
// label: (
|
||
// <Button
|
||
// onClick={() => {}}
|
||
// disabled={connectionStatus === 'connecting'}
|
||
// title="挂载应用软件盘"
|
||
// >
|
||
// 挂载应用软件盘
|
||
// </Button>
|
||
// ),
|
||
},
|
||
],
|
||
};
|
||
|
||
return (
|
||
<div className={`vnc-remote-desktop ${className} ${connectionStatus}`}>
|
||
{/* 控制栏 */}
|
||
<div className="vnc-controls">
|
||
<span className={`vnc-status-indicator ${connectionStatus}`}>
|
||
{connectionStatus === 'connecting' && '连接中...'}
|
||
{connectionStatus === 'connected' && '已连接'}
|
||
{connectionStatus === 'disconnected' && '已断开'}
|
||
</span>
|
||
|
||
<div className="vnc-actions">
|
||
{viewOnly && <span className="view-only-indicator">仅查看模式</span>}
|
||
{!(connectionStatus === 'connected') ? (
|
||
<Button
|
||
onClick={reconnect}
|
||
disabled={connectionStatus === 'connecting'}
|
||
title="重新连接"
|
||
>
|
||
连接
|
||
</Button>
|
||
) : (
|
||
<>
|
||
<Button
|
||
onClick={() => {}}
|
||
disabled={!(connectionStatus === 'connected')}
|
||
title="关机"
|
||
>
|
||
关机
|
||
</Button>
|
||
<Button
|
||
onClick={() => {}}
|
||
disabled={!(connectionStatus === 'connected')}
|
||
title="重启"
|
||
>
|
||
重启
|
||
</Button>
|
||
<Dropdown
|
||
menu={menuItems}
|
||
disabled={!(connectionStatus === 'connected')}
|
||
>
|
||
<Button
|
||
onClick={() => {}}
|
||
disabled={!(connectionStatus === 'connected')}
|
||
title="安装模板工具"
|
||
>
|
||
安装模板工具
|
||
</Button>
|
||
</Dropdown>
|
||
|
||
<Button
|
||
onClick={disconnect}
|
||
disabled={!(connectionStatus === 'connected')}
|
||
title="断开连接"
|
||
type="default"
|
||
>
|
||
断开连接
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 远程桌面内容 */}
|
||
<div className="vnc-content">
|
||
{/* 加载状态 */}
|
||
{connectionStatus === 'connecting' && (
|
||
<div className="vnc-loading-overlay">
|
||
<div className="loading-spinner"></div>
|
||
<div>{loadingText}</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 错误状态 */}
|
||
{errorMessage && connectionStatus === 'disconnected' && (
|
||
<div className="vnc-error-overlay">
|
||
<div className="error-icon">❌</div>
|
||
<div className="error-message">{errorMessage}</div>
|
||
<Button className="reconnect-button" onClick={reconnect}>
|
||
重新连接
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* VNC画布,使用canvas远程桌面控制页面无法展示，不要使用 */}
|
||
<div
|
||
ref={canvasRef}
|
||
className="vnc-canvas"
|
||
tabIndex={viewOnly ? -1 : 0}
|
||
style={{
|
||
display: connectionStatus === 'connected' ? 'block' : 'none',
|
||
}}
|
||
/>
|
||
|
||
{/* 未连接时的占位符 */}
|
||
{connectionStatus === 'disconnected' && !errorMessage && (
|
||
<div className="vnc-placeholder">
|
||
<div className="placeholder-icon">🖥️</div>
|
||
<div>等待连接...</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default VncRemoteDesktop;
|