Webクライアント
サーバーに何かを求めるもの、すべて。
も と同じを送り、返ってきた答えを画面に描く仕事を足しているだけです。アドレスバーから描画までの五つの段階をたどってみましょう。
先に尋ねるほうがクライアントです
とサーバーは機械ではなく役割です。先に話しかけて何かを求めるほうがクライアント、待って答えるほうがサーバーです。ブラウザーもクライアント、curlもクライアント、スマホアプリも、を呼ぶ別のサーバーもクライアントです。
だからWebクライアントは一行で書けます。窓も、も、マウスも要りません — つなぎ、を送り、返ってきたものを読めばよいのです。
| 問い | クライアント | サーバー |
|---|---|---|
| どちらが先に話すか | 接続を開いてリクエストを送ります。 | で待ちます。誰かがつなぐまで黙っています。 |
| どちらに住所が要るか | サーバーの居場所を知る必要があります — か、そしてポート。 | 変わらない住所が必要です。サーバーがドメイン名を持ち、クライアントがたいてい持たない理由です。 |
| 同時に何件か | ふつうは一度に一つの会話です。ただしブラウザーはページを速く読むためにいくつも同時に開きます。 | 同時に多数です。本物のサーバーソフトが複雑になる理由のほとんどがここにあります。 |
地図を取りに行ったりカードを決済したりするWebサーバーは、そのリクエストではクライアントとして振る舞っています。役割は一瞬で入れ替わるので、両端にどんな機械があるかではなく、今このリクエストがどちら向きに進むのかを問いましょう。
ターミナルでWebクライアントを作る
が文字にすぎないといちばん早く納得する方法は、を自分で打つことです。前のテーマのWebサーバーを立てておき、をもう一つ開いて手で話しかけてみてください。
ncでリクエストを手書きする
はにつなぎ、打った文字をそのまま線へ流します。二行打ってEnterを二度押せばサーバーが答えます — 今あなたはブラウザーの仕事を手でやりました。
# connect, then type the two lines below and press Enter once more
nc localhost 8084
GET / HTTP/1.1
Host: localhost
# or send it all at once (printf's \r\n is HTTP's line break;
# sleep keeps the line open a moment so the shell server can answer)
{ printf 'GET / HTTP/1.1\r\nHost: localhost\r\n\r\n'; sleep 1; } | nc localhost 8084- 最後のが大事です。リクエストが終わったとサーバーに告げる印で、だからEnterをもう一度押します。
- HTTPは行末ごとにとを求めます。手打ちでも通るのは多くのサーバーが寛容だからで、版は規格が求めるとおりを送ります。
- はが必ず求めます。本物のサイトへこれなしで送ると、ページではなくエラーが返るのがふつうです。
スクリプトに包む
リクエストがprintf一行になれば、使い回せるは数行で済みます。下のは・ポート・を受け取ってリクエストを送り、と本文を分けて見せます。
#!/bin/bash
# usage: bash client.sh localhost 8084 /
HOST=${1:-localhost}
PORT=${2:-8084}
PATH_=${3:-/}
{ printf 'GET %s HTTP/1.1\r\nHost: %s\r\nConnection: close\r\n\r\n' "$PATH_" "$HOST"; sleep 1; } \
| nc "$HOST" "$PORT" \
| tr -d '\r' \
| awk 'BODY { print; next } /^$/ { BODY = 1; next } { print "[header] " $0 }'はHTTPが行末ごとに残すキャリッジリターンを取り除き、は空行に出会うまでをヘッダーとして印を付けます — その後はすべて本文です。ブラウザーが描き始める前にする分け方とまったく同じです。
一つのターミナルにシェルWebサーバー、もう一つにこのクライアントを立てれば、自分で書いた会話の両端を持つことになります。シェルWebサーバーに送るときは、上ののようにで接続を少し開けたままにしておかないと返事を受け取れません。サーバーの返事を書き換えるとクライアントがすぐ気付きます — 間に何もないからです。
curl — 毎日使うことになるクライアント
こちらのスクリプトが大ざっぱにやっていたことを、curlはきちんとやります。、、、アップロード、時間切れ、まで。ほとんどの機械に入っていて、ブラウザーを挟まずにサーバーを確かめる標準の手段です。
# body only
curl http://localhost:8084
# body plus the response headers
curl -i http://localhost:8084
# the whole exchange, request headers included
curl -v http://localhost:8084大事なオプション
| オプション | 働き |
|---|---|
-i | 本文と一緒にヘッダーも見せます。ページが思ったものと違うとき、まず付けるオプションです。 |
-v | 詳しく見る。送ったと受けたレスポンスを、接続の様子まで一行ずつ見せます。 |
-L | リダイレクトを追いかけます。なければが来たとき、欲しかったページではなくほぼ空のレスポンスを受け取ります。 |
-o FILE | レスポンスを画面に出さずファイルへ保存します。curlをダウンロード道具として使う形です。 |
-H "Name: value" | リクエストヘッダーを足します — 中身の種類、、望む言語など。 |
-d "data" | 尋ねるだけでなくを送ります。-dを付けるだけでになり（ほかの方式は-Xで選びます）、からフォームやを試す方法がこれです。 |
-s | 静かに。進み具合の表示を消します。出力をほかのコマンドやスクリプトへ渡すときは必ず付けます。 |
-A "name" | 特定のブラウザーのふりをします。サイトによっては尋ねる相手が誰かで答えが変わります。 |
APIを呼ぶ
今どきのアプリが話す相手は、ページではなくを返すAPIであることが多いものです。curlがそれを取り、jqが読みやすく整えます。アプリのを一行も書かないうちにを確かめる方法です。
# fetch JSON and pick one field out of it with jq
curl -s https://api.github.com/repos/sveltejs/svelte | jq '.stargazers_count'
# send JSON with POST
curl -X POST https://httpbin.org/post \
-H 'Content-Type: application/json' \
-d '{"name":"SONUB","level":1}'
# download to a file
curl -L -o page.html https://sonub.com何であれ、まずcurlで試す癖を付けてください。curlが正しい答えを受け取れば、サーバーは無事で、間違いは自分のにあります。curlも変な答えを受け取るなら、問題はサーバー側です。見当違いの場所を半日探さずに済みます。
Chromeも同じクライアント、大きさが違うだけ
は、あなたがで送ったそのを送ります。そのあと、返ってきた答えを人が見られる画面に変える途方もない仕事を足します — 本当の違いはその「足し」だけです。
その段取りを知っておく価値があります。一つひとつがページの狂う場所だからです。何かが出てこないとき問うべきは、いつでも「どの段階で失敗したのか」です。
アドレス欄から絵まで
- 名前を解くが名をに変えます。ここで失敗するとサーバーに届きもせず、エラーもページではなく名前を指します。
- つないで安全にする接続を開き、なら何かを送る前にを確かめます。ここで出る警告はページがないという意味ではなく、暗号を信用できないという意味です。
- リクエストを送るあなたが手で打ったのと同じ数行に、がずっと多く付きます。、読める形式、好みの言語などです。
- 解釈して残りを取りに行くを読み、からの木を組み立てます。そして、ページが指すものをすべて要求します。スタイルシート、画像、フォント、スクリプトは、たいてい同時に何本も届きます。
- 飾り、並べ、描くを当て、箱ごとの位置を計算して描きます。はHTMLを読んでいる途中でも動き、描いたあとにも画面をまた書き換えられます。
ターミナルのクライアントか、ブラウザーか
Chrome・・・はどれもの上に建っているので、一つで動くページはたいていほかでも動きます。とは違うエンジンです。サイトを仕上げたと言う前に少なくとも二種類で開くべき理由がそれです。
開発者ツール — 行き交う文章を目で見る
にはWebの道具が備わっていて、もう入っています。で手ずから送っていたものが、ここでは一件ずつ、隣にも添えて並びます。
、またはならCommand-Option-I、それ以外はControl-Shift-Iです。ページのどこかを右クリックして[検証]を選べば、そのが選ばれた状態で開きます — いちばん速い入り口です。
パネル
いますぐ試す三つ
- 自分のリクエストを探すを開いてこのページを再読み込みし、いちばん最初の項目を押してください。そこにあるリクエストとレスポンスのは、ncに打ち込んでいた行と同じ内容です。でつながるサイトでは、最初の行とが・:path・:authorityという名前で見えます。
- curlとしてコピーするリクエストを右クリックして[Copy as cURL]を選び、に貼り付けてください。ヘッダーもクッキーもそのまま、ブラウザーがした通りをしたことになります。
- わざと壊してみるで見出しを消して消えるのを見て、で速度を遅く絞ってから再読み込みしてみてください。どちらも安全で、どちらも読むより多くを教えてくれます。
最初のテーマで作ったHTMLファイルを開いて検証すれば、木の中のタグがすべて見覚えのあるものになっているはずです。書き、差し出し、求め、覗くというこの一周が、Web開発全体の縮図です。
自分で記録する欄です。ここで採点はしません。
この段階を理解したものとして記録しますか？
まだ取り消せないので、本当に理解できたときだけ記録してください。
理解したものとして記録しました
自分で記録する欄です。ここで採点はしません。