fs.readFile関数は,非同期的にhtml,css,jsファイルを読み込むことができる。
main.js
var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
console.log("New Access!!");
console.log("URL: " + req.url);
console.log("Method: " + req.method);
const url = `http://${req.headers.host}`;
// URL解析
// req.urlは相対URLが入る。
// urlはベースurl(相対URLを解決するための基準となるURL)が入る。
const myURL = new URL(req.url, url);
const whitespace = 2;
const result = [];
const names = [];
let buf = ' ';
let blanks = '';
console.log("");
result.push(myURL.href);
result.push(myURL.origin);
result.push(myURL.protocol);
result.push(myURL.username);
result.push(myURL.password);
result.push(myURL.host);
result.push(myURL.port);
result.push(myURL.hostname);
result.push(myURL.pathname);
result.push(myURL.hash);
result.push(myURL.search);
names.push("href");
names.push("origin");
names.push("protocol");
names.push("username");
names.push("password");
names.push("host");
names.push("port");
names.push("hostname");
names.push("pathname");
names.push("hash");
names.push("search");
// names配列の中で、最長の文字列をlongestStringに格納する。
const longestString = names.reduce((prev, current) => {
return prev.length < current.length ? current : prev;
}, '');
const stringLengthMax = longestString.length;
// bufに格納した空の文字列を「stringLengthMax + whitespace」回数分のコピーを含む新しい文字列blanksを作る。
blanks = buf.repeat(stringLengthMax + whitespace);
// URLの解析結果を出す。
names.forEach((t, u) => (console.log(t + ':' + blanks.slice(t.length) + result[u])));
console.log("");
switch (myURL.pathname) {
case "/":
fs.readFile("./index.html", "utf-8", function(err, data) {
res.writeHead(200, {
"Content-Type": "text/html;charset=utf-8"
});
res.write(data);
console.log("myURL.pathname = /");
res.end();
});
break;
case "/styles.css":
fs.readFile("./styles.css", "utf-8", function(err, data) {
res.writeHead(200, {
"Content-Type": "text/css;charset=utf-8"
});
res.write(data);
console.log("myURL.pathname = /styles.css");
res.end();
});
break;
case "/test.js":
fs.readFile("./test.js", "utf-8", function(err, data) {
res.writeHead(200, {
"Content-Type": "application/javascript;charset=utf-8"
});
res.write(data);
console.log("myURL.pathname = /test.js");
res.end();
});
break;
default:
res.writeHead(404, {
"Content-Type": "text/plain;charset=utf-8"
});
res.write("404 Not Found");
res.end();
}
console.log("");
}).listen(8000);
styles.css
body {
width: 100%;
background-color: #b00;
color:#fff;
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<link type="text/css" href="./styles.css" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<h1>Hello Node.js!2023</h1>
<p>This is index.html</p>
<script src="./test.js"></script>
</body>
</html>
test.js
console.log("jsファイルを読み込んだ。");
main.jsを実行すると次のようになる。
C:\Users\〇〇〇\test0819>node main.js
New Access!!
URL: /
Method: GET
href: http://localhost:8000/
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /
hash:
search:
myURL.pathname = /
New Access!!
URL: /test.js
Method: GET
href: http://localhost:8000/test.js
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /test.js
hash:
search:
New Access!!
URL: /styles.css
Method: GET
href: http://localhost:8000/styles.css
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /styles.css
hash:
search:
myURL.pathname = /test.js
myURL.pathname = /styles.css
New Access!!
URL: /favicon.ico
Method: GET
href: http://localhost:8000/favicon.ico
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /favicon.ico
hash:
search:
^C
C:\Users\〇〇〇\test0819>node main.js
New Access!!
URL: /
Method: GET
href: http://localhost:8000/
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /
hash:
search:
myURL.pathname = /
New Access!!
URL: /styles.css
Method: GET
href: http://localhost:8000/styles.css
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /styles.css
hash:
search:
New Access!!
URL: /test.js
Method: GET
href: http://localhost:8000/test.js
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /test.js
hash:
search:
myURL.pathname = /styles.css
myURL.pathname = /test.js
New Access!!
URL: /favicon.ico
Method: GET
href: http://localhost:8000/favicon.ico
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /favicon.ico
hash:
search:
New Access!!
URL: /
Method: GET
href: http://localhost:8000/
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /
hash:
search:
myURL.pathname = /
New Access!!
URL: /styles.css
Method: GET
href: http://localhost:8000/styles.css
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /styles.css
hash:
search:
New Access!!
URL: /test.js
Method: GET
href: http://localhost:8000/test.js
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /test.js
hash:
search:
myURL.pathname = /test.js
myURL.pathname = /styles.css
New Access!!
URL: /favicon.ico
Method: GET
href: http://localhost:8000/favicon.ico
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /favicon.ico
hash:
search:
^C
C:\Users\〇〇〇\test0819>node main.js
New Access!!
URL: /
Method: GET
href: http://localhost:8000/
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /
hash:
search:
myURL.pathname = /
New Access!!
URL: /styles.css
Method: GET
href: http://localhost:8000/styles.css
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /styles.css
hash:
search:
New Access!!
URL: /test.js
Method: GET
href: http://localhost:8000/test.js
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /test.js
hash:
search:
myURL.pathname = /styles.css
myURL.pathname = /test.js
New Access!!
URL: /
Method: GET
href: http://localhost:8000/
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /
hash:
search:
myURL.pathname = /
New Access!!
URL: /styles.css
Method: GET
href: http://localhost:8000/styles.css
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /styles.css
hash:
search:
New Access!!
URL: /test.js
Method: GET
href: http://localhost:8000/test.js
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /test.js
hash:
search:
myURL.pathname = /test.js
myURL.pathname = /styles.css
New Access!!
URL: /?a=843tujg5huj
Method: GET
href: http://localhost:8000/?a=843tujg5huj
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /
hash:
search: ?a=843tujg5huj
myURL.pathname = /
New Access!!
URL: /styles.css
Method: GET
href: http://localhost:8000/styles.css
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /styles.css
hash:
search:
New Access!!
URL: /test.js
Method: GET
href: http://localhost:8000/test.js
origin: http://localhost:8000
protocol: http:
username:
password:
host: localhost:8000
port: 8000
hostname: localhost
pathname: /test.js
hash:
search:
myURL.pathname = /styles.css
myURL.pathname = /test.js