клиент серверное приложение node js
Руководство для начинающих по серверной веб-разработке с Node.js
Большую часть своей веб-карьеры я работал исключительно на стороне клиента. Проектирование адаптивных макетов, создание визуализаций из больших объемов данных, создание инструментальных панелей приложений и т. Д. Но мне никогда не приходилось иметь дело с маршрутизацией или HTTP-запросами напрямую. До не давнего времени.
Этот пост представляет собой описание того, как я узнал больше о веб-разработке на стороне сервера с помощью Node.js, и краткое сравнение написания простого HTTP-сервера с использованием 3 разных сред, Express, Koa.js и Hapi.js.
Примечание: если вы опытный разработчик Node.js, вы, вероятно, подумаете о том, что это все элементарно/просто. ¯\_(ツ)_/¯.
Некоторые основы сети
Когда я начал работать в веб-индустрии пару лет назад, я наткнулся на курс по компьютерным сетям профессора Дэвида Ветерала на Coursera. К сожалению, он больше не доступен, но лекции по-прежнему доступны на веб-сайте Pearson.
Мне очень понравился этот курс, потому что он объяснял, что происходило под капотом, в понятной форме, поэтому, если вы можете взять в руки учебник «Компьютерные сети», прочитайте все подробности о чудесах сети.
Здесь, однако, я собираюсь лишь кратко рассказать о контексте. HTTP (Hypertext Transfer Protocol) — это протокол связи, используемый в компьютерных сетях. В Интернете их много, таких как SMTP (простой протокол передачи почты), FTP (протокол передачи файлов), POP3 (протокол почтового отделения 3) и так далее.
Эти протоколы позволяют устройствам с совершенно разным аппаратным / программным обеспечением связываться друг с другом, поскольку они предоставляют четко определенные форматы сообщений, правила, синтаксис и семантику и т.д. Это означает, что, пока устройство поддерживает определенный протокол, оно может связываться с любым другим устройством. в сети.
От TCP / IP против OSI: в чем разница между двумя моделями?
Операционные системы обычно поставляются с поддержкой сетевых протоколов, таких как HTTP, из коробки, что объясняет, почему нам не нужно явно устанавливать какое-либо дополнительное программное обеспечение для доступа в Интернет. Большинство сетевых протоколов поддерживают открытое соединение между двумя устройствами, что позволяет им передавать данные туда и обратно.
HTTP, на котором работает сеть, отличается. Он известен как протокол без установления соединения, потому что он основан на режиме работы запрос / ответ. Веб-браузеры отправляют на сервер запросы на изображения, шрифты, контент и т.д., но после выполнения запроса соединение между браузером и сервером разрывается.
Servers and Clients
Термин сервер может слегка сбивать с толку людей, впервые знакомых с отраслью, поскольку он может относиться как к аппаратному обеспечению (физические компьютеры, на которых размещены все файлы и программное обеспечение, требуемое веб-сайтами), так и к программному обеспечению (программе, которая позволяет пользователям получать доступ к этим файлам в Интернете).
Сегодня мы поговорим о программной стороне вещей. Но сначала несколько определений. URL обозначает Universal Resource Locator и состоит из 3 частей: протокола, сервера и запрашиваемого файла.
Структура URL адреса
Протокол HTTP определяет несколько методов, которые браузер может использовать, чтобы попросить сервер выполнить кучу различных действий, наиболее распространенными из которых являются GET и POST. Когда пользователь щелкает ссылку или вводит URL-адрес в адресную строку, браузер отправляет GET-запрос на сервер для получения ресурса, определенного в URL-адресе.
Сервер должен знать, как обрабатывать этот HTTP-запрос, чтобы получить правильный файл, а затем отправить его обратно браузеру, который его запросил. Наиболее популярное программное обеспечение веб-сервера, которое обрабатывает это Apache и NGINX.
Веб-серверы обрабатывают входящие запросы и отвечают на них соответственно
Оба представляют собой полнофункциональные пакеты программного обеспечения с открытым исходным кодом, которые включают в себя такие функции, как схемы аутентификации, перезапись URL-адресов, ведение журнала и проксирование, и это лишь некоторые из них. Apache и NGINX написаны на C. Технически, вы можете написать веб-сервер на любом языке. Python, golang.org/pkg/net/http, Ruby, этот список может продолжаться довольно долго. Просто некоторые языки лучше выполняют определенные вещи, чем другие.
Создание HTTP сервера с Node.js
Node.js — это среда выполнения Javascript, построенная на движке Chrome V8 Javascript. Он поставляется с модулем http, который предоставляет набор функций и классов для построения HTTP-сервера.
Для этого базового HTTP-сервера мы также будем использовать файловую систему, путь и URL-адрес, которые являются собственными модулями Node.js.
Начните с импорта необходимых модулей.
Мы также создадим словарь типов MIME, чтобы мы могли назначить соответствующий тип MIME запрашиваемому ресурсу на основе его расширения. Полный список типов MIME можно найти в Internet Assigned Numbers Authority (интернет-центре назначенных номеров).
Мы передадим функцию-обработчик запроса в createServer() с объектами запроса и ответа. Эта функция вызывается один раз каждый раз, когда к серверу поступает HTTP-запрос.
Объект request является экземпляром IncomingMessage и позволяет нам получать доступ ко всей информации о запросе, такой как статус ответа, заголовки и данные.
Объект response является экземпляром ServerResponse, который является записываемым потоком и предоставляет множество методов для отправки данных обратно клиенту.
В обработчике запросов мы хотим сделать следующее:
Весь код размещен на Glitch, и вы можете сделать ремикс на проект, если хотите.
Создание HTTP-сервера с фреймворками Node.js
Фреймворки Node.js, такие как Express, Koa.js и Hapi.js, поставляются с различными полезными функциями промежуточного программного обеспечения, в дополнение к множеству других удобных функций, которые избавляют разработчиков от необходимости писать самим.
Лично я чувствую, что лучше сначала изучать основы без фреймворков, просто для понимания того, что происходит под капотом, а затем после этого сходить с ума с любым фреймворком, который вам нравится.
В Express имеется собственный встроенный плагин для обслуживания статических файлов, поэтому код, необходимый для выполнения тех же действий, что и в собственном Node.js, значительно короче.
У каждой из этих платформ есть свои плюсы и минусы, и они будут более очевидными для более крупных приложений, а не просто для обслуживания одной HTML-страницы. Выбор структуры будет сильно зависеть от реальных требований проекта, над которым вы работаете.
Создаем простое веб приложение при помощи Node.js
Вам нужно создать простое веб приложение? Не знаете, что выбрать из многообразия предлагаемых сегодня инструментов и технологий?
Мы объясним, расскажем и покажем на примере, как это сделали бы мы.
Начнем с самого начала:
ЧТО ТАКОЕ ПРОСТОЕ ПРИЛОЖЕНИЕ?
Простое приложение предполагает, что:
ВЫ ХОТИТЕ СОЗДАТЬ ИМЕННО ТАКОЕ ВЕБ-ПРИЛОЖЕНИЕ?
ПОЧЕМУ JAVASCRIPT?
Исходя из всего этого, неудивительно, что JavaScript стабильно занимает позицию самого используемого языка программирования
JavaScript сохраняет за собой первое место в течение пяти лет подряд. А это уже о чем-то говорит.
В течение этих лет язык, конечно же, не стоит на месте, а развивается, причем развивается семимильными шагами. Появляются новые библиотеки и фреймворки, развиваются и расширяются уже существующие.
ЧТО ТАКОЕ NODE.JS?
Каждый программист ответит по-своему на вопрос о том, какой язык лучше использовать для серверной части. В каждом случае сыграют роль накопленный опыт работы, привычка, особенности разрабатываемого продукта.
Согласитесь, неразумно отказываться от предлагаемых возможностей в виде готовых решений и писать код полностью вручную. Это сложно, долго, нерационально. Тем более, что мы говорим о простом приложении, а не о чем-то сложном и уникальном.
В сети предлагается множество пошаговых инструкций, которые подробно описывают создание веб-приложения при помощи Node.js. Какие-то из них рассчитаны на подготовленных разработчиков, мы же предлагаем рассмотреть простой пример разработки на Node.js для начинающих программистов и для тех, кто не силен в программировании, но кому интересна логика процесса.
ПОДГОТОВКА
Чтобы начать работу с Node.js, нужно, как минимум, установить Node.js.
Процедура несложная и не отнимет много времени. Используйте один из вариантов установки, предлагаемых на официальном сайте Node.js.
Вместе с Node.js автоматически устанавливается менеджер пакетов npm.
В Node.js используется модульный подход, то есть можно расширять функционал за счет подключения большого количества модулей. Именно за их установку и отвечает менеджер пакетов.
В нашем примере мы будем использовать систему управления базами данных (СУБД) MongoDB. Так же как и в случае с Node.js, на официальном сайте продукта есть подробная документация и инструкция по установке.
Для создания простого приложения нам понадобятся :
Благодаря сервисной программе nodemon, сервер будет автоматически перезапускаться при каждом изменении кода.
EXPRESS
Почему именно этот фреймворк?
При своей минималистичности и легкости он предлагает весь необходимый набор функций для веб-приложения.
Чтобы создать каркас приложения при помощи этого фреймворка, можно использовать генератор приложений Express.
Перейдите по ссылке и вы увидите, насколько все просто.
В документации описана последовательность действий и команд и показаны результаты их выполнения.
Как вы ею воспользуетесь, зависит от специфики продукта и от опыта за плечами у разработчика. С одной стороны, это обеспечивает разработчику определенную свободу действий. С другой стороны, гибкость, которая особенно характерна для Node.js, часто осложняет жизнь разработчиков, особенно начинающих.
Никто не даст вам конкретных указаний о том, что и как именно нужно сделать. Структура директории, количество файлов, подключаемые внешние модули: выбор остается за вами.
Теперь посмотрим, как все описанное выше реализуется на примере.
ПРИМЕР
Для этого используем следующие команды:
Здесь мы подключаем необходимые зависимости (сторонние коды, которые будет использовать наше приложение).
Сейчас настал момент вернуться к типам HTTP-запросов: изначально (когда протокол HTTP только появился) в отношениях между клиентом и сервером подразумевалось только то, что клиент хочет получить ресурс (GET).
По мере того, как система отношений клиент-сервис усложнялась, появился подход REST (REpresentational State Transfer). Он предусматривает использование разных HTTP-методов для разных действий: POST, GET, PUT, PATCH, DELETE.
В зависимости от того, что именно будет делать приложение, настраиваем endpoint для выполнения нужных нам запросов.
Логика создания такой endpoint тоже очень простая:
Логику вы уже можете предположить самостоятельно:
А также создаем endpoint для удаления (DELETE) записи:
Мы рассказали о том, как создать простое приложение с использованием Node.js. Используя это приложение, как основу, можно расширять его функционал за счет дополнительных модулей. Но это уже зависит от того, для чего вы планируете использовать будущий проект.
Остались вопросы? Нужна помощь в разработке? Чем быстрее вы свяжитесь c Umbrella IT, тем быстрее ваши идеи будут воплощены в реальность.
Ультрабыстрые приложения на Node.js и Socket.io
Библиотека Socket.io позволяет реализовать синхронизированную коммуникацию внутри приложения. То есть, в режиме реального времени. Проще говоря, socket.io поможет создать живой чат на сайте. Или, например, браузерную игру, за развитием сюжета которой пользователь сможет следить без перезагрузки веб-страницы!
Что делает socket.io?
socket.io основывается на нескольких технологиях, обеспечивающих коммуникацию в режиме реального времени. Наиболее известная из них – это WebSocket.
Этот API JavaScript поддерживается всеми современными браузерами. Он обеспечивает синхронизированный двунаправленный обмен данными между клиентом и сервером.
Давайте ещё раз вернёмся к основам. Большая часть коммуникационных каналов интернета не синхронизированы. Он всегда был таким: клиент запрашивает, а сервер отвечает.
Это было приемлемо на заре всемирной сети, но сейчас становится большим ограничением. Клиент должен перезагрузить страницу или самостоятельно инициировать запрос к серверу. Поскольку сервер не может общаться с клиентом по своей воле.
WebSocket – это технология, которая создаёт некое подобие «канала» коммуникации между клиентом и сервером, который остаётся постоянно открытым. Браузер и сервер остаются соединёнными друг с другом и могут обмениваться сообщениями в любом направлении.
Не путайте WebSocket и AJAX!
AJAX помогает клиенту и серверу обмениваться информацией без перезагрузки страницы. Но при этом клиент всегда посылает запрос, а сервер отвечает. Сервер не может сам принять решение об отправке данных клиенту. С WebSocket это стало возможным!
Socket.io позволяет просто использовать WebSocket. А поскольку не все браузеры могут создавать WebSocket, данная библиотека позволяет использовать другие механизмы синхронизации, которые поддерживаются браузером.
Загляните в раздел поддерживаемых браузеров на официальном сайте socket.io. Здесь можно увидеть, что библиотека определяет, какая технология подходит клиенту:
Например, если браузер не поддерживает WebSocket, но в нем установлен Flash, то socket.io будет использовать последнюю технологию для взаимосвязи в реальном времени. Если нет, библиотека применит другие техники, такие как длинные опросы AJAX.
Клиент постоянно опрашивает сервер, есть ли обновления для него. Это не самый эффективный метод, но он работает. Также может применяться невидимый iframe, который постоянно перезагружается, чтобы получить обновления с сервера.
Благодаря всем этим технологиям библиотека socket.io поддерживает большое количество браузеров, в том числе и устаревших:
Отправка и получение сообщений с помощью socket.io
Перейдём к делу: как использовать библиотеку socket.io?
Установка socket.io
При первом использовании библиотеки я потратил 15 минут, чтобы установить ее. Для этого нужно выполнить эту команду:
Первый код: клиент входит в систему
При работе с библиотекой socket.io используется одновременно два файла:
Сервер (app.js)
Вначале мы загружаем на сервер содержимое страницы index.html и отображаем ее клиенту, После этого грузим библиотеку socket.io и управляем ее событиями.
Что делает приведенный выше код:
Допустим, что пользователь открывает в браузере веб-страницу, на которой находится приложение (в данном случае http://localhost:8080). Мы отправляем ему файл index.html, страница загружается. Код JavaScript этого файла соединяется с сервером. Но на этот раз не через http, а через socket.io (WebSocket). Клиент поддерживает два типа соединений:
Клиент (index.html)
Файл index.html отправляется сервером Node.js. Это классический HTML-файл, который содержит JavaScript-код для соединения с сервером в режиме реального времени.
Я специально расположил JavaScript- код в конце HTML-кода, чтобы избежать задержки загрузки страницы из-за JavaScript.
В первом блоке кода мы получаем файл socket.io.js для клиента. Он автоматически предоставляется сервером Node.js через модуль socket.io (поэтому путь к файлу выбран не случайно):
Данный скрипт позволяет управлять соединением с сервером на стороне клиента, через WebSocket. А также с помощью одного из методов, если WebSocket не поддерживается браузером.
Веб-приложение на Node и Vue, часть 3: развитие клиента и сервера
Сегодня публикуем третью часть из серии материалов, посвящённой разработке приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой и второй частях мы создавали сервер, настраивали механизмы аутентификации и занимались обустройством фронтенда. В этом материале продолжим работать над клиентской и серверной частями системы. То, что уже создано, пока почти не касается логики самого приложения, которое предназначено для работы с финансовыми документами. Поэтому, кроме прочего, мы займёмся и этим аспектом проекта.
Несколько исправлений
Для начала мне хотелось бы поблагодарить пользователя @OmgImAlexis за указание на проблему с фоновым изображением, на то, что у меня нет прав на его использование, и за рекомендацию по поводу этого ресурса со свободно распространяемыми картинками.
Поэтому сегодня мы начнём с замены фонового изображения, используемого в проекте, на это (не забудьте уменьшить изображение, если вы собираетесь разворачивать приложение). Если вы хотите сразу использовать уменьшенное изображение — можете взять его из моего репозитория.
После загрузки изображения перейдём к файлу компонента App.vue и заменим то изображение, что было раньше. Кроме того, отредактируем стили:
Тут мы добавили свойство background-size: cover и следующую конструкцию:
Теперь откроем файл компонента Authentication.vue и внесём некоторые изменения в стили:
Далее, отредактируем метод signup :
Мы внесли в проект эти исправления, так как, в противном случае, после регистрации в системе, пользователь будет перенаправлен таким образом, будто он аутентифицирован, но мы его при этом не аутентифицируем, в результате система будет работать не так, как ожидается.
Далее, сразу после метода signout внесём небольшие изменения в метод checkAuthentication :
Тут можно оставить всё как есть, либо, для преобразования константы token в логическое значение, воспользоваться тернарным оператором сравнения.
Распространённый недочёт JS-кода заключается в использовании логических выражений для приведения неких значений к логическому типу вместо применения конструкции с восклицательным знаком. Обычно этот вариант выглядит так:
Разработка компонента Header
Прежде чем заняться компонентом домашней страницы, создадим шапку для неё. Для этого перейдём в папку components и создадим файл Header.vue :
Теперь определим компоненты в маршрутизаторе. Для этого откроем файл index.js в папке router и приведём его к такому виду:
В том, что касается имён тегов, хотелось бы привести выдержку из документации по Vue.js:
Обратите внимание, что Vue не требует соблюдения правил W3C для пользовательских имён тегов (таких как требования использования только нижнего регистра и применения дефисов), хотя следование этим соглашениям считается хорошей практикой.
Теперь настал черёд маршрутизатора:
Мы займёмся компонентом Header позже, но на данном этапе работы нас устроит его нынешнее состояние.
Разработка компонента Home
Как обычно — откроем файл компонента, которым собираемся заниматься. Для этого надо перейти в папку pages и открыть файл Home.vue :
Разработка компонентов для работы со списком документов
Это — просто шапка для страницы списка документов.
Теперь, в той же папке, создадим ещё один файл компонента и дадим ему имя BudgetListBody.vue :
Здесь мы описываем тело страницы, и то, как оно будет выглядеть в различных средах, причём, ориентируемся мы на мобильные устройства.
Теперь, наконец, создадим в той же папке файл BudgetList.vue и добавим в него код соответствующего компонента:
Теперь нужно добавить компонент BudgetList в маршрутизатор:
Как и прежде, тут мы импортируем компоненты, регистрируем их и даём возможность компоненту Home их использовать.
Доработка RESTful API
Вернёмся к серверной части проекта, поработаем над API. Для начала — немного его почистим. Для этого откроем файл user.js из папки services/BudgetManagerAPI/app/api и приведём его к такому виду:
Тут мы убрали маршруты, которые были нужны для старых методов.
Улучшение моделей
Кроме того, создадим ещё несколько моделей. Начнём с модели, которая будет находиться в файле client.js :
Теперь поработаем над моделью, которая будет находиться в файле budget.js :
Откроем файл index.js из папки setup и приведём его к такому виду:
Расширение API
Теперь надо добавить в API методы, предназначенные для новых моделей, поэтому перейдём в папку api и создадим там новый файл client.js :
Тут имеется метод для создания новых клиентов и для получения их полного списка. Эти методы защищены благодаря использования JWT-аутентификации.
Теперь создадим ещё один файл, назовём его budget.js :
Его методы, как и в предыдущем случае, защищены JWT-аутентификацией. Один из этих трёх методов используется для создания новых документов, второй — для получения списка всех документов, связанных с учётной записью пользователя, и ещё один — для получения всех документов по конкретному клиенту.
Создание и защита маршрутов для документов и клиентов
Перейдём в папку routes и создадим там файл budget.js :
Затем создадим файл client.js :
Результаты
Теперь, если мы воспользуемся Postman для регистрации клиентов и документов, связанных с ними, вот что получится:
Итоги и домашнее задание
В этом материале мы исправили некоторые недочёты, поработали над клиентской и серверной частями приложения, начав реализацию его основной логики. В следующий раз мы продолжим развивать проект, в частности, разработаем механизмы для регистрации новых клиентов и создания связанных с ними финансовых документов.
Сейчас же, пока следующая статья из этой серии ещё не вышла, предлагаем всем желающим, в качестве упражнения, сделать форк репозитория автора этого материала и попытаться самостоятельно реализовать средства для регистрации клиентов и документов.
Уважаемые читатели! Если вы решили выполнить домашнюю работу — просим рассказать о том, что получилось.
Изучаем серверное программирование на JavaScript с Node.js
Russian (Pусский) translation by Anton L (you can also view the original English article)
Что такое Node.js?
Чаще всего JavaScript выполняется исключительно на стороне клиента, веб-браузера, но с недавних пор разработчики заинтересовались использование его на сервере, во многом благодаря проекту CommonJS. Из других заметных серверных JavaScript сред стоить отметить Jaxer и Narwhal. Однако Node.js отличается от подобных решений, так как в своей основе он работает следуея концепции событий, нежели потоков. Веб-сервер Apache к примеру, который обрабатывает PHP и другие CGI скрипты, основан на потоках, он создает отдельный поток для каждого запроса. Конечно этот подход работает для большинства приложений, однако модель основанная на потоках не подходит для приложений с продолжительным подключение в реальном времени, на подобии приложений как Friendfeed и Google Wave.
Шаг 1 установка
Node.js работает на Unix подобных системах, к примеру Mac OS X, Linux b FreeBSD. К сожалению Windows не поддерживается на данный момент времени, так что если вы пользователь Windows, можно воспользоваться установленной на Virtualbox Ubuntu. Чтобы это сделать, ознакомтесь со следующим туториалом. Вы должны воспользоваться терминалом для установки и запуска Node.js.
Много сообщений будет показано в терминале во время установки и компиляции Node.js.
Шаг 2 Hello World!
Любое знакомство с новой технологией начинается с туториала «Hello World!», мы создадим простой HTTP сервер, который будет отправлять данное сообщение. Однако для начала, вы должны понять систему модулей Node.js. В Node функционал инкапсулирован в модули и для того, чтобы он работал нам предварительно следует загрузить интересующий нас модуль. Существует множество модулей, со списком можно ознакомиться в Node.js документации. Загрузить модуль можно с помощью функции require :
Запуск этих двух строчек кода также прост, как запуск команды node с именем javascript файла в качестве аргумента.
Этот пример выведет «Hello World!» в терминал, после того, как будет запущен.
Для создания HTTP сервера, нам нужно будет вызвать require для http модуля.
Шаг 3 простой статичный файловый сервер
Хорошо, мы создали HTTP сервер, но кроме «Hello World» ничего не посылается, не важно какой адрес мы введём. Любой HTTP должен быть способен посылать статичные файлы, такие как HTML, изображение и другие файлы. Код ниже делает следующее:
Шаг 4 стриминг твитов в реальном времени
Наконец мы должны создать HTTP сервер для обработки запросов.
Следующие шаги
Надеюсь вам понравился данный туториал. Если у вас есть какие-либо комментарии, можно их оставить здесь, либо отправить сообщение на Twitter. Всего доброго!