Day13 NodeJS-Web Server II

2021 iThome 鐵人賽

DAY 13

自我挑戰組

學習NodeJS的30天系列第 13 篇

13th鐵人賽 node.js web server

chwk

2021-09-28 23:17:48

727 瀏覽

分享至

接續前一天的內容，今天的重點在於提升靜態網頁讀取的效率與JSON格式檔案在Server中的傳遞。

以Stream執行處理請求與回應

Day12所提到的網頁讀取方式，是透過fs模組中的讀取檔案方法將html檔案讀取後再回應請求，這樣的流程在檔案較大或是多個使用者同時提出請求時，會導致等待存取時間較長、甚至塞車的狀況。透過Stream(串流)來讀取檔案的話，因為是持續以資料片段的方式讀取或寫入，可以避免等候過久。

實作看看

建立一個index.html網頁檔。

<html>
  <head></head>
  <body>
    <h1>Also an Example</h1>
    <p>To perform with stream.</p>
  </body>
</html>

在主程式中引入fs與html模組，並建立一個新的Server、指定監聽位址。

let html = require("html");
let fs = require("fs");

html.createServer(function(req, res){}).listen(1324, "127.0.0.1");

寫入Head資訊，以createReadStream()方法讀取網頁檔，再透過pipe()將資料片段轉傳至res串流。

html.createServer(function(req, res){
  res.writeHead(200, {"contentType": "text/html"});
  fs.createReadStream(`${__dirname}/index.html`).pipe(res);
}).listen(1324, "127.0.0.1");

執行程式並以瀏覽器連線監聽位址，一樣順利呈現網頁內容。

JSON

JSON是一種資料交換格式，像物件一樣由屬性與值所組成且與JavaScript有很好的適用性，常用於API(Application Programming Interface)與網頁系統的資料傳遞，因此也是Server常會遇到需要處理的資料格式。

實作Server上的JSON傳遞

引用http模組，並建立新的Server、指定監聽位址。

let html = require("html");

html.createServer(function(req, res){}).listen(1324, "127.0.0.1");

建立一個新的物件obj。

html.createServer(function(req, res){
  let obj = {
    firstName: "Chw",
    lastName: "K"
  }
}).listen(1324, "127.0.0.1");

設定res的Header以JSON為contentType，透過JSON.stringify()方法將obj序列化成JSON格式字串後設定為res傳送內容。

html.createServer(function(req, res){
  let obj = {
    firstName: "Chw",
    lastName: "K"
  }
  
  res.writeHead(200, {"contentType": "application/json"});
  res.end(JSON.stringify(obj));
}).listen(1324, "127.0.0.1");