The latest articles on Forem by William Dantas (@rikokami). https://forem.com/rikokami https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F352295%2F514b3f0b-c28c-4ae5-9c1c-7b9080181a2d.jpg https://forem.com/rikokami en William Dantas Wed, 17 Apr 2024 04:31:57 +0000 https://forem.com/rikokami/parte-1-protocolo-http-195f https://forem.com/rikokami/parte-1-protocolo-http-195f <p>Olá! Aqui é meu primeiro post e apenas vou dissecar um pouco sobre o protocolo HTTP. </p> <blockquote> <p>Requisitos </p> <ul> <li>Conhecimento básico em terminal</li> <li>Noções em Node.js</li> </ul> </blockquote> <h1> Conhecendo o HTTP </h1> <p>Com uma página aberta em um navegador, ao inspecionar um elemento notamos que caímos no famoso <strong>devtools</strong>. Na parte superior podemos selecionar a aba <code>Network</code> ou <code>Rede</code> onde encontraremos uma área em branco onde serão exibidos diversos logs com informações e mensagens do HTTP. Ao filtrar somente por requisições <code>FETCH/XHR</code>, teremos então somente os endpoint chamados para a api, sem a presença de arquivos como html, css, js, entre outros.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhl87z7e9ogor2afiabkp.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhl87z7e9ogor2afiabkp.png" alt="devtools do navegador indicando a aba de network" width="800" height="333"></a></p> <p>Ao realizar o login, notamos que na mesma listagem aparece o endpoint, informando o nome pra onde chamou na API.</p> <blockquote> <p>No caso aqui é uma API REST.</p> </blockquote> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa2k6c6m0vueyoyhlwdte.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa2k6c6m0vueyoyhlwdte.png" alt="devtools do navegador indicando a aba de network" width="800" height="293"></a></p> <p>Ao clicar notamos diversas informações.</p> <p>Na aba de <strong>HEADERS</strong> temos alguns itens que iremos abordar num futuro que são:</p> <ul> <li>Request URL</li> <li>Request Method</li> <li>Status Code</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm7j0flz5rkc53ejnk0tq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm7j0flz5rkc53ejnk0tq.png" alt="devtools indicando os Headers do endpoint selecionado" width="800" height="621"></a></p> <p>Existem outras, mas essas são geralmente as mais observadas.</p> <p>Na aba de <strong>PAYLOAD</strong> temos um JSON que corresponde exatamente as informações preenchidas no frontend pelo usuário</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl99cf998o18m4fahukb6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl99cf998o18m4fahukb6.png" alt="devtools indicando os Payload do endpoint selecionado" width="800" height="222"></a></p> <p>Com isso, observamos o HTTP sendo usado no frontend.</p> <p>Para identificar o HTTP trabalhando no backend, basta ir ao terminal local que irá aparecer um log como:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>POST /public/login 200 1.474ms - 347 </code></pre> </div> <p>Note que o <strong>200</strong> apareceu aqui novamente, além de outras informações como o tempo total da requisição. O importante é o começo <code>POST /public/login</code>.</p> <p>Esta informação veio do frontend. O numero 200 foi gerado pelo backend. Isso evidencia que o HTTP é sempre uma interação entre duas entidades, o cliente e o servidor.</p> <p>Então, aqui vimos brevemente como o HTTP que corresponde a sigla <strong>Hypertext Transfer Protocol</strong>, ou seja, <strong>Protocolo de Transferência de Hipertexto</strong>, é usado para transferir dados na web.</p> <p>É obrigatório que para o uso do HTTP, tenha duas entidades: um cliente e um servidor.</p> <h2> Arquitetura do HTTP </h2> <p>Alguns parâmetros do HTTP são perceptíveis no navegador, mas como ocorre essa comunicação? A resposta está na camada de aplicação da arquitetura da internet.</p> <p>Essa camada é composta pelo browser, então toda vez que estamos utilizando aplicativos ou navegadores, estamos utilizando esta camada.</p> <p>Existem regras para que aconteça essa comunicação. Se o cliente mandar uma mensagem e o servidor não responder, não funciona.</p> <h2> Regras do protocolo HTTP </h2> <ul> <li><p>A comunicação sempre envolve duas entidades: um cliente e um servidor.</p></li> <li><p>A conversa é iniciada pelo cliente. O servidor nunca inicia a comunicação enviando informações ao cliente sem ser solicitado.</p></li> <li><p>Depois que o cliente envia uma mensagem, o servidor responde com as informações solicitadas.</p></li> </ul> <p>O HTTP opera sobre o <strong>TCP (Transmission Control Protocol)</strong>, que é um protocolo da camada de transporte essencial para garantir a entrega bem-sucedida das mensagens HTTP ao destinatário.</p> <p>Basicamente todo dispositivo que se conecta à internet possivelmente utiliza o protocolo HTTP (existem exceções).</p> <h2> Conclusão </h2> <p>Em resumo, o HTTP é um protocolo essencial que opera na camada de aplicação da arquitetura da internet. Ele facilita a comunicação entre o cliente (geralmente um navegador web) e o servidor, permitindo a troca de informações na forma de documentos HTML, imagens, arquivos de vídeo, entre outros. O HTTP é um protocolo sem estado, tratando cada solicitação de forma independente. Este post explorou como o HTTP é usado tanto no frontend quanto no backend, e discutiu algumas das regras fundamentais que governam a comunicação HTTP. Embora este post tenha fornecido uma visão geral do HTTP, há muito mais a aprender sobre este protocolo crucial e como ele suporta a comunicação na web.</p> <p>--</p> <p>Para manter este post conciso e útil, vou encerrar aqui nossa exploração do Protocolo HTTP. No entanto, há muito mais a discutir sobre esse tema fascinante. Nos próximos posts, pretendo abordar questões como alternativas quando o HTTP pode não ser a melhor opção, a distinção entre URL, URI e DNS, e técnicas para depurar métodos HTTP de forma eficaz.</p> <p>Fique ligado para as próximas atualizações, enquanto continuamos a desvendar os mistérios da comunicação na web juntos.</p> <p>Até breve! Se você gostou deste post, por favor, deixe um like.</p> http beginners braziliandevs webdev