Развертываем peer-to-peer чат с голосом, видео, шарингом экрана, файлов и паролем

О чем эта статья?

Эта секция написана уже после статьи, чтобы читатель посмотрел, а надо ли ему что-то отсюда или нет, но это забавное приключение (напоминаю, что статьи в форме (б|в)лога, как всегда.

Что будет ниже:

• Поиск open source решения для общения голосом, шаринга экрана, включения видео и чатов в режиме peer-to-peer, без лишних бекендов

• Запуск этого решения в открытую в github pages

• Заворачивание этого решения на приватный сервер

• Простенькое закрытие доступа туды через http basic authentication

• Заключение с описанием некоторых замечаний и потенцевальных возможностей

Зачем?

Типичное проприетарное решение, которое не дает вам пользоваться всеми преимуществами коммуникации

В продолжении к первой публикации про старт инди-дев-(б|в)лога, в котором поделился первыми шагами по созданию кроссплатформенного решения, я понял, что мне негде его обсуждать, а значит нужен добротный, как гнедой конь, решение по коммуникации.

Звонки в raidcall, skype, teams, mattermost, google chat, slack, jabber и телеге звучат безумно, особенно, когда нужно быстро подключиться, пошарить экран, а самое главное — не думать о том, что шаришь кому-то телеметрию за проприетарное 3rd-party.

Когда ведешь лекции, особенно бесит, что дискорд блочит screen sharing, когда там юзеров >25, а в гугл мит есть лимит по времени.

Разумеется, читатель имеет право предъявить за проприетарные ОС, браузеры и прочие ПО, либо, что мне просто лень платить, но скорее просто хочется поискать велосипедов, да и поделиться с вами, что накопал и начал юзать.

Как и говорилось ранее, я попытался придумать оправданий для велосипедов, едем-те.

Гуглим какой-нибудь open source

И находим там всякий хлам, ищем дальше, конкретизируя запросы

Спустя полчаса поисков, находим какое-то более менее звучащее решение

Читаем ридмик, и видим, что в целом удовлетворяет

Надо пойти посмотреть демку - https://chitchatter.im/

Выглядит более чем достаточно, переходя по кнопкам находим, что есть: mardkown-based чат, видео, аудио, шаринг экрана и файлов

Тестим и понимаем, что работает вроде как норм, осталось разобраться что под капотом.

Находим упоминания rtc, а самое главное trystero

import { joinRoom as trysteroJoinRoom, Room, BaseRoomConfig } from 'trystero'

export const joinRoom: typeof trysteroJoinRoom = (
  _config: BaseRoomConfig,
  _roomId: string
) => {
  const room: Room = {
    makeAction: () => [() => Promise.resolve([]), () => {}, () => {}],
    ping: () => Promise.resolve(0),
    leave: () => {},
    getPeers: () => ({}),
    addStream: () => [Promise.resolve()],
    removeStream: () => {},
    addTrack: () => [Promise.resolve()],
    removeTrack: () => {},
    replaceTrack: () => [Promise.resolve()],
    onPeerJoin: () => {},
    onPeerLeave: () => {},
    onPeerStream: () => {},
    onPeerTrack: () => {},
  }

  return room
}

export const selfId = ''

Копаем про этого зверя и находим репу trystero, а с ним и вебсайт, обещающий сделать любое решение мультиплеером — https://oxism.com/trystero/

Читаем и понимаем, что это какая-то шляпо про

Trystero can connect peers via 🌊 BitTorrent, 🐦 Nostr, 📡 MQTT, 🪐 IPFS, and 🔥 Firebase.

Посидел, покурил, не понял, думаю комментаторы лучше объяснят, почему для https://en.wikipedia.org/wiki/Session_Description_Protocol нужен торрент, жду объяснений в комментариях. Учитывая, что все обещают зашифрованный трафик, вроде как звучит норм.

Решение найдено, теперь внедряем

Форк

Просто делаем форк основного репозитория отседа

И идем его настраивать:

• Вырубаем ненужные странички (Wikis, Issues, Projects), и идем сразу же конфигурировать все необходимое из секции self-hosted
  
  

  

• Включаем удаление веток, оставляем только Rebase flow (почему? пишите нормальные коммиты, не храните PRs дольше 1-2 дней, и будет вам счастье)

  

Судя по README, нужно сделать две вещи:

• Поменять homepage в package.json, чтобы приложение резолвило к себе статику

• Указать DEPLOY_KEY (как же бесит постоянна вакханалия вокруг обслуживания ключей в очередном github action

Начну со второго, так как сначала надо проверить, что оно запускается само

Локально генерим ключики

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

Топаем сюды — settings → deploy keys → add new

Пишем в Title: DEPLOY_KEY
Пишем в Key: значение сгнерированного публичного ключа: cat gh-pages.pub
Ставим галочку возле Allow write access

Потом идем в — secrets → actions → new repository secret, и делаем тоже самое, только вставляя приватный ключ: cat gh-pages

Судя по action-у, оно будет тригерриться только при пуше в main и в github pages, а значит надо создать main ветку и сделать её главной

Топаем в ветки и создаем main

Затем топаем в настройки репозитория и ставим main главной веткой

Дальше пытаемся понять почему не запустились actions и находим, что надо было разрешить actions у форкнутой репы

Соглашаемся и триггерим action для деплоя в gh-pages

Примерно полторы минуты, оно прошло

Справа Code-странице репозитория появляется инфо про github pages

Кликаем туда и находим ссылку на инстанс по клику на иконку возле 1 minute ago

Работать оно работает, вот только статику не отдаёт, но это не важно, так как статика просто не там лежит

Оно ищет под https://the-homeless-god.github.io/assets/index-OD1TD8_t.js

А вот часть github pages оно пропустило в рамках homepage

В любом случае, давайте настроим, чтобы лишний раз убедиться, что всё работает, а вдруг и кому-то достаточно только этого.

Так что 1 раз пушим в мастер редактирование в package.json поля homepage на ссылку на наш github page

Коммитим и ждем как пройдет пайплайн

Помогло? Нет.
Идем в vite.config.js и указываем ему base

Запустилось, потыкался, ок

Пойду открою им PR в README хоть, пусть про base напишут

А теперь мы хотим это тащить на приватный сервер

А почему? А зачем? Оно же итак работает из-под github pages, но вот что важно — а я не хочу чтобы туда кто-то имел доступ

Берите тачку где хотите, мне нравятся ruvds, digitalocean и из самых бюджетных — это justhost.

Берите бубунту (осуждаю, но для статьи на хабре пойдет).

На этой самой бубунте:

• Создайте отдельного юзера и папку под нашу статику, ну и права отдайте

  adduser ga
  mkdir -m 755 /var/www/chat
  chown ga:ga /var/www/chat
  su -- ga
  mkdir /home/ga/.ssh/
    ssh-keygen -t rsa -b 4096 -C "deployer" -f deployer -N ""

  И пишем публичный ключик в authorized_keys

• Поставьте nginx и настройте конфиг смотреть на статику

  # устанавливаем nginx
  apt install nginx
  
  # говорим firewall чтоб разрешал ваш nginx, ssh и http/https
  ufw allow ssh
  ufw enable
  ufw allow http
  ufw allow https
  ufw allow 'Nginx HTTP'

• И редачим конфиг: vim /etc/nginx/nginx.conf

  server {
  	access_log /var/log/nginx/access.log;
  
      add_header X-Xss-Protection "1; mode=block" always;
      add_header X-Frame-Options SAMEORIGIN;
      add_header X-Content-Type-Options nosniff;
      add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
  
      root /var/www/chat;
      index index.html;
  
      location / {
        try_files $uri $uri/ /index.html;
      }
  }

В настройках репозитория добавляем три новых ключа:

• SERVER_HOST - адрес нашего сервака

• SERVER_USERNAME - имя юзера

• SERVER_SSH_KEY - содержимое приватного ключа

И дописываем deploy-логику

 # тут мы собс-на просто смотрим, что сервер жив и радуемся
  - name: agent - get server status
    uses: appleboy/ssh-action@master
    with:
      host: ${{ secrets.SERVER_HOST }}
      username: ${{ secrets.SERVER_USERNAME }}
      key: ${{ secrets.SERVER_SSH_KEY }}
      script: neofetch && df -H / && free -m

	# тут мы ставим на github action ssh ключ, чтобы можно было пользоваться всякими командами а-ля rsync, scp и прочее
  - name: agent - install ssh key
    uses: shimataro/ssh-key-action@v2
    with:
      key: ${{ secrets.SERVER_SSH_KEY }}
      known_hosts: unnecessary

  # тут мы его устанавливаем
  - name: agent - install ssh
    run: ssh-keyscan -p 22 -H ${{ secrets.SERVER_HOST }} >> ~/.ssh/known_hosts

  # подчищаем за собой директорию на сервере
  - name: agent - cleanup static folder
    uses: appleboy/ssh-action@master
    with:
      host: ${{ secrets.SERVER_HOST }}
      username: ${{ secrets.SERVER_USERNAME }}
      key: ${{ secrets.SERVER_SSH_KEY }}
      script: rm -rf /var/www/chat/**

  # деплоим статику на сервер
  - name: agent - deploy static
    run: ls -la ./dist && rsync -avz -r -e "ssh -p 22" ./dist/ ${{ secrets.SERVER_USERNAME }}@${{ secrets.SERVER_HOST }}:/var/www/chat/

  # смотрим, что статика действительно там
  - name: agent - show deployed dir
    uses: appleboy/ssh-action@master
    with:
      host: ${{ secrets.SERVER_HOST }}
      username: ${{ secrets.SERVER_USERNAME }}
      key: ${{ secrets.SERVER_SSH_KEY }}
      script: ls -la /var/www/chat/

Коммитим это всё и ждём

Прячем за basic http authentication

Подробнее тут

# Ставим либу
apt install apache2-utils

# Генерим пользователя + пароль
htpasswd -c /etc/apache2/.htpasswd ga

# Смотрим, что всё хорошо
cat /etc/apache2/.htpasswd

Дальше в nginx.conf пишем чтобы доступов не было

auth_basic           "Administrator’s Area";
auth_basic_user_file /etc/apache2/.htpasswd;

Получится что-то вроде

Перезапускаем Nginx + дописываем себе генерацию серта откуда-нибудь, будь-то Let’s Encrypt

systemctl nginx restart

И теперь когда вы перейдете по ip своего сервера будет окошко с запросом логина и пароля

Остаётся только убирать налету информацию про ip адрес в homepage в package.json и удалить содержимое vite.config.ts про base

Получится примерно так:

Мы просто удаляем строку с помощью sed, а для подмены содержимого homepage поля используем встроенные методы и пересобираем

Заключение

Теперь у вас как и у меня есть свой спрятанный на сервере клиент для коммуникации без проприетарного бугага.

Может быть вы что-то накоммуниздите здесь полезного для себя, а может что-то напишите тут на улучшение.

Допустим вы решили коммерциализировать это решение, но оно по лицензии к вам не подходит?

Вы можете написать адаптер который вклинивается в этот код с вашими дописками хоть из-под другого npm пакета, хоть из-под git submodule.

Из ограничений у этого клиента — 256 участников в вашей комнате

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

Среди прочего, упустил немногое про бубунту, просто потому что ну не люблю я её, используйте BSD.

А в остальном — ничего нигде не хранится, всё шифруется, да и всё бесплатно, если не нужно приватить доступ к статике. И можно вести лекции не боясь, что качество просядет и общаться с коллегами используя максимальный стриминг.

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

Have a fun!