Я переместил рабочий стол macOS в Интернет

JavaScript внешний фреймворк
Я переместил рабочий стол macOS в Интернет

Пример

doc.gif

зачем писать это

В ранние часы глубокой ночи я все еще исправлял ошибку. Внезапно мой компьютер с Windows завис, и исправление ошибки и зависание экрана компьютера меня очень разозлили. Я взял свой телефон и открыл Apple Store, и присматривался к покупке двухлетней давности.макбук молодцы еще цену не сбросили! Для моей бедной семьи, так как я был ребенком, покупка его, несомненно, ухудшит мою жизнь.Так же, как это, в моем уме внезапно появилась идея, могу ли я использовать полученные навыки, чтобы имитировать демонстрационное облако рабочего стола, на этом рабочем столе я Я могу разрабатывать код, пользоваться терминалом, слушать музыку, писать заметки, вести блоги... Самое главное, что мне не нужно управлять окружением! Вау идеально! Таким образом, из-за денег я склонил голову перед реальностью, а затем запустил свой собственный демонстрационный облачный рабочий стол!

Используемый стек технологий

  • vue3 + vite + семейное ведро
  • webrtc + coturn
  • xterm.js + node-pty
  • vscode-server
  • nestJs + mysql
  • socket
  • docker
  • nginx

image.png

Каковы функции?

  • Чистая интерфейсная реализация — видеозвонокwebtrc 3d39f07b48b695f74e8ac2522928054.jpg

webrtc — это технология обмена мгновенными сообщениями с открытым исходным кодом от Google. Внешний интерфейс может реализовывать голосовые и видеовызовы, пока вызывается встроенный в браузер API. Я пытался одновременно общаться в Интернете с четырьмя людьми. Основные шаги: подтяните локальный видеопоток, залейте поток на видео, затем создайте PeerConnection, соберите и сохраните свой собственный iceCandidate, добавьте информацию описания локального sdp пиру в ссылку согласования, а затем отправьте sdp описание информации для стороны ответа Сообщите стороне ответа локальному устройству, чтобы оно взаимодействовало с требуемыми протоколами и маршрутами, а затем отправьте информацию ICE, чтобы она соответствовала подключению соединения ICE, а затем сторона ответа также обменяет свою собственную локальную информацию описания при получении sdp, и передать полученную информацию sdp через настройку setRemoteDescription На локальный (мы называем это сигнальным обменом); таким образом, мы устанавливаем соединение webrtc, а затем слушаем удаленный видеопоток через ontrack, чтобы заполнить видеокадр другой стороны! В основном используются технология WebRTC и технология сокетов, а во внешней сети необходимо настроить службу проникновения во внутреннюю сеть;

vscode, работающий на веб-странице, в основном такой же, как и vscode на рабочем столе.Я использую официальный образ codercom/code-server, и около 1.1G также требует настройки сервера.

 // 拉下镜像
 docker pull codercom/code-server 
 // 创建目录
 mkdir -p ~/.config 
 // 创建容器
 docker run -it --name code-server -p 6689:8080 \
  -v "/xxx/.config:/home/coder/.config" \
  -v "/xxx:/home/coder/project" \
  -e PASSWORD="123456" \
  codercom/code-server:latest
 // 访问ip加8080端口访问

Официальный адрес зеркала

image.png

Terminal Адрес официального сайта

Это библиотека js, которая может реализовать веб-терминал через технологию сокетов в браузере! Принцип реализации заключается в том, что клиент использует xterm.js для инстанцирования

Терминал содержимое, отправленное на терминал к серверу (службу узла), затем получает содержимое ввода через сокет после ввода узла выполнения инструкций через инструкцию, а затем возвращает результаты к клиенту через сокет, что формируется таким образом результаты Веб-версию терминала, за которым следует начало официального сайта демо, потому что у меня нет этого узла, состоит в том, чтобы использовать событие, чтобы сформировать прослушивание прослушивания проводника и Xterm-Addon-attlet Plug-informent. Вернуться вниз просто подключите напрямую клонировать магическое изменение в каждом не войти на сервер, используя сервер! Сервер может быть подключен в любом месте, в любое время, и это безопасность, потому что то, как вы помещаете свой обнаженный сервер, также очень опасен, поэтому нужно быть осторожным! ! !

image.png

Демонстрация официального сайта

разное

Есть еще какие-то самоиграющиеся примочки, которые нагромождены логикой, а внедрять нечего, типа песен, простых браузеров и т.д. На данный момент вся полка выстроена, и дальше буду ее улучшать и дальше Создайте копию. Свой собственный набор инструментов, используйте техники, которым научились, чтобы сделать себя счастливым и добиться того, чего вы хотите. Конечно, он также включает в себя множество колес, предоставленных старшими, и я очень благодарен старшим!

напиши в конце

Это очень интересно, я это очень люблю, это приносит мне доход, а также позволяет испытать то удовольствие, которое приносят технологии, хотя иногда нас раздражают и подбрасывают баги, но пока мы успокаиваемся, выходим на прогулку или умыться Поставь лицо, может есть решение получше!Адрес моего блога macOS

Категории