プログラム例

node.js演習用のプログラム例をいくつか覚えとして、掲載しておきます。

最も基本的なサーバプログラム

リクエストがあれば、単にコンテンツを返す例。
アロー関数とコールバック関数という概念に慣れてもらうことが必要です。

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello, World!');
});

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}/`);
});

POSTメソッドの確認

POSTメソッドを確認するためのnode.jsプログラム。

const http = require('http');

const server = http.createServer((req, res) => {
    // CORSヘッダーを設定
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

    if (req.method === 'OPTIONS') {
        // プリフライトリクエストに対応
        res.writeHead(204);
        res.end();
        return;
    }

    if (req.method === 'POST' && req.url === '/submit') {
        let body = '';

        req.on('data', chunk => {
            body += chunk.toString();
        });

        req.on('end', () => {
            try {
                const data = JSON.parse(body);
                // サーバー側での処理
                console.log('Received JSON:', data);

                // ここにサーバー側で行いたい処理を追加
                const responseMessage = {
                    message: `Hello, ${data.name}! Your age is ${data.age}.`
                };

                res.writeHead(200, { 'Content-Type': 'application/json' });
                res.end(JSON.stringify(responseMessage));
            } catch (error) {
                res.writeHead(400, { 'Content-Type': 'text/plain' });
                res.end('Invalid JSON');
            }
        });
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('404 Not Found');
    }
});

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}/`);
});

以上のnode.jsプログラムにアクセスをかけるためのhtmlファイル。
それとは別に、

curl -v -H "Content-Type: application/json" -d "{\"name\": \"Taro\", \"age\": 30}" http://127.0.0.1:3000/submit

として、curlでのPOSTメソッドアクセスを確認しておくと良いです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Form</title>
</head>

<body>
    <h1>Submit Your Information</h1>
    <form id="submitForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" required><br><br>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('submitForm').addEventListener('submit', function (event) {
            event.preventDefault();

            const name = document.getElementById('name').value;
            const age = document.getElementById('age').value;

            const data = {
                name: name,
                age: age
            };

            fetch('http://127.0.0.1:3000/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                    alert(`Server Response: ${data.message}`);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
        });
    </script>
</body>

</html>

コンテンツルーティングの例

コンテンツに対するルーティングの例。
/formを指定すると、HTMLの本体にformを埋め込みます。
また、POSTメソッドに対しての応答も同一プログラム内に入れています。

const http = require('http');
const url = require('url');
const querystring = require('querystring');

const renderTemplate = (title, content) => {
    return `
        <!DOCTYPE html>
        <html>
        <head>
            <title>${title}</title>
        </head>
        <body>
            <h1>${title}</h1>
            ${content}
        </body>
        </html>
    `;
};

const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url, true);
    const pathname = parsedUrl.pathname;

    if (req.method === 'GET') {
        switch (pathname) {
            case '/':
                res.writeHead(200, { 'Content-Type': 'text/html' });
                res.end(renderTemplate('Home Page', 'This is the content of the home page.'));
                break;
            case '/about':
                res.writeHead(200, { 'Content-Type': 'text/html' });
                res.end(renderTemplate('About Us', 'This page contains information about us.'));
                break;
            case '/form':
                const form = `
                    <form action="/form" method="post">
                        <label for="name">Name:</label><br>
                        <input type="text" id="name" name="name"><br>
                        <label for="message">Message:</label><br>
                        <textarea id="message" name="message"></textarea><br>
                        <input type="submit" value="Submit">
                    </form>
                `;
                res.writeHead(200, { 'Content-Type': 'text/html' });
                res.end(renderTemplate('Contact Form', form));
                break;
            default:
                res.writeHead(404, { 'Content-Type': 'text/html' });
                res.end(renderTemplate('404 Not Found', 'The page you are looking for does not exist.'));
        }
    } else if (req.method === 'POST' && pathname === '/form') {
        let body = '';
        req.on('data', chunk => {
            body += chunk.toString();
        });
        req.on('end', () => {
            const postData = querystring.parse(body);
            const responseContent = `
                <p>Thank you for your message, ${postData.name}.</p>
                <p>Your message: ${postData.message}</p>
            `;
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(renderTemplate('Contact Form - Received', responseContent));
        });
    } else {
        res.writeHead(404, { 'Content-Type': 'text/html' });
        res.end(renderTemplate('404 Not Found', 'The page you are looking for does not exist.'));
    }
});

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}/`);
});

httpとhttps比較用

curl -v -kで両者のアクセスを比較しましょう。
TCPからHTTPに向けてのレイヤーで何が起こっているか確認すると良いと思います。

const http = require('http');
const https = require('https');
const fs = require('fs');

// HTTP Server
const httpServer = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello from HTTP!');
});

// HTTPS Server
const httpsOptions = {
    key: fs.readFileSync('my0627server.key'),
    cert: fs.readFileSync('my0627server.cert')
};

const httpsServer = https.createServer(httpsOptions, (req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello from HTTPS!');
});

// Start both servers
const HTTP_PORT = 3000;
const HTTPS_PORT = 3001;

httpServer.listen(HTTP_PORT, () => {
    console.log(`HTTP Server running at http://localhost:${HTTP_PORT}/`);
});

httpsServer.listen(HTTPS_PORT, () => {
    console.log(`HTTPS Server running at https://localhost:${HTTPS_PORT}/`);
});