提姆寫程式

0%

Node.js - createServer 核心知識

發表於 分類於 Disqus：
了解 createServer 的運作方式

node

本篇範例會沿用下方程式碼：

1
2
3
4
5
6
7
8
var http = require("http");
http.createServer(function (request, response) {
  response.writeHead(200, {
    "Content-type": "text/plain",
  });
  response.write("<h1>hello node!</h1>");
  response.end();
});

關於 request

request 是使用者透過瀏覽器所發出的請求，當請求發出後會透過內建模組 HTTP 裡面的 createServer 方法的 request 去接這個請求。把 request 用 console 印出來看看，並執行 app.js 檔案。

並且輸入下方網址：

1
127.0.0.1:3030

會發現當我輸入網址後，終端機有跑一下，切過來看會看到滿滿的資訊：

terminal

資訊太長，可以在自己的終端機看

這些都是使用者可以發出的請求給瀏覽器，並且在傳給 request，再看要 response 什麼東西給使用者。

request.url

假設說想看一下目前網址，我把 request.url 印出來：

1
2
3
4
5
6
7
8
9
10
11
var http = require("http");
http
  .createServer(function (request, response) {
    console.log(request.url);
    response.writeHead(200, {
      "Content-type": "text/html",
    });
    response.write("<h1>hello node!</h1>");
    response.end();
  })
  .listen(3030);

一樣執行 node app.js，然後輸入網址，會發現終端機回傳以下結果：

terminal

可以看到首頁的預設是 /，同時也印出 favicon.ico，也就是網頁標籤左邊的那個小圖示。

favicon

如果在 3030 port 後面加上網址 /hellonode，也會印出剛剛給的網址喔！

url

Network 查看詳細資料

前端工程師很常透過 network 去看串接 API 的結果與相關資訊，所以在網頁上滑鼠點右鍵，在找到檢查，會出現 Chrome 開發人員工具，選到 network，標籤選擇 all，然後重新整理網頁或是在剛剛的網址按下 enter，重新執行網頁後就會看到 network 有一個 hellonode 的檔案，看到 200 的狀態碼就代表有成功。

network

network

這邊可以看到 request 跟 response 的資訊：

hellonode

hellonode