Как воссоздать AirDrop, используя только JavaScript

  • 16 декабря, 19:14
  • 3815
  • 5

SnapDrop.net - аналог популярного AirDrop, созданный Робином Линусом, позволяет напрямую обмениваться файлами между любым устройством с помощью браузера. Неважно, между iPhone и Android или планшетом с ПК. И не требуется загрузка и скачивание из облака. 

Так как же это работает?

Использование новой технологии

Технология - WebRTC (Web Real-Time Communication) - появилась всего несколько лет назад. Его канал данных позволяет SnapDrop отправлять байты (даже аудио и видео!) напрямую от одного устройства к другому.

Однако WebRTC не может соединить двух пользователей без посторонней помощи. Другими словами, ему нужен сигнальный сервер, чтобы обнаружить другие одноранговые узлы и показать им, как подключаться.

Знание этой технологии может выделить вас среди других разработчиков, которые еще не исследовали ее возможностей.

Схема архитектуры.  Сервер NodeJS подключен к телефону и компьютеру через веб-сокеты.  Телефон и компьютер подключены по WebRTC

ICE (Interactive Connectivity Establishment) - это то, как компьютер может нарисовать карту из Интернета для себя, когда у него нет общедоступного IP-адреса. Это связано с NAT (преобразование сетевых адресов), которое происходит между вашим маршрутизатором и компьютером.

Как только карта будет создана, эти два устройства поделятся своими картами друг с другом. SnapDrop делает это через сервер NodeJS, который обменивается данными между каждым одноранговым узлом, используя WebSockets - еще один замечательный протокол.

Как на счет безопасности?

WebRTC при передаче по умолчанию шифрует свои данные. Это круто и все такое, но вы же не хотите делиться файлами со случайными людьми.

SnapDrop использует ICE только между двумя компьютерами с одним и тем же IP-адресом, то есть они находятся в одной сети / Wi-Fi.

Для этого он создает комнаты для каждого IP-адреса и различает устройства, генерируя уникальный идентификатор.


/* Code to handle joining peers from the server */
_joinRoom(peer) {    // if room doesn't exist, create it    if (!this._rooms[peer.ip]) {      this._rooms[peer.ip] = {};    }
    // add this peer to room    this._rooms[peer.ip][peer.id] = peer;
}


Возможно, вы не захотите использовать это приложение в общедоступном Wi-Fi, поскольку тогда любой может отправлять вам файлы. Но в этой пандемии кто вообще выходит наружу? 

Приведенный выше фрагмент кода делает интересный выбор, сохраняя одноранговые узлы в объекте в классе сервера. 

Знакомый пользовательский интерфейс и пользовательский опыт

SnapDrop Сайт с иконками для 2 компьютеров и телефона

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

  1. Похоже приложение AirDrop
  2. Уведомления
  3. Обновления в реальном времени

Что делать, если устройство не поддерживает WebRTC?

К настоящему времени большинство устройств / браузеров поддерживают WebRTC, но в случае, если они этого не делают, у SnapDrop есть запасной вариант! В этом случае он использует уже установленное соединение WebSocket для отправки данных файла.

Однако это менее эффективно и менее безопасно, потому что данные должны сначала поступить на сервер, прежде чем они достигнут своего конечного пункта назначения.

if (window.isRtcSupported && peer.rtcSupported) {    this.peers[peer.id] = new RTCPeer(this._server, peer.id);
} else {    this.peers[peer.id] = new WSPeer(this._server, peer.id);
}


Стиль кода, управляемый событиями

База кода полностью событийная. Используйте этот стиль, когда хотите отделить сервисы друг от друга и разрешить обработку по мере выполнения действий.

Это дополняет WebRTC и WebSockets, поскольку они также управляются событиями. Когда приходит сообщение, или новое устройство  присоединяется, или файл хочет быть отправлен - это событие.

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

class Events {    static fire(type, detail) {        window.dispatchEvent(new CustomEvent(type, { detail: detail }));    }    static on(type, callback) {        return window.addEventListener(type, callback, false);    }
}


Что позволяет писать код, управляемый событиями, подобный этому

Events.on('signal', e => this._onMessage(e.detail));
Events.on('peers', e => this._onPeers(e.detail));
Events.on('files-selected', e => this._onFilesSelected(e.detail));
Events.on('send-text', e => this._onSendText(e.detail));
Events.on('peer-left', e => this._onPeerLeft(e.detail));


Проверьте код самостоятельно

Если вы хотите изучить код самостоятельно, вот репозиторий github. https://github.com/RobinLinus/snapdrop

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


5 комментариев
Сортировка:
Добавить комментарий
Brendokhil
Brendokhil 2020, 16 декабря, 21:14
0

лучше раскажы   как Архиэдж     на сервера залить)))   я сделаю перевод на русский    и буду сама играть))  https://www.xlgames.com/

Можешь мне на сервер поставить?  ..А то    игра умерала  пять лет  и не умерла...

Brendokhil
Brendokhil 2020, 16 декабря, 21:02
0

Или просто  находишь какой то  из 1000  своих скайпов  с синтезаторами голосов   и веб мах на цикле картинка  и скидываешь через скайп....или ту же аську....Но если нужно  просто ставишь домашний сервер NAT ,вот только зачем.?  за то что поделилсья, спасибо ,просто есть   бесплатное решение , оно работает , этого достаточно http://e.pc.cd/qKhotalK

Brendokhil
Brendokhil 2020, 16 декабря, 20:59
0

Это слишком сложно ,Для двух устройств таких задач как правило не стоит . Понимаешь если это не работает в один клик, и с этим что то нужно делать - то это бесполезная вещь. Для того что бы чем то обменяться я просто кидаю   на любой файло обменик  и отдаю ссылку.  http://e.pc.cd/qwhotalK

 Если я за    час перекину 100 теребайт , зачем  мучатсья? 


IT Новости

Смотреть все