J.J.'s Blogs

J.J. Huang   2020-02-07   Node.js   瀏覽次數：次   {{moment(1581037200000).fromNow()}}

Node.js | Web 模組

📑 目錄
  1. 簡介
  2. Web 架構
  3. 建立 Web 伺服器
    1. server.js
    2. index.html
  4. 建立 Web 客戶端
    1. client.js

簡介

Web伺服器一般指網站伺服器，是指駐留於因特網上某種類型計算機的程序，Web伺服器的基本功能就是提供Web訊息瀏覽服務。它只需支持HTTP協議、HTML文件格式及URL，與客戶端的網路瀏覽器配合。

大多數web伺服器都支持服務端的腳本語言(php、python、ruby)等，並通過腳本語言從資料庫獲取資料，將結果返回給客戶端瀏覽器。

目前最主流的三個Web伺服器是Apache、Nginx、IIS。​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​‌‌‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​‌‌​

Web 架構

Node.js - 圖 1 (01)

  • Client - 客戶端，一般指瀏覽器，瀏覽器可以通過 HTTP 協議向伺服器請求資料。
  • Server - 服務端，一般指 Web 伺服器，可以接收客戶端請求，並向客戶端發送響應資料。
  • Business - 業務層， 通過 Web 伺服器處理應用程序，如與資料庫交互，邏輯運算，調用外部程序等。
  • Data - 資料層，一般由資料庫組成。

建立 Web 伺服器

Node.js提供了http模組，http模組主要用於搭建HTTP服務端和客戶端，使用HTTP伺服器或客戶端功能必須調用http模組。

1
var http = require('http');

基本的HTTP伺服器架構(使用8080 port)。​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​‌‌‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​‌‌​

server.js

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
var http = require('http');
var fs = require('fs');
var url = require('url');
 
 
// 建立伺服器
http.createServer( function (request, response) {
   // 解析請求，包括文件名
   var pathname = url.parse(request.url).pathname;
   
   // 輸出請求的文件名
   console.log("Request for " + pathname + " received.");
   
   // 從文件系統中讀取請求的文件內容
   fs.readFile(pathname.substr(1), function (err, data) {
      if (err) {
         console.log(err);
         // HTTP 狀態碼: 404 : NOT FOUND
         // Content Type: text/html
         response.writeHead(404, {'Content-Type': 'text/html'});
      }else{
         // HTTP 狀態碼: 200 : OK
         // Content Type: text/html
         response.writeHead(200, {'Content-Type': 'text/html'});
         
         // 響應文件內容
         response.write(data.toString());
      }
      // 發送響應資料
      response.end();
   });
}).listen(8080);

// 控制台會輸出以下訊息
console.log('Server running at http://127.0.0.1:8080/');

index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>J.J.'s Blogs(https://morosedog.gitlab.io/)</title>
</head>
<body>
    <h1>第一個標題</h1>
    <p>第一個段落</p>
</body>
</html>

執行結果如下：

1
2
$ node server.js
Server running at http://127.0.0.1:8080/

開啟瀏覽器瀏覽：

1
http://127.0.0.1:8080/index.html

瀏覽結果：​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​‌‌‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​‌‌​

1
2
3
4
    
第一個標題
    
第一個段落

Server控制台輸出結果：

1
2
3
$ node server.js
Server running at http://127.0.0.1:8080/
Request for /index.html received.

Node.js - 圖 2 (02)

建立 Web 客戶端

client.js

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
var http = require('http');
 
// 用於請求的選項
var options = {
   host: 'localhost',
   port: '8080',
   path: '/index.html'
};
 
// 處理響應的回調函數
var callback = function(response){
   // 不斷更新資料
   var body = '';
   response.on('data', function(data) {
      body += data;
   });
   
   response.on('end', function() {
      // 資料接收完成
      console.log(body);
   });
}
// 向服務端發送請求
var req = http.request(options, callback);
req.end();

執行結果如下：​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​‌‌‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​‌‌​

1
2
3
4
5
6
7
8
9
10
11
12
$ node client.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>J.J.'s Blogs(https://morosedog.gitlab.io/)</title>
</head>
<body>
    <h1>第一個標題</h1>
    <p>第一個段落</p>
</body>
</html>

Server控制台輸出結果：

1
2
3
$ node server.js
Server running at http://127.0.0.1:8080/
Request for /index.html received.

Node.js - 圖 3 (03)


註：以上參考了
Node.js Web 模块​‌‌​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​​​​​​‌‌​​‌​​​‌‌​​​​​​‌‌​‌‌‌​​‌​‌‌​‌​‌​​‌‌‌​​‌‌​‌‌‌‌​‌‌​​‌​​​‌‌​​‌​‌​‌‌​‌​‌​​‌‌‌​​‌‌​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​‌‌​

📚 相關文章

📄 公開段落採 CC BY 3.0 TW 授權，可自由轉載引用，需署名出處。
🔒 付費 / 會員段落 © J.J. Huang，保留所有權利，禁止轉載。