Никогда не думал, что "Открыть терминал с помощью браузера так просто!" 》🙀🙀🙀

внешний интерфейс JavaScript
Никогда не думал, что "Открыть терминал с помощью браузера так просто!" 》🙀🙀🙀

Соси кошек вместе с кодом! Эта статья участвует【Эссе "Мяу Звезды"】

предисловие

Все, что вы преследуете, все, что вы делаете, имеет свое значение

Когда дело доходит до открытия терминала с веб-страницей, я думаю, что большинство людей использовали его, но мало кто должен был серьезно его изучать🤔. Мне тоже нужна была работа, поэтому я провел небольшое исследование.

Если вы использовали облачные серверы, вы должны быть более знакомы с этим, например, с удаленным подключением к Workbench от Alibaba Cloud. Удобство обслуживания и пользовательский опыт, которые он нам предоставляет, довольно хороши, что позволяет нам подключаться к реальной машине через сеть.

Кроме того, есть много вещей, которые могут работать в браузере,Например: облачные документы, облачное программное обеспечение, облачная среда разработки, облачное хранилище, облачные функции, облачные вызовы, облачные редакторы и т. д.

Давайте сделаем небольшую задачу: откройте терминал с веб-страницей, а затем введите терминалsmall_catПосле команды вывести в терминал группу котят 🐱.

первый взгляд

cat6.gif

Быстрое внедрение (всего два шага 🚀 + доступ через браузер)

Уже существуют очень зрелые библиотеки компонентов на основе xterm.js для реализации веб-терминала, такие как webssh (More Real-world Uses), вы можете подключиться к своему серверу в Интернете всего за два шага. Есть дрова и есть сюрпризы 😁

1. Выполнитьpip install webssh, установить вебш

Сначала убедитесь, что ваш компьютер установленPython, а версия 2.7/3.4+

но на самом деле используетсяpython3(использоватьpythond+pipОшибка при установке, возможно Python и pipнесоответствие версий).

Если вы используете Mac, вы можете проверить, существует ли уже python3, с помощью команды следующим образом:

python2 --version
-> Python 2.7.16
python3 --version 或者 /usr/bin/python3 --version
-> Python 3.9.5

После подтверждения, что есть python3, его можно запустить напрямую (если есть ошибка, его можно обновить сноваpip):

python3 -m pip install webssh 或者 pip3 install webssh

# 如果pip报错，根据终端提示升级pip，执行：
sudo /usr/bin/python3 -m pip install --upgrade pip

// 再重新安装即可
sudo /usr/bin/python3 -m pip install webssh

2. Запустите службу webssh

Введите в терминалеwsshВы можете открыть браузер локально, чтобы получить к нему доступ.

(Конечно, выполнение wssh займет процесс. Если он развернут в производственной среде, его необходимо запустить в фоновом режиме и запустить демон процесса)

Для получения дополнительной информации см. Использование webssh:GitHub.com/Вашингтон…

3. Как нарисовать кошку?

Ответ может вас удивить 👓---- ответ заключается в использованииconsole😄, мы можем использоватьconsoleВывод изображений персонажей, вы также можете использоватьconsoleвыходной фоновый узор (nodejs的console不支持输出背景图). (Конечно, вы также можете использоватьecho, в целом использоватьshellдля выполнения скрипта. )

cat6.gifНа этом небольшая задача выполнена.

Конечно, если вы маленький партнер, который больше занимается технологиями, и вы хотите реализовать и расширить некоторые функции самостоятельно, нет проблем. пожалуйста, посмотрите ниже:

Сделай сам

Разобравшись, оказалось, что решение для браузера открывать терминал, большинство из них используют xterm.js, который используется такими популярными проектами, как VS Code, Hyper и Theia. В дополнение к основным функциям, он также предоставляет множество подключаемых модулей, связанных с терминалом. Давайте воспользуемся им вместе, чтобы реализовать собственный веб-терминал.

1. Установить и запустить согласно официальной документации[адрес документа xtermjs] 

安装：npm install xterm

直接在页面中使用：
<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
      <!-- 也可以直接使用使用xterm的cdn静态资源 -->
      <script src="node_modules/xterm/lib/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>
  </html>

2. Невозможно ввести символы на стороне обслуживания клиентов

После запуска обнаружил无法在浏览器终端输入任何字符. Изучив документацию, я обнаружил, что мне нужно отслеживать каждый ввод:

term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
// 需要在脚本下增加：
term.onData((value)=>{
  term.write(value)
})

3. Нажатие клавиши удаления недопустимо, и при вводе курсор достигает первого символа

Попробуйте еще раз и обнаружите, что вы можете ввести, но не можете удалить введенные символы, продолжайтеПроверить документацию, обнаружена проблема с кодировкой, и он не может распознавать такие клавиши, как удаление. Как говорится в документации, вам нужно использоватьnode-ptyдля компиляции входных данных это решение на основе Node.js.

Принцип расчесывания (краткое содержание)

Реализована следующая логика: любая входная команда от клиента ==> передатьwebsocketПередать в бэкэнд ==> После компиляции в виртуальном терминале бэкенда ==> Затем передать результат черезwebsocketвозвращен клиенту.

4. Виртуальный терминал сервера (получение и преобразование ввода от клиента)

Конкретная реализация на стороне браузера (полная):

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
  <script src="node_modules/xterm/lib/xterm.js"></script>
  <script src="https://www.unpkg.com/dayjs@1.10.7/dayjs.min.js"></script>
  <script src="https://www.unpkg.com/xterm-addon-attach@0.6.0/lib/xterm-addon-attach.js"></script>
</head>

<body>
  <div id="terminal"></div>
  <script>
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    term.focus()
    const socketURL = "ws://127.0.0.1:3030/socket";
    const ws = new WebSocket(socketURL);
    attachAddon = new AttachAddon.AttachAddon(ws);
    term.loadAddon(attachAddon);
  </script>
</body>
</html>

<!-- copy后可直接在本地尝试使用 -->

Конкретная реализация сервера (полная):

#!/usr/bin/env node
var express = require('express');
var app = express();
const pty = require("node-pty");
require('express-ws')(app);

const os = require("os");
const shell = os.platform() === "win32" ? "powershell.exe" : "bash";
app.ws("/socket", (ws, req) => {
  console.log('websocket连接成功了')
  // 每次连接的时候都要生成一次term。否则在客服端刷新页面时，服务端的term就会失去连接
  // 虚拟终端（接收和转换输入）
  const term = pty.spawn(shell, ["--login"], {
    name: "xterm",
    cols: 50,
    rows: 24,
    cwd: process.env.HOME,
    env: process.env,
  });
  ws.on("open", (data) => {
    console.log('open data===', data)
  });
  term.on("data", function (data) {
    console.log('发送给客服端的数据===', data)
    ws.send(data);
  });
  ws.on("message", (data) => {
    console.log('接收客服端的数据===', data)
    term.write(data);
  });
  ws.on("close", function () {
    term.kill();
  });
});
app.listen(3030);

// copy后可直接在本地尝试使用

Следует отметить, что клиент должен генерировать термин каждый раз, когда он подключается к серверу, поэтому его необходимо инициализировать каждый раз, когда подключается сокет. В противном случае при обновлении страницы на стороне клиента терм на стороне сервера потеряет соединение.

На данный момент мы реализовали основные функции веб-терминала, а на официальном сайте также представлено много интересных плагинов.Заинтересованные друзья могут попробовать! (More Real-world Uses)

Основное содержание статьи завершено, продолжу добавлять чуть позже关于linux命名行操作,vim快捷操作связанный контент. Заинтересованные студенты могут сначала добавить избранное (Ctrl + D или команда + D) на всякий случай.

наконец

Если у нас нет полной идеи, когда мы сталкиваемся с некоторыми проблемами, мы могли бы также попытаться сначала реализовать ее. В процессе реализации ищите методы и обобщайте опыт. От него не следует отказываться без какой-либо попытки или считать его невозможным.

Если вы найдете это полезным, пожалуйста,点赞、关注Служба поддержки. Если в статье есть недостатки, вопросы или предложения, я надеюсь оставить сообщение ниже👇🏻, большое спасибо.

автор:tager
Адрес связанной статьи:https://juejin.cn/user/4353721776234743/posts
Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.

Категории