LoginSignup
42

More than 5 years have passed since last update.

ExpressなしでNode.jsで簡単なWebサーバを作ってみる、HTTPを学ぶ

Last updated at Posted at 2016-10-26

Webサーバとは

今回の目的

  • 何のフレームワークもなしでwebサーバを書くには何が必要か知るため

Node.jsで簡単なWebサーバを作ってみる

今回実現する機能

  1. 指定されたポート(8080)でコネクションの受け入れを開始する
  2. クライアントからHTTP通信でリクエストを受け取る
  3. リクエストヘッダで送られてきたURLのパスを解析する
  4. 解析したURLのパターンによって、そのパターンにバンドルした処理を呼びだす(リクエストハンドラ)
    =>本来Webアプリを作成する場合は、この処理を高度化し、別のファイルやモジュールに切り出す
  5. 呼び出された処理を行う
    =>今回は単純にHTMLをレスポンスとして返す

ファイルの構成

App
  ├ webServer.js
  └ template
        ├ index.html
        └ result.html

ソースコード

webServer.js

// クライアントからのレスポンスを受け取り、適切なファイルに処理を依頼する

// 必要なファイルを読み込み
var http = require('http');
var url = require('url');
var fs = require('fs');
var server = http.createServer();


// http.createServerがrequestされたら、(イベントハンドラ)
server.on('request', function (req, res) {
    // Responseオブジェクトを作成し、その中に必要な処理を書いていき、条件によって対応させる
    var Response = {
        "renderHTML": function () {
            var template = fs.readFile('./template/index.html', 'utf-8', function (err, data) {
                // HTTPレスポンスヘッダを出力する
                res.writeHead(200, {
                    'content-Type': 'text/html'
                });

                // HTTPレスポンスボディを出力する
                res.write(data);
                res.end("HTML file has already sent to browser");

            });

        },
        "resultGenerator": function () {
            var template = fs.readFile('./template/result.html', 'utf-8', function (err, data) {
                // HTTPレスポンスヘッダを出力する
                res.writeHead(200, {
                    'content-Type': 'text/html'
                });

                // HTTPレスポンスボディを出力する
                res.write(data);
                res.end("HTML file has already sent to browser");
        })
    }
};
    // urlのpathをuriに代入
    var uri = url.parse(req.url).pathname;


    // URIで行う処理を分岐させる
    if (uri === "/") {
        // URLが「http://localhost:8080/」の場合、"renderHTML"の処理を行う
        Response["renderHTML"](); 
        return;
    } else if (uri === "/result") {
        // URLが「http://localhost:8080/result」の場合、"resultGenerator"の処理を行う
        Response["resultGenerator"]();
        return;
    };
});

// 指定されたポート(8080)でコネクションの受け入れを開始する
server.listen(8080)
console.log('Server running at http://localhost:8080/');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>シンプルなwebサーバ</title>
</head>
<body>
    <p>Webサーバできたよ!!</p>
    <a href="http://localhost:8080/result">次のページ</a>
</body>
</html>

result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>result!</title>
</head>
<body>
    <p>result.html見られたよ</p>
</body>
</html>

HTTP周り

  1. まず、クライアントからhttp://localhost:8080/にリクエストが送られてくる(GETメソッド)

  2. 各URL毎にバンドルされた処理が行われる

  3. 処理の一部として、クライアントにレスポンスを返す。
    =>res.writeHeadでレスポンスヘッダを
    =>res.writeでレスポンスボディ(HTML)を

参考にさせてもらったサイト

HTTP周り

Node.js周り

参考文献

山本 陽平(2010/4/8)『Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)』技術評論社

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42