webssh2-frontend-fixed
v1.1.0
Published
WebSSH2 前端终端库 - 修复版本，完全兼容原项目后端，解决终端显示乱码问题
Maintainers
seasongold4Readme
WebSSH2 前端库 - 修复版本
🎯 修复版本说明
这是WebSSH2前端库的修复版本，专门解决了以下问题：
- ✅ 解决终端显示乱码问题 - 不再显示 "wwwwwwwwwwww" 等乱码
- ✅ 完全兼容原项目后端 - 100%兼容WebSSH2原项目
- ✅ 保留所有原功能 - 日志记录、重认证、凭据重放等
- ✅ 界面完全一致 - 与原项目UI完全相同
- ✅ 稳定可靠 - 移除了所有不兼容的代码
📦 安装
npm install webssh2-frontend-fixed🚀 快速开始
基本使用
<!DOCTYPE html>
<html>
<head>
<title>WebSSH客户端</title>
<!-- 添加FontAwesome支持 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div id="terminal" style="height: 600px;"></div>
<script src="node_modules/webssh2-frontend-fixed/dist/webssh2-frontend.js"></script>
<script>
const client = new WebSSHClient('terminal', {
socketUrl: 'http://localhost:2222',
socketPath: '/ssh/socket.io',
onConnected: () => console.log('连接成功'),
onError: (err) => console.error('错误:', err)
});
client.connect();
</script>
</body>
</html>高级使用
import { WebSSHClient } from 'webssh2-frontend-fixed';
const client = new WebSSHClient('terminal-container', {
socketUrl: 'http://your-server:2222',
socketPath: '/ssh/socket.io',
// 事件回调
onConnected: () => {
console.log('SSH连接已建立');
},
onDisconnected: () => {
console.log('SSH连接已断开');
},
onError: (error) => {
console.error('连接错误:', error);
},
onData: (data) => {
console.log('接收数据:', data);
}
});
// 连接
client.connect();
// 断开
client.disconnect();
// 销毁
client.destroy();🔗 与WebSSH2后端集成
方式一：直接连接（推荐）
前端库现在会自动连接到WebSSH2后端，无需额外配置。
方式二：预先建立会话
如果需要，可以先通过浏览器访问WebSSH2的SSH连接URL：
http://localhost:2222/ssh/host/192.168.1.100?username=root&password=yourpassword然后在前端库中连接即可。
🔧 API 文档
WebSSHClient
构造函数
new WebSSHClient(container: HTMLElement | string, config: WebSSHClientConfig)配置选项
interface WebSSHClientConfig {
socketUrl: string; // WebSocket服务器地址
socketPath?: string; // Socket路径，默认 '/ssh/socket.io'
// 事件回调
onConnected?: () => void;
onDisconnected?: () => void;
onError?: (error: string) => void;
onData?: (data: string) => void;
}方法
connect()- 连接到SSH服务器disconnect()- 断开连接destroy()- 销毁组件
🎨 功能特性
完整的WebSSH界面
- 📱 响应式设计
- 🎨 与原项目完全一致的UI
- 📋 底部菜单栏（日志、下载等功能）
- 📊 实时状态显示
终端功能
- 🖥️ 完整的终端模拟
- 📝 日志记录和下载
- 🔄 自动重连
- 🔧 窗口大小自适应
安全功能
- 🔐 重新认证支持
- 🔑 凭据重放功能
- ⏰ 安全关机倒计时
📁 示例文件
项目包含完整的示例文件：
examples/final-fixed-example.html- 完整的修复示例examples/complete-webssh-usage.html- 完整功能演示examples/frontend-usage.html- 基础使用示例
🔄 从旧版本迁移
如果你之前使用的是有问题的版本，只需要：
- 卸载旧版本：
npm uninstall webssh2-frontend- 安装修复版本：
npm install webssh2-frontend-fixed- 更新引用：
// 旧版本
import { WebSSHClient } from 'webssh2-frontend';
// 修复版本
import { WebSSHClient } from 'webssh2-frontend-fixed';🐛 问题修复
主要修复内容
移除错误的连接事件
- 删除了不兼容的
ssh-connect事件 - 采用与原项目100%兼容的连接方式
- 删除了不兼容的
完全仿照原项目实现
- UI结构与原项目完全一致
- 事件处理与原项目完全一致
- CSS样式与原项目完全一致
解决终端显示问题
- 修复了终端显示乱码的根本原因
- 确保终端内容正常显示
💡 使用提示
- FontAwesome图标 - 确保页面加载了FontAwesome图标库
- 后端兼容性 - 完全兼容WebSSH2原项目后端
- 浏览器支持 - 支持所有现代浏览器
- 响应式设计 - 自动适应不同屏幕尺寸
📄 许可证
MIT License
🤝 贡献
欢迎提交Issue和Pull Request！
📞 技术支持
如果遇到问题，请检查：
- 后端服务是否正常运行
- Socket.IO地址和路径是否正确
- 浏览器控制台是否有错误信息
- FontAwesome图标库是否正确加载
注意：这是WebSSH2前端库的修复版本，专门解决了终端显示乱码等问题，与原项目100%兼容。