Собственный VPN клиент на JavaScript. 1 часть — Вводная

Приветствую, Хабр.

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

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

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

Предыстория
Мало о том, почему и как возник этот проект.

По случайному совпадению я познакомился с таковой восхитительной технологией (способом решения) как Electron прямо перед началом репрессий и блокировок Telegram в Рф. Глупый и бесжалостный Роскомнадзор и Кровавая гэбня — кто все эти люди? Тут, на Хабре, я лицезрел бессчетные статьи о поднятии собственных VPN и прокси серверов на фоне всей данной нам битвы за сеть. Это не давало мне покоя: веб — часть моей жизни, и когда за вебом пришли, я не мог бездействовать. Я был должен поучаствовать в сопротивлении за вольный веб.

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

Потому и возник проект JS.VPN-Client. 04.05.2018
В прошедший раз история с Electron завершилась на разработке 1-го приложения, так что я остался знаком с данной нам технологией (способом решения) только немногим поближе, чем с написанием статей. Я не стал разбираться и углубляться в разработку десктопных приложений, а неувязка в железе обременяла разработку, делая ее нестерпимой. Вообщем, может быть у меня просто не было адекватного взора на Electron в тот момент. Одним словом, было не в особенности любопытно.

Постистория
В общем, с Electron я больше никак не имел и даже не собирался иметь дела. Но 26 октября 2018 года я вспомянул про один из собственных давнешних проектов, который временами запускаю, с очевидную грустью памятуя о том, как хаотично организован код программки.

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

Спустя недельку либо две я вполне переписал приложение, и даже пришел к весьма увлекательному способу внутренней организации кода. Такие технологии (технология от греч. techne — искусство — мастерство, умение и …логия) как Electron и Puppetter владеют очень специфичной архитектурой: на мой взор, впервой прикоснувшись к Electron не попросту представить разработку даже маленького приложения, не глядя на (не)огромное количество обучающих материалов. Но я готов представить аннотацию по разработке Electron приложений, — пусть и нетщательно откатанную, но уже позволяющую сделать такое приложение как JS.VPN-Client.

Разработка
Естественно, так системно к разработке собственных проектов, как описано в данной нам статье, я не подхожу (либо подхожу, но совершенно изредка), но потому что я желаю ввести читателя в курс дела, то буду добавочно пояснять всякие спорные на мой взор моменты. То, что я оставлю без пояснения, обязано быть естественным для JavaScript разраба либо не обязано быть понятным совершенно.

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

Начиная поновой, я решил, что программка обязана быть разработана совершенно не зависимыми друг от друга компонентами, у каких должен быть собственный, хоть и не большенный API, через который они будут вести взаимодействие, и в конечном итоге все будут соединены в одно огромное приложение.

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

VPN и Сохранность
Моему VPN клиенту необходимы конфиги, но потому что я не держатель серверов в собственном приложении, я использую только общественные VPN сервера с поддержкой OpenVPN. Их я получаю из API этого веб-сайта VPN Gate — Public Free VPN
Утверждать, что это наилучший метод, не буду, поэтому что недостаточно компетентен в вопросце сохранности. В любом случае, структура приложения довольно эластичная, чтоб переработать «под себя» и применять наилучший метод получения защищенных серверов.

2 часть — Разработка

Навигация1 часть — Вводная
2 часть — Разработка
3 часть — OpenVPN компонент
4 часть — Configs компонент
5 часть — Vpn компонент
6 часть — Notify компонент
7 часть — Context компонент
8 часть — Setting компонент
9 часть — Callback компонент
10 часть — Объединение всех компонент
11 часть — Сборка приложения под Windows


Источник

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *