vue-ssh-terminal
Version:
SSH Terminal component based on xterm.js for multiple frontend frameworks
285 lines (236 loc) • 6.09 kB
Markdown
# Vue SSH Terminal
Vue SSH Terminal là một component dựa trên [xterm.js](https://github.com/xtermjs/xterm.js) để sử dụng trong nhiều frontend khác nhau, cho phép kết nối SSH thông qua WebSocket.
## Tính năng
- Kết nối SSH thông qua WebSocket relay
- Không yêu cầu người dùng nhập thông tin SSH
- Chỉ cần truyền vào IP, username và password thông qua props
- Hỗ trợ nhiều framework: Vue 2, Vue 3, và Web Component
- Tùy chỉnh giao diện terminal (font, theme, cursor)
- Tự động resize terminal khi thay đổi kích thước cửa sổ
## Cài đặt
```bash
npm install vue-ssh-terminal
```
## Sử dụng
### Vue 3
```vue
<template>
<div class="terminal-container">
<SSHTerminal
:host="host"
:username="username"
:password="password"
:options="options"
@ready="onTerminalReady"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { Vue3SSHTerminal as SSHTerminal } from 'vue-ssh-terminal';
import 'vue-ssh-terminal/dist/ssh-terminal.css';
const host = ref('42.96.22.182');
const username = ref('root');
const password = ref('ABC@123');
const options = ref({
fontSize: 14,
theme: {
background: '#1e1e1e',
foreground: '#f0f0f0'
},
scrollback: 1000
});
function onTerminalReady(terminal) {
console.log('Terminal is ready', terminal);
}
</script>
<style>
.terminal-container {
width: 100%;
height: 500px;
}
</style>
```
### Vue 2
```vue
<template>
<div class="terminal-container">
<SSHTerminal
:host="host"
:username="username"
:password="password"
:options="options"
@ready="onTerminalReady"
/>
</div>
</template>
<script>
import { Vue2SSHTerminal as SSHTerminal } from 'vue-ssh-terminal';
import 'vue-ssh-terminal/dist/ssh-terminal.css';
export default {
components: {
SSHTerminal
},
data() {
return {
host: '42.96.22.182',
username: 'root',
password: 'ABC@123',
options: {
fontSize: 14,
theme: {
background: '#1e1e1e',
foreground: '#f0f0f0'
},
scrollback: 1000
}
};
},
methods: {
onTerminalReady(terminal) {
console.log('Terminal is ready', terminal);
}
}
};
</script>
<style>
.terminal-container {
width: 100%;
height: 500px;
}
</style>
```
### Web Component
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSH Terminal Example</title>
<script src="path/to/ssh-terminal.umd.js"></script>
<link rel="stylesheet" href="path/to/ssh-terminal.css">
<style>
.terminal-container {
width: 800px;
height: 500px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="terminal-container">
<ssh-terminal
host="42.96.22.182"
username="root"
password="ABC@123"
ws-url="ws://localhost:8080"
options='{"fontSize":14,"theme":{"background":"#1e1e1e"},"scrollback":1000}'
></ssh-terminal>
</div>
<script>
document.querySelector('ssh-terminal').addEventListener('ready', (event) => {
const terminal = event.detail.terminal;
console.log('Terminal is ready', terminal);
});
</script>
</body>
</html>
```
## API
### Props
| Prop | Kiểu dữ liệu | Bắt buộc | Mô tả |
|------|--------------|----------|-------|
| host | String | Có | Địa chỉ IP hoặc hostname của server SSH |
| username | String | Có | Tên đăng nhập SSH |
| password | String | Có | Mật khẩu SSH |
| wsUrl | String | Không | URL của WebSocket relay server (mặc định: ws://localhost:8080) |
| options | Object | Không | Các tùy chọn cho terminal |
### Events
| Event | Tham số | Mô tả |
|-------|---------|-------|
| ready | terminal | Được gọi khi terminal đã sẵn sàng, trả về đối tượng terminal |
### Terminal Options
| Option | Kiểu dữ liệu | Mặc định | Mô tả |
|--------|--------------|----------|-------|
| fontSize | Number | 14 | Kích thước font |
| fontFamily | String | 'Menlo, Monaco, "Courier New", monospace' | Font family |
| theme | Object | { background: '#000000', foreground: '#ffffff', ... } | Theme cho terminal |
| cursorBlink | Boolean | true | Bật/tắt nhấp nháy con trỏ |
| cursorStyle | String | 'block' | Kiểu con trỏ ('block', 'underline', 'bar') |
| scrollback | Number | 1000 | Số dòng lưu trong bộ nhớ để cuộn lại |
## WebSocket-to-SSH Proxy Server
Thư viện này yêu cầu một WebSocket-to-SSH proxy server để kết nối SSH. Server này nhận thông tin kết nối SSH từ client qua WebSocket và tạo kết nối SSH thực sự đến server đích.
### Cài đặt SSH-Proxy Server
1. Clone repository SSH-Proxy Server:
```bash
git clone https://github.com/yourusername/ssh-proxy-server.git
cd ssh-proxy-server
```
2. Cài đặt dependencies:
```bash
npm install
```
3. Chạy server:
```bash
npm start
```
Server sẽ chạy tại địa chỉ `ws://localhost:8022`.
### Giao thức WebSocket
#### Tin nhắn từ client đến server
1. Kết nối SSH:
```json
{
"type": "ssh-connect",
"host": "hostname_or_ip",
"port": 22,
"username": "username",
"password": "password"
}
```
2. Gửi dữ liệu đến SSH server:
```json
{
"type": "ssh-data",
"content": "command_or_input"
}
```
3. Thay đổi kích thước terminal:
```json
{
"type": "ssh-resize",
"cols": 80,
"rows": 24
}
```
#### Tin nhắn từ server đến client
1. Kết nối thành công:
```json
{
"type": "ssh-connected"
}
```
2. Dữ liệu từ SSH server:
```json
{
"type": "ssh-data",
"content": "output_from_ssh_server"
}
```
3. Lỗi:
```json
{
"type": "ssh-error",
"message": "error_message"
}
```
4. Kết nối đóng:
```json
{
"type": "ssh-closed"
}
```
## Đóng góp
Mọi đóng góp đều được chào đón! Vui lòng tạo issue hoặc pull request trên GitHub.
## Giấy phép
MIT