WEB開発入門、サーバーとクライアント、http通信の流れ

httpのイメージ画像 技術コラム

WEBサイトや、チャットボットなどのWEBサービスを開発する為には、まず初めに、http通信の仕組みを理解する必要があります。この記事を読むと、通信フローのイメージをしっかりと掴む事が出来ます。

WEB開発入門、サーバーとクライアント、http通信の流れ

httpとは

Hyper Text Transfer Protocolの略で、インターネットを介して情報をやりとりする為の仕組み (ルール) です。

サーバーとは

クライアントの要求に答える為に、どんな要求が来たら何を返すのか、予め処理を準備しておく必要があります。この処理の受け答えを実際に行う場所が、サーバーです。WEBサーバーには、Node.js、Apache、Nginxなど、様々な種類があります。これらは、自分が扱いたいプログラミング言語、サービスの用途により使い分けます。

クライアントとは

例えば、googleの検索サイトにブラウザからアクセスした場合、Google Chromeや、Microsoft Edge、Safariなどがクライアントとなります。

http通信の流れ – WEBサービス開発入門

リクエストとレスポンスのフローチャート画像

1. リクエスト(クライアントの要求)

http通信は、まず初めにリクエストから始まります。リクエストの通信は、「リクエスト行」、「ヘッダー」、「ボディ」の3つの構成で成り立ちます。

リクエスト行とは

ブラウザがサーバーに対して、「何をして欲しいのか」を簡潔に表現しています。

主要なリクエストの種類は2つです。まずは、これらの違いを覚えましょう。

GETサーバーから情報が欲しい。(WEBページの要求など)
POSTクライアントから、サーバーに情報を渡したい。

リクエスト – ヘッダーとは

具体的なリクエスト情報を、ヘッダー部分で表現します。

フィールド名と、内容のセット、これらが複数行で表現されます。例えば、言語は日本語ですよ、接続先のホスト(ドメイン名)は〇〇.comですよ、といった具合です。

リクエスト – ボディとは

POSTの時は、このボディにクライアントから送りたいデータの情報が格納されます。

2. レスポンス(サーバーの返答)

ブラウザのリクエストに対して、サーバーが応答します。「レスポンスコード(ステータス)」、「ヘッダー」、「ボディ」の3つの構成で成り立ちます。

レスポンスコードとは

サーバーからブラウザに対して、「リクエストの要求内容に答える事ができたのか」を簡潔に表現しています。

主要なレスポンスコードは、以下の様な種類があります。

200リクエストが成功した。
404サーバーがリクエストされたリソースを発見できなかった。
500サーバー側でエラーが発生した。

レスポンス – ヘッダーとは

リクエクトと同様に、フィールド名: 内容でセット、複数行で表現されています。

・ボディデータに含まれるデータの種類(html、 image画像など)
・文字コードの種類(utf-8, Shift_JISなど)

レスポンス – ボディとは

リクエストの要求内容が、WEBページ画面の取得であれば、htmlコードが返されます。このhtmlコードをブラウザが解析します。解析した結果、「CSSファイルを追加で取得せよ!」、「javascriptファイルを更に取得せよ!」、「画像はこのURLから取得せよ!」など、追加の指示があった場合は、ブラウザからサーバーに対して更にリクエスト~レスポンスの流れが続いて行きます。

まとめ – http通信の流れ

・httpとは、インターネットを介して情報をやりとりする為の仕組み (ルール)です。

・クライアントからサーバーへ、「リクエスト」 → サーバーからクライアントへ、「レスポンス」を行い、http通信は成り立っています。

・一度だけでは無く、リクエスト~レスポンスの繰り返しで、WEBページが描画されて行きます。

コメント