Досконально понимать HTTP-протокол

внешний интерфейс JavaScript опрос
Досконально понимать HTTP-протокол

🔥 Популярные авторы 2021 года Поддержите автора одним голосом【Ткнуть сильно】🔥

В 2021 году для всех будет создано больше анимированных текстов

Эта статья участвует в "Сетевой протокол должен знать должен знать"Требуют документов

Навыки, которые вы получите

  • Как флиртовать с сервером Baidu — используйте свой собственный HTTP-протокол, написанный от руки

  • Как обмануть браузер Chrome — HTTP-протокол своим почерком

  • Понимать взаимосвязь между протоколом HTTP и протоколом TCP.

  • Понять мотивацию изобретения протокола HTTP.

  • Напишите HTTP-сообщение слово за словом

Why

Говорят, что в мире фронтенда есть очень известный вопрос для интервью, который называется

что происходит, когда вы вводите URL

Если ответ прост, его можно условно разделить на

  • разрешение DNS

  • TCP-соединение

  • отправить HTTP-запрос

  • HTTP-ответ сервера

  • Браузерный парсинг и рендеринг

  • соединение завершено

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

Сегодня дядя Ран просто хочет поговорить об одной его части.

Это то, как отправлять HTTP-запросы поверх протокола TCP и как отвечать на HTTP-запросы.

правила игры

Практика — единственный критерий проверки истины.

Итак, как мы можем убедиться, что мы действительно можем реализовать протокол HTTP?

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

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

  • [Запрос запроса] стандарт проверки: вы можете получить ответ от Baidu
  • [Ответ ответа] Действительные критерии: доступен в браузере Chrome.

Где - Основы сети и TCP/IP

Первый шаг — выяснить, где мы должны делать эту игру, или это просто битва между богами и богами.

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

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

image_12322

В компьютерном мире, если сложная проблема обычно решается, она решается слоями.

image-20211206160754216

image-20211206160821149

На самом деле это эталонная модель OSI, и на самом деле наш нынешний мир Интернета является приземлением этой теоретической модели, называемой протоколом TCP/IP.

image-20211206161023709

image-20211206161334345

Что - Что такое TCP и HTTP

Что такое TCP-связь?

Фактически на транспортном уровне существует два метода связи: TCP и UDP.

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

image-20211206161847760

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

image-20211206162710957

Для языков программирования высокого уровня (C++, Java, JS) вообще возможно выполнить передачу данных на основе того, что называется сокетом.

Программа связи TCP

Возьмем небольшой пример Node.

Client

var net = require("net");
var client = net.connect(3000, () => {
  console.log("连接到服务器！");
});

let n = 3;
const interval = setInterval(() => {
  const msg = "Time " + new Date().getTime();
  console.log("客户端发送: " + msg);
  client.write(msg);
  if (n-- === 0) {
    client.end();
    clearInterval(interval);
  }
}, 500);

client.on("end", function () {
  console.log("断开与服务器的连接");
});

Server

var net = require("net");
var server = net.createServer((connection) => {
  console.log("client connected");
  connection.on("data", (data) => {
    console.log("Server接收: " + data.toString());
  });
  connection.on("end", function () {
    console.log("客户端关闭连接");
  });
  connection.end("Hello I am \r\n");
});
server.listen(3000, function () {
  console.log("server is listening at 3000");
});

Kapture 2021-12-06 at 17.06.25

Зачем нужен протокол HTTP

Теперь, когда мы уже знаем, что данные можно отправлять и получать через TCP, предположим, что мы хотим сделать что-то вроде форумной BBS.

image-20211206171337011

Обычно мы можем сравнить сервер BBS с библиотекой, в которой хранятся текст, изображения и даже звук и видео.

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

image-20211206171913855

image-20211206171757847

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

Протокол передачи гипертекста (английский:HyperText Transfer PRotocol, Аббревиатура: http - это протокол накладной слой для распределенных, совместных и гипермедийских информационных систем. HTTP является основой для передачи данных Всемирной паутины.

Давайте сначала кратко рассмотрим протокол HTTP, чтобы увидеть, очень ли он похож на список заимствований.

image-20211206172701732

Правила HTTP-протокола

Давайте подробнее рассмотрим протокол HTTP.

Чтобы увидеть, как выглядит HTTP-пакет, используйте команду curl

image-20211206183005813

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

image-20211206181457645

Разбирать HTTP-пакеты

Затем мы приступили к анализу HTTP-сообщения с кодом.

Первый шаг, разделенный запрос, заголовок, заголовок, тело запроса

  • Строка запроса: это первая строка - символы до первого возврата каретки и перевода строки являются строкой запроса
  • Заголовок: после строки запроса, пока не встретится пустая строка — фактически встречаются два последовательных возврата каретки и перевода строки.
  • Тело запроса: остальное
 private parse(): void {
    this.httpMessage = {} as HttpMessage;
    const messages = this.message.split('\r\n');
    const [head] = messages;
    const headers = messages.slice(1, -2);
    const [body] = messages.slice(-1);
    this.parseHead(head);
    this.parseHeaders(headers);
    this.parseBody(body);
  }

Второй шаг — разобрать строку запроса

Структура запроса: метод запроса + [пробел] + URL + [пробел] + номер версии.

private parseHead(headStr) {
    const [method, url, version] = headStr.split(' ');
    this.httpMessage.method = method;
    this.httpMessage.url = url;
    this.httpMessage.version = version;
  }

Третий шаг — разобрать заголовок

Строение головы:

KEY_A : VALUE

KEY_A : VALUE

KEY_C : VALUE

function parseHeaders(headers) {
    this.httpMessage.headers = {};
    for (let i = 0; i < headers.length; i++) {
      const header = headers[i];
      const [key, value] = header.split(":");
      key = key.toLocaleLowerCase();
      value = value.trim();
      this.httpMessage.headers[key] = value;
    }
  }

тело запроса

Тело запроса — остальное без парсинга

Собирать HTTP-ответы

Процесс сборки фактически в свою очередь над процессом.

function format() {
  const head = `${this.version} ${this.status} ${this.message}`;
  let headers = '';
  for (let key in this.headers) {
  const value = this.headers[key];
  headers += `${key.toLocaleLowerCase()}: ${value}\r\n`;
  }
  const combineData = [head, headers, this.body].join('\r\n');
  return combineData;
}

Внедрите поисковый робот HTTP для доступа к домашней странице Baidu.

Давайте воспользуемся только что написанной функцией HTTP, чтобы собрать сообщение для тизера [Baidu].

const net = require("net");

const createFormater = require("./http/formater");
const formater = createFormater("request");
const req = {
  method: "GET",
  url: "/",
  version: "HTTP/1.1",
  headers: { "user-agent": "curl/7.71.1", accept: "*/*" },
  body: "",
};

console.log(formater.format(req))

const client = net.connect(80, "www.baidu.com", () => {
  console.log("连接到服务器！");
  client.write(formater.format(req));
});
client.on("data", function (data) {
  console.log(data.toString());
  client.end();
});
client.on("end", function () {
  console.log("断开与服务器的连接");
});

Обратите внимание, что эта программа не использует протокол http, а только отправляет tcp-запрос в Baidu, и используемое сообщение также реализовано мной только что. В результате сервер Baidu действительно ответил. Успех флирта показывает, что наш HTTP-протокол хорошо реализован.

Kapture 2021-12-06 at 23.42.40

Внедрите HTTP-сервер, к которому может получить доступ Chrome.

Попробуем еще раз, выдержит ли эта программа испытание хромом

const net = require("net");

const createFormater = require("./http/formater");
const formater = createFormater("response");
const res = {
  version: "HTTP/1.1",
  status: "200",
  message: "OK",
  headers: {
    date: "Sat, 04 Dec 2021 14",
    connection: "keep-alive",
    "keep-alive": "timeout=5",
    // "content-length": "19",
  },
  body: "<h1> Hello HTTP<h1>",
};

const server = net.createServer(function (connection) {
  console.log("client connected");
  connection.on("data", (data) => {
    console.log(data.toString());
  });
  connection.on("end", function () {
    console.log("客户端关闭连接");
  });
  connection.end(formater.format(res));
});
server.listen(3000, function () {
  console.log("server is listening");
});

Kapture 2021-12-06 at 23.48.55

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

Сводный обзор

В настоящее время, хотя протокол HTTP реализован просто, он все еще очень прост и будет добавлен в будущем.

  • Изображение, видео, аудиоданные
  • аутентификация сеанса cookie
  • реализация кэша
  • Загрузка подпакета
  • Трубопровод
  • Http2.0
  • HTTPS и RSA-сертификаты

Мы все будем реализованы

Жду последующее обновление колеса дяди Рана

🔥 Популярные авторы 2021 года Поддержите автора одним голосом【Ткнуть сильно】🔥

В 2021 году для всех будет создано больше анимированных текстов

Поддержите дядю Рана

Подписаться на Full Stack Uncle Ran

Последние статьи (Спасибо за вашу поддержку и поддержку 🌹🌹🌹)

Добро пожаловать в Paizhuan, давайте вместе обсудим более элегантную реализацию

Категории