Contents

Node.js HTTP server examples

Before making an Node.js application using express.js package, tried to make simple http server examples without the package. It was fine to check what happens under the hood in server side JS.

1 Simple server

Simple server using http.createServer(request, response)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const port = 3000,
    http = require("http"),
    httpStatus = require("http-status-codes"),
    app = http.createServer((request, response) => {
        console.log("Received an incoming request!");
        response.writeHead(httpStatus.OK, {
            "Content-Type": "text/html"
        });

        let responseMessage = "<h1>Hello, Universe!</h1>";
        response.write(responseMessage);
        response.end();
        console.log(`Sent a response : ${responseMessage}`);
    });

app.listen(port);
console.log(`The server has started and is listening on port number: ${port}`);

Start server:

1
2
$ node main
The server has started and is listening on port number: 3000

Then you can access to the web page from browser by URL: http://localhost:3000/

Console output shows:

1
2
3
4
Received an incoming request!
Sent a response : <h1>Hello, Universe!</h1>
Received an incoming request!
Sent a response : <h1>Hello, Universe!</h1>

2 Simple server, parsing request

Simple server + parse request url and headers in JSON format

source

1
2
$ node main
The server has started and is listening on port number: 3000

Then you can access to the web page from browser by URL: http://localhost:3000/

Console output shows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$ node main
The server has started and is listening on port number: 3000
Method: "GET"
URL: "/"
Headers: {
  "host": "localhost:3000",
  "connection": "keep-alive",
  "cache-control": "max-age=0",
  "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"90\", \"Google Chrome\";v=\"90\"",
  "sec-ch-ua-mobile": "?0",
  "upgrade-insecure-requests": "1",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36",
  "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
  "sec-fetch-site": "none",
  "sec-fetch-mode": "navigate",
  "sec-fetch-user": "?1",
  "sec-fetch-dest": "document",
  "accept-encoding": "gzip, deflate, br",
  "accept-language": "ja,en-US;q=0.9,en;q=0.8",
  "cookie": "_ga=GA1.1.658362304.1615544123"
}
Sent a response : <h1>Hello, Node.js!</h1>
Request Body Content : 
Method: "GET"
URL: "/favicon.ico"
Headers: {
  "host": "localhost:3000",
  "connection": "keep-alive",
  "pragma": "no-cache",
  "cache-control": "no-cache",
  "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"90\", \"Google Chrome\";v=\"90\"",
  "sec-ch-ua-mobile": "?0",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36",
  "accept": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
  "sec-fetch-site": "same-origin",
  "sec-fetch-mode": "no-cors",
  "sec-fetch-dest": "image",
  "referer": "http://localhost:3000/",
  "accept-encoding": "gzip, deflate, br",
  "accept-language": "ja,en-US;q=0.9,en;q=0.8",
  "cookie": "_ga=GA1.1.658362304.1615544123"
}
Sent a response : <h1>Hello, Node.js!</h1>
Request Body Content : 

3 Route requested url

Route requested url to response

source

1
2
$ node main
The server has started and is listening on port number: 3000

Then you can access web content:

  • http://localhost:3000 > “Hello, Welcome! "
  • http://localhost:3000/info > “Info is here”
  • http://localhost:3000/contact > “Contact Us”
  • http://localhost:3000/about > “About Us”
  • http://localhost:3000/hello > “Say hello by emailing us here(link)”
  • http://localhost:3000/error > “Sorry, the page are you looking for is not here”

And console output shows requested URL and Headers response status code like:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
Request URL: "/error"
Request Header: {
  "host": "localhost:3000",
  "connection": "keep-alive",
  "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"90\", \"Google Chrome\";v=\"90\"",
  "sec-ch-ua-mobile": "?0",
  "upgrade-insecure-requests": "1",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36",
  "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
  "sec-fetch-site": "none",
  "sec-fetch-mode": "navigate",
  "sec-fetch-user": "?1",
  "sec-fetch-dest": "document",
  "accept-encoding": "gzip, deflate, br",
  "accept-language": "ja,en-US;q=0.9,en;q=0.8",
  "cookie": "_ga=GA1.1.658362304.1615544123"
}
Response Status Code: 400

4 Serve html content

Serve html file by fs package

source

1
2
$ node main
The server has started and is listening on port number: 3000

Then you can access web content:

  • http://localhost:3000/index > “Welcome!”

If you access to the other url like:

  • http://localhost:3000
  • http://localhost:3000/index.html
  • http://localhost:3000/info

“Sorry, Not Found”


5 Serve html content based on routing

Serve html file + register handlers for routing requested url to response

source

1
2
$ node main
The server has started and is listening on port number: 3000

Then you can access web content (html pages in /views/ directory)

Then you can access web content:

  • http://localhost:3000/index.html > “Welcome!”
  • http://localhost:3000/contact.html > “Please contact to us from here”
  • not existing endpoint (http://localhost:3000/co.html) > “No such file exists”

References