webssh2-frontend
Version:
WebSSH2 前端终端库 - 可与任何后端集成
188 lines (159 loc) • 4.45 kB
Markdown
# WebSSH2 Frontend
一个基于xterm.js的WebSSH前端库，可以与任何后端（如Java Spring Boot）集成。
## 安装
```bash
npm install webssh2-frontend
```
## 使用方法
### 1. 在Vue项目中使用
```vue
<template>
<div>
<div id="ssh-terminal" style="height: 600px;"></div>
</div>
</template>
<script>
import { WebSSHTerminal } from 'webssh2-frontend';
export default {
name: 'WebSSH',
data() {
return {
terminal: null
}
},
mounted() {
this.initTerminal();
},
beforeDestroy() {
if (this.terminal) {
this.terminal.destroy();
}
},
methods: {
initTerminal() {
const config = {
// 连接配置
socketUrl: 'http://localhost:9092',
socketPath: '/socket.io',
// SSH连接参数
host: 'your-ssh-host',
port: 22,
username: 'your-username',
password: 'your-password',
// 终端配置
terminal: {
fontSize: 14,
cursorBlink: true,
scrollback: 1000,
theme: {
background: '#1e1e1e',
foreground: '#d4d4d4',
cursor: '#ffffff'
}
},
// UI配置
ui: {
headerText: 'SSH终端',
headerBackground: '#2c3e50',
showReconnectButton: true
},
// 事件回调
onConnected: () => {
console.log('SSH连接已建立');
},
onDisconnected: () => {
console.log('SSH连接已断开');
},
onError: (error) => {
console.error('SSH连接错误:', error);
}
};
this.terminal = new WebSSHTerminal('ssh-terminal', config);
this.terminal.connect();
}
}
}
</script>
<style>
#ssh-terminal {
width: 100%;
height: 100%;
background: #1e1e1e;
border-radius: 4px;
overflow: hidden;
}
</style>
```
### 2. 在普通HTML中使用
```html
<html>
<head>
<title>WebSSH Demo</title>
</head>
<body>
<div id="ssh-terminal" style="height: 600px;"></div>
<script src="node_modules/webssh2-frontend/dist/webssh2-frontend.js"></script>
<script>
const terminal = new WebSSHTerminal('ssh-terminal', {
socketUrl: 'http://localhost:9092',
host: 'your-ssh-host',
username: 'your-username',
password: 'your-password'
});
terminal.connect();
</script>
</body>
</html>
```
### 3. 配置说明
#### 基本配置
```typescript
interface WebSSHConfig {
// 连接配置
socketUrl?: string; // WebSocket服务器地址
socketPath?: string; // Socket路径，默认 '/socket.io'
// SSH连接参数
host: string; // SSH主机地址
port?: number; // SSH端口，默认22
username: string; // 用户名
password?: string; // 密码
privateKey?: string; // 私钥内容
// 终端配置
terminal?: {
theme?: any; // 终端主题
fontSize?: number; // 字体大小
fontFamily?: string; // 字体族
cursorBlink?: boolean; // 光标闪烁
scrollback?: number; // 滚动缓冲区大小
cols?: number; // 列数
rows?: number; // 行数
};
// UI配置
ui?: {
headerText?: string; // 头部文字
headerBackground?: string; // 头部背景色
showReconnectButton?: boolean; // 显示重连按钮
};
// 事件回调
onConnected?: () => void;
onDisconnected?: () => void;
onError?: (error: string) => void;
onData?: (data: string) => void;
}
```
### 4. 方法
- `connect()`: 连接到SSH服务器
- `disconnect()`: 断开SSH连接
- `sendData(data: string)`: 发送数据到终端
- `resize()`: 调整终端大小
- `clear()`: 清空终端
- `destroy()`: 销毁终端实例
## 特性
- 🚀 **即插即用**: 所有依赖已内置，无需额外安装CDN资源
- 🎨 **可定制**: 支持主题、字体、UI样式等自定义配置
- 🔒 **安全**: 支持密码和私钥认证
- 📱 **响应式**: 自动适应容器大小变化
- 🔌 **通用**: 可与任何支持Socket.IO的后端集成
## 许可证
MIT