@seasongold4/webssh2-frontend-fixed
Version:
WebSSH2 前端终端库 - 修复版本，完全兼容原项目后端，解决终端显示乱码问题
333 lines (300 loc) • 12.2 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>✅ 修复后的 WebSSH 客户端 - 完全兼容原项目</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.config-panel {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.form-row {
display: flex;
gap: 15px;
}
.form-row .form-group {
flex: 1;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
}
.btn:hover {
background: #0056b3;
}
.btn-danger {
background: #dc3545;
}
.btn-danger:hover {
background: #c82333;
}
.btn-success {
background: #28a745;
}
.btn-success:hover {
background: #218838;
}
.terminal-container {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
height: 700px;
}
.success {
background: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.success h3 {
margin-top: 0;
color: #155724;
}
.info {
background: #d1ecf1;
border: 1px solid #bee5eb;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.info h3 {
margin-top: 0;
color: #0c5460;
}
.warning {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.warning h3 {
margin-top: 0;
color: #856404;
}
.code {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 10px;
font-family: monospace;
font-size: 14px;
overflow-x: auto;
}
</style>
<!-- 添加FontAwesome图标支持 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="container">
<h1>✅ 修复后的 WebSSH 客户端示例</h1>
<div class="success">
<h3>🎉 修复完成！</h3>
<ul>
<li><strong>✅ 解决了终端显示乱码问题</strong> - 不再显示 "wwwwwwwwwwww" 等乱码</li>
<li><strong>✅ 完全兼容原项目后端</strong> - 使用相同的事件和协议</li>
<li><strong>✅ 保留所有原功能</strong> - 日志记录、重认证、凭据重放等</li>
<li><strong>✅ 优化了连接方式</strong> - 移除了错误的ssh-connect事件</li>
<li><strong>✅ 100%仿照原项目UI</strong> - 界面和样式完全一致</li>
</ul>
</div>
<div class="info">
<h3>📖 使用说明</h3>
<p><strong>方式一：直接连接（推荐）</strong></p>
<p>前端库现在会自动连接到已建立的SSH会话，只需要填写后端地址即可。</p>
<p><strong>方式二：先建立会话</strong></p>
<p>如果遇到连接问题，可以先通过浏览器访问SSH连接URL建立会话：</p>
<div class="code">http://localhost:2222/ssh/host/你的主机?username=用户名&password=密码</div>
</div>
<div class="warning">
<h3>⚠️ 重要变更</h3>
<ul>
<li>移除了自定义的ssh-connect事件，现在完全兼容原项目</li>
<li>前端库只负责展示和交互，SSH连接由原项目后端处理</li>
<li>这样确保了100%的兼容性和稳定性</li>
</ul>
</div>
<div class="config-panel">
<h2>SSH 连接配置</h2>
<div class="form-row">
<div class="form-group">
<label for="socketUrl">后端Socket.IO地址:</label>
<input type="text" id="socketUrl" value="http://localhost:2222" required>
</div>
<div class="form-group">
<label for="socketPath">Socket路径:</label>
<input type="text" id="socketPath" value="/ssh/socket.io">
</div>
</div>
<div style="margin-top: 20px;">
<button class="btn" onclick="connectSSH()">🔗 连接SSH</button>
<button class="btn btn-danger" onclick="disconnectSSH()">❌ 断开连接</button>
<button class="btn btn-success" onclick="openAuthPage()">🔑 打开认证页面</button>
</div>
</div>
<div class="terminal-container" id="terminalContainer">
<!-- 修复后的WebSSH客户端将在这里显示 -->
</div>
</div>
<!-- 引入修复后的WebSSH前端库 -->
<script src="../dist/webssh2-frontend.js"></script>
<script>
let sshClient = null;
function connectSSH() {
// 如果已经有连接，先断开
if (sshClient) {
sshClient.destroy();
}
// 获取配置
const socketUrl = document.getElementById('socketUrl').value;
const socketPath = document.getElementById('socketPath').value;
// 验证输入
if (!socketUrl) {
alert('请填写后端Socket.IO地址');
return;
}
// 创建修复后的WebSSH客户端配置
const config = {
socketUrl: socketUrl,
socketPath: socketPath,
// 事件回调
onConnected: () => {
console.log('✅ SSH连接已建立');
updateStatus('连接成功', 'success');
},
onDisconnected: () => {
console.log('❌ SSH连接已断开');
updateStatus('连接已断开', 'error');
},
onError: (error) => {
console.error('❌ SSH连接错误:', error);
updateStatus('连接错误: ' + error, 'error');
},
onData: (data) => {
// 数据接收回调
console.log('📨 接收到数据:', data.length, '字节');
}
};
try {
// 创建修复后的WebSSH客户端实例
sshClient = new WebSSHClient('terminalContainer', config);
// 连接SSH
sshClient.connect();
updateStatus('正在连接...', 'warning');
console.log('🚀 开始连接SSH...');
} catch (error) {
console.error('❌ 创建WebSSH客户端失败:', error);
alert('创建WebSSH客户端失败: ' + error.message);
updateStatus('创建失败', 'error');
}
}
function disconnectSSH() {
if (sshClient) {
sshClient.disconnect();
updateStatus('已断开连接', 'info');
console.log('🔌 SSH连接已断开');
} else {
alert('当前没有活动的连接');
}
}
function openAuthPage() {
const socketUrl = document.getElementById('socketUrl').value;
if (!socketUrl) {
alert('请先填写后端地址');
return;
}
// 提示用户输入SSH信息
const host = prompt('请输入SSH主机地址:', '192.168.1.100');
if (!host) return;
const username = prompt('请输入用户名:', 'root');
if (!username) return;
const password = prompt('请输入密码:');
if (!password) return;
// 构建认证URL
const authUrl = `${socketUrl}/ssh/host/${host}?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
// 打开新窗口进行认证
const authWindow = window.open(authUrl, '_blank', 'width=800,height=600');
// 提示用户操作
setTimeout(() => {
if (authWindow && !authWindow.closed) {
alert('✅ 认证页面已打开\n\n请在新窗口中完成SSH认证，然后：\n1. 关闭认证窗口\n2. 回到此页面点击"连接SSH"按钮');
}
}, 1000);
}
function updateStatus(message, type) {
console.log(`📊 状态更新 [${type}]: ${message}`);
// 这里可以添加状态显示逻辑
// 实际的状态会在WebSSH客户端的底部状态栏中显示
}
// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
console.log('🎯 修复后的WebSSH客户端示例页面已加载');
// 检查是否加载了WebSSH客户端库
if (typeof WebSSHClient === 'undefined') {
console.error('❌ WebSSH客户端库未正确加载');
alert('WebSSH客户端库未正确加载，请检查文件路径');
} else {
console.log('✅ WebSSH客户端库已成功加载');
console.log('🔧 修复内容:');
console.log(' - 移除了错误的ssh-connect事件');
console.log(' - 完全兼容原项目的Socket.IO事件');
console.log(' - 修复了终端显示乱码问题');
console.log(' - 保留了所有原功能（日志、重认证等）');
}
});
// 页面卸载时清理资源
window.addEventListener('beforeunload', function() {
if (sshClient) {
console.log('🧹 清理SSH连接资源');
sshClient.destroy();
}
});
// 添加一些调试功能
window.debugSSH = {
getClient: () => sshClient,
connect: connectSSH,
disconnect: disconnectSSH,
status: () => sshClient ? '已连接' : '未连接'
};
console.log('🛠️ 调试工具已加载，使用 window.debugSSH 访问');
</script>
</body>
</html>