一个基于xterm.js的WebSSH前端库，可以与任何后端（如Java Spring Boot）集成。
npm install webssh2-frontend<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><!DOCTYPE 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>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;
}-
connect(): 连接到SSH服务器 -
disconnect(): 断开SSH连接 -
sendData(data: string): 发送数据到终端 -
resize(): 调整终端大小 -
clear(): 清空终端 -
destroy(): 销毁终端实例
- 🚀 即插即用: 所有依赖已内置，无需额外安装CDN资源
- 🎨 可定制: 支持主题、字体、UI样式等自定义配置
- 🔒 安全: 支持密码和私钥认证
- 📱 响应式: 自动适应容器大小变化
- 🔌 通用: 可与任何支持Socket.IO的后端集成
MIT