httpとは
WebサーバとWebブラウザの間でWebの情報を受け渡しするときに使う約束事(プロトコル)のこと。
httpサーバとは
Webブラウザから要求されたリクエスト(「あのページをおくれ」)に対し、レスポンス(「どうぞ、このページだよ」)を返却するサーバのこと。(＝Webサーバと一緒)
httpでやりとりするサーバなのでhttpサーバと呼ばれることがあるものの、基本的にWebサーバーと同じと考えて良いはず。
作るもの
localhost:3000で待機するwebサーバ。
仕様: 画面のロード時に表示されるフォームのinput内に名前を入力し、submitすると'Hello <名前>！'が表示される
手順
まずはモジュールの読み込みから
httpモジュールはhttpサーバを構築する上で必要な機能を提供するモジュールで、Node.jsがインストールされていれば利用可能。
const http = require("http");
httpサーバの構築はcreateServer()メソッドを使用。
ここではリクエストを受け取った際に行う処理を記述する。
const server = http.createServer((request, response) => {
});
ファイルの最後で待機状態にするポートを指定する。今回は3000番を指定。
server.listen(3000);
ここまでで大枠が整った。
現状で一旦node <ファイル名>でコードを実行してしてみる。
ブラウザからlocalhost:3000を開くと、ページがぐるぐると読み込み中になっており、portがlistenされているのがわかる。
では改めて、http.createServerの中身を記述していく。
まず'画面のロード時に表示されるフォーム'を実現する。
urlにアクセスされた際、inputフォームを画面に表示するためのHTMLファイルを返却するため、レスポンスヘッダのContent-Typeに "text/html"を指定する。
const server = http.createServer((request, response) => {
response.writeHead(200, {
"Content-Type": "text/html"
});
});
画面がロードされた際のパスは'/'なので、その際にフォームを返却するよう指定する。
const server = http.createServer((request, response) => {
response.writeHead(200, {
"Content-Type": "text/html"
});
if ('/' == request.url) {
response.end(`
<form action="/login" method="POST">
<input type="text" name="name">
<input type="submit">
</form>
`)
}
});
ここで再度コードを実行すると以下のような画面が表示できる。
現在はactionで指定している/loginに何も用意していないので、送信しても応答待ち状態となる。
今度は送信ボタンが押された後の処理を記述する。
送信ボタンが押されるとurlが'/login'となるため、以下の処理を追記。
if ('/' == request.url) {
response.end(`
<form action="/login" method="POST">
<input type="text" name="name">
<input type="submit">
</form>
`)
}
else {
if ('/login' == request.url && 'POST' == request.method) {
//ここに受け取ったデータを処理する記述を書いていく
}
}
受け取ったデータを処理するにはreqest.on(イベント名, 関数);を使用する必要があり、
- data: クライアントからデータを受け取った際に発生するイベント
- end: データの受け取りが完了した際に発生するイベント
上記二つのイベントを用いて送信された内容を画面に反映させる。
まずはdataイベントで画面から受け取ったデータをdata変数に格納していく。
else {
if ('/login' == request.url && 'POST' == request.method) {
let data = "";
let view = ""; //後で表示用に使う変数の初期化
request.on("data", function (_argdata) {
data += _argdata;
});
}
}
次にendイベントで渡ってきたdataをURLSearchParamsを利用してオブジェクト形式に変換し、nameを取り出す。
request.on("end", function() {
const params = new URLSearchParams(data);
})
そして得た値をview用に加工する。
request.on("end", function() {
const params = new URLSearchParams(data);
view += '<p>Hello '+ params.get('name') + '</p>';
})
最後に加工したviewの値をレスポンスとして画面に返却する。
request.on("end", function() {
const params = new URLSearchParams(data);
console.log(params.get('name'));
view += '<p>Hello '+ params.get('name') + ' !</p>';
response.end(view);
})
コードの全体としては下記となった。
const http = require("http");
const server = http.createServer((request, response) => {
response.writeHead(200, {
"Content-Type": "text/html"
});
if ('/' == request.url) {
response.end(`
<form action="/login" method="POST">
<input type="text" name="name">
<input type="submit">
</form>
`)
}
else {
if ('/login' == request.url && 'POST' == request.method) {
let data = "";
let view = "";
request.on("data", function (_argdata) {
data += _argdata;
});
request.on("end", function() {
const params = new URLSearchParams(data);
console.log(params.get('name'));
view += '<p>Hello '+ params.get('name') + '</p>';
response.end(view);
})
}
}
});
server.listen(3000);
動作確認
フォームの送信後の表示:
