[Перевод] Руководство по Node.js, часть 8: протоколы HTTP и WebSocket02.10.2018 13:18

Node.js — это серверная платформа. Основная задача сервера — как можно быстрее и эффективнее обрабатывать запросы, поступающие от клиентов, в частности — от браузеров. Восьмая часть перевода руководства по Node.js, которую мы публикуем сегодня, посвящена протоколам HTTP и WebSocket.

hedi2j_qyfbnwfo_jqnnqd3ub6o.png

[Советуем почитать] Другие части цикла


Что происходит при выполнении HTTP-запросов?


Поговорим о том, как браузеры выполняют запросы к серверам с использованием протокола HTTP/1.1.

Если вы когда-нибудь проходили собеседование в IT-сфере, то вас могли спросить о том, что происходит, когда вы вводите нечто в адресную строку браузера и нажимаете Enter. Пожалуй, это один из самых популярных вопросов, который встречается на подобных собеседованиях. Тот, кто задаёт подобные вопросы, хочет узнать, можете ли вы объяснить некоторые довольно-таки простые концепции и выяснить, понимаете ли вы принципы работы интернета.

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

▍Протокол HTTP


Современные браузеры способны отличать настоящие URL-адреса, вводимые в их адресную строку, от поисковых запросов, для обработки которых обычно используется заданная по умолчанию поисковая система. Мы будем говорить именно об URL-адресах. Если вы введёте в строку браузера адрес сайта, вроде flaviocopes.com, браузер преобразует этот адрес к виду http://flaviocopes.com, исходя из предположения о том, что для обмена данными с указанным ресурсом будет использоваться протокол HTTP. Обратите внимание на то, что в Windows то, о чём мы будем тут говорить, может выглядеть немного иначе, чем в macOS и Linux.

▍Фаза DNS-поиска


Итак, браузер, начиная работу по загрузке данных с запрошенного пользователям адреса, выполняет операцию DNS-поиска (DNS Lookup) для того, чтобы выяснить IP-адрес соответствующего сервера. Символьные имена ресурсов, вводимые в адресную строку, удобны для людей, но устройство интернета подразумевает возможность обмена данными между компьютерами с использованием IP-адресов, которые представляют собой наборы чисел наподобие 222.324.3.1 (для протокола IPv4).

Сначала, выясняя IP-адрес сервера, браузер заглядывает в локальный DNS-кэш для того, чтобы узнать, не выполнялась ли недавно подобная процедура. В браузере Chrome, например, есть удобный способ посмотреть DNS-кэш, введя в адресной строке следующий адрес: chrome://net-internals/#dns.

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

▍Функция gethostbyname


Функция gethostbyname сначала проверяет файл hosts, который, в macOS или Linux, можно найти по адресу /etc/hosts, для того, чтобы узнать, можно ли, выясняя адрес сервера, обойтись локальными сведениями.

Если локальными средствами разрешить запрос на выяснение IP-адреса сервера не удаётся, система выполняет запрос к DNS-серверу. Адреса таких серверов хранятся в настройках системы.

Вот пара популярных DNS-серверов:

  • 8.8.8.8: DNS-сервер Google.
  • 1.1.1.1: DNS-сервер CloudFlare.


Большинство людей используют DNS-сервера, предоставляемые их провайдерами. Браузер выполняет DNS-запросы с использованием протокола UDP.

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

IP-адрес, соответствующий интересующему нас доменному имени, может иметься в кэше DNS-сервера. Если это не так — он обратиться к корневому DNS-серверу. Система корневых DNS-серверов состоит из 13 серверов, от которых зависит работа всего интернета.

Надо отметить, что корневому DNS-серверу неизвестны соответствия между всеми существующими в мире доменными именами и IP-адресами. Но подобным серверам известны адреса DNS-серверов верхнего уровня для таких доменов, как .com, .it, .pizza, и так далее.

Получив запрос, корневой DNS-сервер перенаправляет его к DNS-серверу домена верхнего уровня, к так называемому TLD-серверу (от Top-Level Domain).

Предположим, браузер ищет IP-адрес для сервера flaviocopes.com. Обратившись к корневому DNS-серверу, браузер получит у него адрес TLD-сервера для зоны .com. Теперь этот адрес будет сохранён в кэше, в результате, если будет нужно узнать IP-адрес ещё какого-нибудь URL из зоны .com, к корневому DNS-серверу не придётся обращаться снова.

У TLD-серверов есть IP-адреса серверов имён (Name Server, NS), средствами которых и можно узнать IP-адрес по имеющемуся у нас URL. Откуда NS-сервера берут эти сведения? Дело в том, что если вы покупаете домен, доменный регистратор отправляет данные о нём серверам имён. Похожая процедура выполняется и, например, при смене хостинга.

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

  • ns1.dreamhost.com
  • ns2.dreamhost.com
  • ns3.dreamhost.com


Для выяснения IP-адреса по URL, в итоге, обращаются к таким серверам. Именно они хранят актуальные данные об IP-адресах.

Теперь, после того, как нам удалось выяснить IP-адрес, стоящий за введённым в адресную строку браузера URL, мы переходим к следующему шагу нашей работы.

▍Установление TCP-соединения


Узнав IP-адрес сервера, клиент может инициировать процедуру TCP-подключения к нему. В процессе установления TCP-соединения клиент и сервер передают друг другу некоторые служебные данные, после чего они смогут обмениваться информацией. Это означает, что, после установления соединения, клиент сможет отправить серверу запрос.

▍Отправка запроса


Запрос представляет собой структурированный в соответствии с правилами используемого протокола фрагмент текста. Он состоит из трёх частей:

  • Строка запроса.
  • Заголовок запроса.
  • Тело запроса.


Строка запроса


Строка запроса представляет собой одну текстовую строку, в которой содержатся следующие сведения:

  • Метод HTTP.
  • Адрес ресурса.
  • Версия протокола.


Выглядеть она, например, может так: 

GET / HTTP/1.1


Заголовок запроса


Заголовок запроса представлен набором пар вида поле: значение. Существуют 2 обязательных поля заголовка, одно из которых — Host, а второе — Connection. Остальные поля необязательны.

Заголовок может выглядеть так: 

Host: flaviocopes.com
Connection: close


Поле Host указывает на доменное имя, которое интересует браузер. Поле Connection, установленное в значение close, означает, что соединение между клиентом и сервером не нужно держать открытым.

Среди других часто используемых заголовков запросов можно отметить следующие:

  • Origin
  • Accept
  • Accept-Encoding
  • Cookie
  • Cache-Control
  • Dnt


На самом деле, их существует гораздо больше.

Заголовок запроса завершается пустой строкой.

Тело запроса


Тело запроса необязательно, в GET-запросах оно не используется. Тело запроса используется в POST-запросах, а также в других запросах. Оно может содержать, например, данные в формате JSON.

Так как сейчас речь идёт о GET-запросе, тело запроса будет пустым, с ним мы работать не будем.

▍Ответ


После того, как сервер получает отправленный клиентом запрос, он его обрабатывает и отправляем клиенту ответ.

Ответ начинается с кода состояния и с соответствующего сообщения. Если запрос выполнен успешно, то начало ответа будет выглядеть так: 

200 OK


Если что-то пошло не так, тут могут быть и другие коды. Например, следующие:

  • 404 Not Found
  • 403 Forbidden
  • 301 Moved Permanently
  • 500 Internal Server Error
  • 304 Not Modified
  • 401 Unauthorized


Далее в ответе содержится список HTTP-заголовков и тело ответа (которое, так как запрос выполняет браузер, будет представлять собой HTML-код).

Разбор HTML-кода


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

  • CSS-файлы.
  • Изображения.
  • Значок веб-страницы (favicon).
  • JavaScript-файлы.


То, как именно браузер выводит страницу, к нашему разговору не относится. Главное, что нас тут интересует, заключается в том, что вышеописанный процесс запроса и получения данных используется не только для HTML-кода, но и для любых других объектов, передаваемых с сервера в браузер с использованием протокола HTTP.

О создании простого сервера средствами Node.js


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

Выполнение HTTP-запросов средствами Node.js


Для выполнения HTTP-запросов средствами Node.js используется соответствующий модуль. В приведённых ниже примерах применяется модуль https. Дело в том, что в современных условиях всегда, когда это возможно, нужно применять именно протокол HTTPS.

▍Выполнение GET-запросов


Вот пример выполнения GET-запроса средствами Node.js: 

const https = require('https')
const options = {
  hostname: 'flaviocopes.com',
  port: 443,
  path: '/todos',
  method: 'GET'
}
const req = https.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`)
  res.on('data', (d) => {
    process.stdout.write(d)
  })
})
req.on('error', (error) => {
  console.error(error)
})
req.end()


▍Выполнение POST-запроса


Вот как выполнить POST-запрос из Node.js: 

const https = require('https')
const data = JSON.stringify({
  todo: 'Buy the milk'
})
const options = {
  hostname: 'flaviocopes.com',
  port: 443,
  path: '/todos',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': data.length
  }
}
const req = https.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`)
  res.on('data', (d) => {
    process.stdout.write(d)
  })
})
req.on('error', (error) => {
  console.error(error)
})
req.write(data)
req.end()


▍Выполнение PUT-запросов и DELETE-запросов


Выполнение таких запросов выглядит так же, как и выполнение POST-запросов. Главное отличие, помимо смыслового наполнения таких операций, заключается в значении свойства method объекта options.

▍Выполнение HTTP-запросов в Node.js с использованием библиотеки Axios


Axios — это весьма популярная JavaScript-библиотека, работающая и в браузере (сюда входят все современные браузеры и IE, начиная с IE8), и в среде Node.js, которую можно использовать для выполнения HTTP-запросов.

Эта библиотека основана на промисах, она обладает некоторыми преимуществами перед стандартными механизмами, в частности, перед API Fetch. Среди её преимуществ можно отметить следующие:

  • Поддержка старых браузеров (для использования Fetch нужен полифилл).
  • Возможность прерывания запросов.
  • Поддержка установки тайм-аутов для запросов.
  • Встроенная защита от CSRF-атак.
  • Поддержка выгрузки данных с предоставлением сведений о ходе этого процесса.
  • Поддержка преобразования JSON-данных.
  • Работа в Node.js


Установка


Для установки Axios можно воспользоваться npm: 

npm install axios


Того же эффекта можно достичь и при работе с yarn: 

yarn add axios


Подключить библиотеку к странице можно с помощью unpkg.com:


API Axios


Выполнить HTTP-запрос можно, воспользовавшись объектом axios: 

axios({
  url: 'https://dog.ceo/api/breeds/list/all',
  method: 'get',
  data: {
    foo: 'bar'
  }
})


Но обычно удобнее пользоваться специальными методами:

  • axios.get()
  • axios.post()


Это похоже на то, как в jQuery, вместо $.ajax() пользуются $.get() и $.post().

Axios предлагает отдельные методы и для выполнения других видов HTTP-запросов, которые не так популярны, как GET и POST, но всё-таки используются:

  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()


В библиотеке имеется метод для выполнения запроса, предназначенного для получения лишь HTTP-заголовков, без тела ответа:

  • axios.head()


Запросы GET


Axios удобно использовать с применением современного синтаксиса async/await. В следующем примере кода, рассчитанном на Node.js, библиотека используется для загрузки списка пород собак из API Dog. Здесь применяется метод axios.get() и осуществляется подсчёт пород: 

const axios = require('axios')
const getBreeds = async () => {
  try {
    return await axios.get('https://dog.ceo/api/breeds/list/all')
  } catch (error) {
    console.error(error)
  }
}
const countBreeds = async () => {
  const breeds = await getBreeds()
  if (breeds.data.message) {
    console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)
  }
}
countBreeds()


То же самое можно переписать и без использования async/await, применив промисы: 

const axios = require('axios')
const getBreeds = () => {
  try {
    return axios.get('https://dog.ceo/api/breeds/list/all')
  } catch (error) {
    console.error(error)
  }
}
const countBreeds = async () => {
  const breeds = getBreeds()
    .then(response => {
      if (response.data.message) {
        console.log(
          `Got ${Object.entries(response.data.message).length} breeds`
        )
      }
    })
    .catch(error => {
      console.log(error)
    })
}
countBreeds()


Использование параметров в GET-запросах


GET-запрос может содержать параметры, которые в URL выглядят так: 

https://site.com/?foo=bar


При использовании Axios запрос подобного рода можно выполнить так: 

axios.get('https://site.com/?foo=bar')


Того же эффекта можно достичь, настроив свойство params в объекте с параметрами: 

axios.get('https://site.com/', {
  params: {
    foo: 'bar'
  }
})


Запросы POST


Выполнение POST-запросов очень похоже на выполнение GET-запросов, но тут, вместо метода axios.get(), используется метод axios.post(): 

axios.post('https://site.com/')


В качестве второго аргумента метод post принимает объект с параметрами запроса: 

axios.post('https://site.com/', {
  foo: 'bar'
})


Использование протокола WebSocket в Node.js


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

Протокол WebSocket поддерживают все современные браузеры.

▍Отличия от HTTP


HTTP и WebSocket — это очень разные протоколы, в которых используются различные подходы к обмену данными. HTTP основан на модели «запрос — ответ»: сервер отправляет клиенту некие данные после того, как они будут запрошены. В случае с WebSocket всё устроено иначе. А именно:

  • Сервер может отправлять сообщения клиенту по своей инициативе, не дожидаясь поступления запроса от клиента.
  • Клиент и сервер могут обмениваться данными одновременно.
  • При передаче сообщения используется крайне малый объём служебных данных. Это, в частности, ведёт к низким задержкам при передаче данных.


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

▍Защищённая версия протокола WebSocket


Существует небезопасная версия протокола WebSocket (URI-схема ws://), которая напоминает, в плане защищённости, протокол http://. Использования ws:// следует избегать, отдавая предпочтение защищённой версии протокола — wss://.

▍Создание WebSocket-соединения


Для создания WebSocket-соединения нужно воспользоваться соответствующим конструктором: 

const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)


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

connection.onopen = () => {
  //...

}


Для обработки ошибок используется обработчик события onerror: 

connection.onerror = error => {
  console.log(`WebSocket error: ${error}`)
}


▍Отправка данных на сервер


После открытия WebSocket-соединения с сервером ему можно отправлять данные. Сделать это можно, например в коллбэке onopen: 

connection.onopen = () => {
  connection.send('hey')
}


▍Получение данных с сервера


Для получения с сервера данных, отправленных с использованием протокола WebSocket, можно назначить коллбэк onmessage, который будет вызван при получении события message: 

connection.onmessage = e => {
  console.log(e.data)
}


▍Реализация WebSocket-сервера в среде Node.js


Для того чтобы реализовать WebSocket-сервер в среде Node.js, можно воспользоваться популярной библиотекой ws. Мы применим её для разработки сервера, но она подходит и для создания клиентов, и для организации взаимодействия между двумя серверами.

Установим эту библиотеку, предварительно инициализировав проект: 

yarn init
yarn add ws


Код WebSocket-сервера, который нам надо написать, довольно-таки компактен: 

constWebSocket = require('ws')
const wss = newWebSocket.Server({ port: 8080 })
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received message => ${message}`)
  })
  ws.send('ho!')
})


Здесь мы создаём новый сервер, который прослушивает стандартный для протокола WebSocket порт 8080 и описываем коллбэк, который, когда будет установлено соединение, отправляет клиенту сообщение ho! и выводит в консоль сообщение, полученное от клиента.

Вот рабочий пример WebSocket-сервера, а вот — клиент, который может с ним взаимодействовать.

Итоги


Сегодня мы поговорили о механизмах сетевого взаимодействия, поддерживаемых платформой Node.js, проведя параллели с аналогичными механизмами, применяемыми в браузерах. Нашей следующей темой будет работа с файлами.

Уважаемые читатели! Пользуетесь ли вы протоколом WebSocket в своих веб-приложениях, серверная часть которых создана средствами Node.js?

1ba550d25e8846ce8805de564da6aa63.png

© Habrahabr.ru