O que é HTTP? - O guia para iniciantes

Se você é desenvolvedor Web, ou está começando a sua jornada de desenvolver as suas próprias aplicações, é fundamental compreender o protocolo que permite com que Web como conhecemos exista, o HTTP. Esse guia condensa o conhecimento essencial sobre esse protocolo para você que é iniciante assunto, assim você vai entender o básico e já sair daqui colocando esse conhecimento em prática.

O que é HTTP?

Começando do começo… O HTTP é uma sigla para HyperText Trasnfer Protocol (Protocolo de Transferência de HiperTexto), e ele está presente em toda Web, já que é por meio dele que o seu navegador pode fazer diversas solicitações à um servidor remoto e exibir uma página com diversos elementos. Porém, isso nem sempre foi assim, e para entender o que é o HTTP é preciso antes saber de onde ele surgiu e como está atualmente.

Evolução do HTTP

Nossa história começa em 1991 com o lançamento do HTTP/0.9. Ele foi criado para atender à necessidade da época de trocar informações entre um navegador e um servidor, por isso era extremamente simples. Ele consistia em atender a uma solicitação do navegador e enviar de volta um arquivo HTML.

Após 5 anos, a versão 1.0 chega, e ela é um avanço tremendo em relação à anterior, trazendo diversas novas funcionalidades, como a adição de código de status, o tráfego de dados adicionais por meio headers, novos métodos, e ainda, compatibilidade com diversos formatos de arquivos. E se você não entendeu o que significam esses termos, fica tranquilo, que ao longo desse guia eu vou esclarecer eles, o importante agora é entender que isso é um salto enorme e o HTTP começa a ficar mais robusto.

Apenas 1 ano depois, em 1997, a versão 1.1 é lançada, e o seu principal objetivo é reduzir um problema gravíssimo da 1.0, a latência.

ℹ️ Info: Latência é o tempo, em milissegundos, entre o envio de uma solicitação para um servidor, e a sua resposta.

Na 1.0 o tempo de carregamento de uma página era muito maior, já que o navegador ficava reabrindo conexões sempre que necessitava de um recurso, por isso, o 1.1 trouxe as conexões persistentes, e ainda, o pipelining, que não vou explicar em detalhes aqui, mas ele permite solicitar diversos recursos ao servidor antes mesmo dele responder.

Esses dois recursos “seguraram as pontas” por um tempo, mais especificamente por 18 anos! Mas como a tecnologia está sempre avançando e os sites atuais exibem cada vez mais elementos, era de extrema importância a aprimoração desse protocolo, e ai surge o HTTP/2.

O HTTP/2 é a versão mais utilizada atualmente, sendo presente em cerca de 39,1% da Web, atualmente, em 2023 — dado retirado de: Historical trends in the usage statistics of site elements for websites - W3Techs. Isso ocorre porque ela vai muito além, e reduz significantemente o problema de latência. Para atingir tal feito, o HTTP se torna um protocolo binário, ou seja, baseado em números 0 e 1, o que permite que os dados sejam muito menores. Além disso, trouxe a possibilidade de múltiplas solicitações serem feitas por uma mesma conexão, o que é muito mais eficiente do que os recursos anteriores. Também existem outras mudanças, como a compactação dos headers, priorização de solicitações, adição do recurso de push, que são mais complexos, e por isso não entrarei em detalhes.

E assim chegamos no momento atual, onde HTTP/2 domina grande parte da Web, mas aos poucos vai perdendo espaço para o seu novíssimo sucessor, o HTTP/3 que promete entregar latências ainda mais baixas utilizando uma nova tecnologia, o QUIC.

Os conceitos básicos

Agora que vimos rapidamente a definição do HTTP e passamos pela história de sua evolução, vou esclarecer os aspectos fundamentais desse protocolo:

1. O que são clientes e servidores?
2. O que são solicitações e repostas?
3. HTTP é uma camada de aplicação
4. A falta de estado do HTTP

O que são clientes e servidores?

Esse é um aspecto primordial do HTTP, já que seu funcionamento é pautado na troca de dados entre clientes e servidores, e aqui vou definir com clareza esses dois termos.

Os clientes, também chamados de agente-usuário, são responsáveis por solicitar dados à um servidor, o exemplo mais comum de clientes são os navegadores.

Os servidores, são computadores que recebem e respondem a solicitações. São eles que fornecem arquivos HTML, CSS e JS de uma página, além de outros dados, como informações de um usuário, por exemplo.

ℹ️ Info: Há ainda os chamados proxies, estruturas que mediam a conexão entre cliente e servidor, repassando os dados entre si até chegar no destino final. Eles podem ser transparentes, ou seja, não alteram ou lidam com os dados, ou ainda realizar funções específicas.

O que são solicitações e repostas?

Outro conceito fundamental são as solicitações e repostas.

As solicitações, também chamadas de requisições (requests), são mensagens HTTP enviadas por um cliente. Já as respostas (responses), são as mensagens HTTP enviadas pelo servidor ao cliente, ou seja, sempre que o cliente faz uma solicitação o servidor devolve uma resposta.

Essas mensagens HTTP que citei possuem características específicas, que logo, logo, vamos falar sobre.

HTTP é uma camada de aplicação

O HTTP é uma camada de aplicação, isso é, ele está na posição mais alta em relação as camadas que compõem a Web. Esse conceito de camadas nada mais é que uma forma de representar todos os protocolos e diferentes níveis de operação da Web, e o HTTP está no nível mais alto, o chamado de camada de aplicação.

Imagem que ilustra as diferentes camadas da Web seguindo o modelo TCP/IP.

Aqui vale ressaltar que a forma que o HTTP transfere os dados é determinada pela camada de transporte, no HTTP/2 a camada de transporte é o TCP, já no HTTP/3 é o QUIC, construído sobre o UDP — se você não está entendendo esse monte de sigla que estou citando, recomendo a leitura de outro texto meu falando sobre o funcionamento da Internet.

A falta de estado do HTTP

E por último, o protocolo HTTP é um protocolo stateless. Stateless significa sem estado, **ou seja, o HTTP não guarda informações relativas ao estado atual entre cliente e servidor, cada solicitação é independente. Então se você precisa salvar uma informação, como um login de usuário, vai ter de recorrer à um método alternativo, no entanto, o HTTP apresenta um modelo de sessões, usando os famosos cookies, que são normalmente implementados em cojunto com bancos de dados remotos.

Anatomia de uma mensagem HTTP

E agora sim vamos entrar nos detalhes do HTTP, mostrando a anatomia de mensagens de solicitação e resposta, entendendo o que são elementos como métodos HTTP, códigos de status, headers etc.

Elementos comuns

Antes de começarmos, é importante dizer que uma mensagem de solicitação e resposta são diferentes, porém, possuem alguns elementos em comum:

1. Simplicidade: toda mensagem HTTP leva em consideração a simplicidade, sendo facilmente lida e compreendida pelo ser humano, como veremos nos exemplos abaixo.

2. Headers: toda mensagem HTTP possui os chamados headers, ou cabeçalhos, que nada mais são do que informações adicionais de contexto e metadata, como por exemplo, qual navegador o cliente está usando, o tipo arquivo que está sendo transferido, linguagens aceitas etc., além de headers personalizados estabelecidos entre o cliente e servidor.

   

   Exemplo de headers HTTP em uma solicitação. Eles seguem esse formato de chave: valor e dessa forma conseguem armazenar diferentes informações.

3. Corpo: algumas mensagens HTTP podem incluir ou não o corpo, nele o cliente pode fornecer informações ao servidor, como o cadastro de um novo usuário, ou receber informações do servidor, como a sessão de um usuário. O conteúdo do corpo HTTP pode ser de diferentes formatos, seja JSON, HTML, CSS, Javascript etc.

   

   Exemplo de um Corpo HTTP que contem informações sobre um usuário em formato JSON.

Com esses 3 elementos comuns em mente, podemos partir para os casos específicos das mensagens de solicitação e resposta.

Mensagem de solicitação

Quando o seu navegador faz uma solicitação ela se parece com essa imagem abaixo, e ela dividida em diversos elementos:

1. Método: é um verbo em inglês que determina qual tipo de ação essa solicitação vai fazer, nesse exemplo é o método GET, que “pega” informações do servidor. Existem diversos outros métodos, como o POST, que “posta” informações no servidor, ou ainda o PUT, DELETE, OPTIONS, HEAD etc. — se quiser conferir a lista completa acesse a referência no MDN.
2. Caminho: é o caminho relativo do recurso solicitado. Para melhor compreensão, vamos pegar como exemplo o URL https://open.spotify.com/v1/artists/6PfSUFtkMVoDkx4MQkzOi3, o caminho relativo dele é tudo o que vem depois o protocolo (https://) e domínio (open.spotify.com), ou seja, /v1/artists/6PfSUFtkMVoDkx4MQkzOi3. Nesse caso o recurso que está sendo solicitado é um artista com ID 6PfSUFtkMVoDkx4MQkzOi3.
3. Versão: essa é a versão do HTTP que está sendo utilizada.
4. Headers: o cojunto de dados adicionais que essa solicitação em específico precisa, eles mudam de acordo com a necessidade, mas nesse exemplo temos:
   • Host para identificar o domínio solicitado;
   • User-Agent para identificação do navegador;
   • Accept para definir o conteúdo aceito com resposta;
   • Authorization para definir o token de autorização do usuário.
   Aconselho conferir a lista completa, também no MDN.

Mensagem de resposta

E agora vamos olhar a resposta da nossa solicitação, que se parece com a imagem abaixo e possui alguns outros elementos:

1. Versão: essa é a versão do HTTP que está sendo utilizada.

2. Código de status: é um código que identifica se a solicitação foi feita com sucesso. Existem diversos desses, mas dá pra dividi-los em categorias de acordo com intervalos:

   • 100 até 199 - Informativo
   • 200 até 299 - Sucesso
   • 300 até 399 - Redirecionamento
   • 400 até 499 - Erros do cliente (o cliente realizou uma solicitação invalida)
   • 500 até 599 - Erros do servidor (erro interno do servidor)

   Se quiser conferir a lista completa, o MDN, de novo — lá tem tudo!

3. Headers: novamente o cojunto de dados necessários, só que dessa vez na resposta.

4. Corpo: o elemento opcional que nesse caso apareceu retornando os detalhes do artista que foi solicitado em formato JSON.

💡 Dica: Para você ver como o navegador lida com essas mensagens HTTP, abra as ferramentas de desenvolvedor do seu navegador (normalmente F12 ou Ctrl + Shift + I) e vá para aba “Rede”. Por lá, é possível ver todas solicitações que seu navegador fez, em cojunto com a respostas.

Colocando o conhecimento em prática!

Agora que você chegou até aqui e adquiriu todo esse conhecimento sobre o HTTP, o que acha de colocar a mão na massa e ver como ele funciona na prática?

Para isso, vamos usar o site HTTPie para fazer as nossas próprias solicitações para um banco de imagens de cachorros, que retorna uma imagem aleatória, o Dog API.

1. Passo - Entendo a interface

Ao abrir o HTTPie você vai se deparar com a seguinte tela, que pode ser dividida em 3 seções principais:

1. Barra de endereços: Aqui onde você vai colocar o URL para o recurso que quer solicitar juntamente com o método HTTP que vai usar na solicitação. Aqui, vamos usar apenas o GET, então não precisa mudar.
2. Dados da solicitação: Nessa seção você pode mudar os diversos dados de uma solicitação, como os headers, ou adicionar um corpo. Você pode deixar essa seção vazia.
3. Resultados: Assim que você fazer uma solicitação os resultados dela vão ser exibidos aqui, seguindo o mesmo padrão das mensagens HTTP que vimos antes.

2. Passo - A primeira solicitação

Como disse, vamos fazer solicitações para um banco de imagens de cachorros, e o URL de onde vamos solicitar as imagens é: https://dog.ceo/api/breeds/image/random, copia e cola ele na barra de endereços, depois e so apertar “Send” para fazer uma solicitação ao servidor.

3. Passo - Entendendo a resposta

E simples assim temos a nossa primeira solicitação clap, clap!

Essa solicitação retornou uma resposta, e você provavelmente percebeu que ela que segue o mesmo formato das mensagens HTTP que vimos antes, com a versão do HTTP, código de status, headers e o corpo.

E o mais importante! Não esqueça que a nossa imagem está no corpo, para abrir ela é só copiar o URL da imagem do parâmetro “message” e colar ele no seu navegador.

4. Passo - Indo além…

Se você quiser explorar mais funcionalidades desse banco de dados você pode ver mais informações acessando esse site: https://dog.ceo/dog-api/
E um spoiler, tem como pegar foto de cachorro pela raça, então fica aí o desafio: fazer uma solicitação que retorne uma imagem aleatória de um mini poodle :)

Conclusão

E com isso, chegamos ao final do nosso guia! Onde começamos vendo uma breve história da evolução HTTP, desde sua versão 0.9 até o HTTP/3, pontuando os principais avanços de cada uma delas. Logo depois, entramos nos conceitos básicos que regem o funcionamento do HTTP, definido alguns de seus termos e características, partimos para as mensagens, observando cada elemento delas, e ao final, para fixar todo o conhecimento, fizemos a nossa primeira solicitação HTTP.

Links

Caso queira se aprofundar no tema, vou deixar os links que consultei para fazer escrever isso aqui:

Everything you need to know about HTTP - cs.fyi

Uma visão geral do HTTP - MDN Web Docs

O que é HTTP? - Cloudflare

Obrigado por ter lido <3