@seasongold4/webssh2-frontend-fixed
Version:
WebSSH2 前端终端库 - 修复版本，完全兼容原项目后端，解决终端显示乱码问题
219 lines (163 loc) • 5.61 kB
Markdown
# WebSSH2 前端库 - 修复版本
[](https://badge.fury.io/js/webssh2-frontend-fixed)
[](https://opensource.org/licenses/MIT)
## 🎯 修复版本说明
这是WebSSH2前端库的修复版本，专门解决了以下问题：
- ✅ **解决终端显示乱码问题** - 不再显示 "wwwwwwwwwwww" 等乱码
- ✅ **完全兼容原项目后端** - 100%兼容WebSSH2原项目
- ✅ **保留所有原功能** - 日志记录、重认证、凭据重放等
- ✅ **界面完全一致** - 与原项目UI完全相同
- ✅ **稳定可靠** - 移除了所有不兼容的代码
## 📦 安装
```bash
npm install webssh2-frontend-fixed
```
## 🚀 快速开始
### 基本使用
```html
<!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>
```
### 高级使用
```javascript
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
#### 构造函数
```typescript
new WebSSHClient(container: HTMLElement | string, config: WebSSHClientConfig)
```
#### 配置选项
```typescript
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` - 基础使用示例
## 🔄 从旧版本迁移
如果你之前使用的是有问题的版本，只需要：
1. 卸载旧版本：
```bash
npm uninstall webssh2-frontend
```
2. 安装修复版本：
```bash
npm install webssh2-frontend-fixed
```
3. 更新引用：
```javascript
// 旧版本
import { WebSSHClient } from 'webssh2-frontend';
// 修复版本
import { WebSSHClient } from 'webssh2-frontend-fixed';
```
## 🐛 问题修复
### 主要修复内容
1. **移除错误的连接事件**
- 删除了不兼容的 `ssh-connect` 事件
- 采用与原项目100%兼容的连接方式
2. **完全仿照原项目实现**
- UI结构与原项目完全一致
- 事件处理与原项目完全一致
- CSS样式与原项目完全一致
3. **解决终端显示问题**
- 修复了终端显示乱码的根本原因
- 确保终端内容正常显示
## 💡 使用提示
1. **FontAwesome图标** - 确保页面加载了FontAwesome图标库
2. **后端兼容性** - 完全兼容WebSSH2原项目后端
3. **浏览器支持** - 支持所有现代浏览器
4. **响应式设计** - 自动适应不同屏幕尺寸
## 📄 许可证
MIT License
## 🤝 贡献
欢迎提交Issue和Pull Request！
## 📞 技术支持
如果遇到问题，请检查：
1. 后端服务是否正常运行
2. Socket.IO地址和路径是否正确
3. 浏览器控制台是否有错误信息
4. FontAwesome图标库是否正确加载
---
**注意：这是WebSSH2前端库的修复版本，专门解决了终端显示乱码等问题，与原项目100%兼容。**