vue-ssh-terminal

v1.0.0

Published

5 months ago

SSH Terminal component based on xterm.js for multiple frontend frameworks

0High
0Medium
0Low

longvansoftware

ssh terminal xterm vue web-component websocket ssh-client

Vue SSH Terminal

Vue SSH Terminal là một component dựa trên 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

npm install vue-ssh-terminal

Sử dụng

Vue 3

<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

<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

<!DOCTYPE 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

Clone repository SSH-Proxy Server:

git clone https://github.com/yourusername/ssh-proxy-server.git
cd ssh-proxy-server

Cài đặt dependencies:

npm install

Chạy server:

npm start

Server sẽ chạy tại địa chỉ ws://localhost:8022.

Giao thức WebSocket

Tin nhắn từ client đến server

Kết nối SSH:

{
  "type": "ssh-connect",
  "host": "hostname_or_ip",
  "port": 22,
  "username": "username",
  "password": "password"
}

Gửi dữ liệu đến SSH server:

{
  "type": "ssh-data",
  "content": "command_or_input"
}

Thay đổi kích thước terminal:

{
  "type": "ssh-resize",
  "cols": 80,
  "rows": 24
}

Tin nhắn từ server đến client

Kết nối thành công:

{
  "type": "ssh-connected"
}

Dữ liệu từ SSH server:

{
  "type": "ssh-data",
  "content": "output_from_ssh_server"
}

Lỗi:

{
  "type": "ssh-error",
  "message": "error_message"
}

Kết nối đóng:

{
  "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