Day13 NodeJS-Web Server II

接续前一天的内容，今天的重点在於提升静态网页读取的效率与JSON格式档案在Server中的传递。

以Stream执行处理请求与回应

Day12所提到的网页读取方式，是透过fs模组中的读取档案方法将html档案读取後再回应请求，这样的流程在档案较大或是多个使用者同时提出请求时，会导致等待存取时间较长、甚至塞车的状况。透过Stream(串流)来读取档案的话，因为是持续以资料片段的方式读取或写入，可以避免等候过久。

实作看看

  1. 建立一个index.html网页档。
<html>
  <head></head>
  <body>
    <h1>Also an Example</h1>
    <p>To perform with stream.</p>
  </body>
</html>
  1. 在主程序中引入fs与html模组，并建立一个新的Server、指定监听位址。
let html = require("html");
let fs = require("fs");

html.createServer(function(req, res){}).listen(1324, "127.0.0.1");
  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");
  1. 执行程序并以浏览器连线监听位址，一样顺利呈现网页内容。

https://ithelp.ithome.com.tw/upload/images/20210928/20139980s7hcYkFZHD.png

JSON

JSON是一种资料交换格式，像物件一样由属性与值所组成且与JavaScript有很好的适用性，常用於API(Application Programming Interface)与网页系统的资料传递，因此也是Server常会遇到需要处理的资料格式。

实作Server上的JSON传递

  1. 引用http模组，并建立新的Server、指定监听位址。
let html = require("html");

html.createServer(function(req, res){}).listen(1324, "127.0.0.1");
  1. 建立一个新的物件obj。
html.createServer(function(req, res){
  let obj = {
    firstName: "Chw",
    lastName: "K"
  }
}).listen(1324, "127.0.0.1");
  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");
  1. 执行程序以浏览器确认传送内容，显示JSON格式资料，若後续以JavaScript介接，可将JSON反序列化为物件以取用属性内容。

https://ithelp.ithome.com.tw/upload/images/20210928/20139980EA1TPSmiKy.png

小结

透过串流的方式执行网页资料的传递，除了避免等候载入之外，在程序码上也比较简洁，而JSON格式的资料传递在与後端API工具的连结与应用上也相当实用，例如API从资料库查找资料的传递等。

关於NodeJS比较基本的使用和练习在这部份告一段落，接下来要进入的部份是强大的套件管理系统NPM，敬请期待~

参考资料

https://zh.wikipedia.org/wiki/JSON

Learn and Understand NodeJS [课程]


<<:  创建App-(老师版)功能

>>:  DAY28 - [React] useContext 概念篇

Day 20 - React.memo

如果有错误，欢迎留言指教~ Q_Q 没写完啦 子元件通常会接收父元件的 state 或 event...

$emit 简单范例分享

先介绍一下Props与$emit的功用 Props：父层若要将内容传递进去子层元件就需要用到prop...

Day22

阵列名称就是阵列第一个元素的记忆体位置，同理函数名称也是程序码在记忆体的第一个位置，既然有了记忆体位...

Dungeon Mizarka 005

UI版面配置 几近年的FPDC游戏，单角色的控制多以First Preson Shooter玩法为主...

决胜IT十八招网址转移

感谢支持! ...