Day12 NodeJS-Web Server I

今天的目标是：用NodeJS练习写一个简单的Web Server，所以会先介绍一下ＮodeJS中的http模组，然後再来看看要如何让网页在客户端与服务器端传递。

http模组

NodeJS的http模组的来源是名为http_parser的C语言函式库，用於执行HTTP应用程序、处理请求(request)与回应(response)，其中的createServer()方法用来建立Server，藉由回呼函式提供监听事件，在收到请求时处理请求内容及送出回应，而NodeJS中开发的程序码透过http模组，不仅可以回应HTTP请求，也可以用在提出HTTP请求。

Node中的Web Server

Web Server意为网页系统的服务器，透过HTTP接收、处理及传送网页或其他档案至客户端(通常为浏览器)，这边会以NodeJS实作简易的Web Server。

写一个Server

引用http模组，并使用createServer()建立一个新的Server，createServer()参数为包含有请求req及回应res两个参数的回呼函式，在建立Server时要加上listen()以监听指定IP位址及埠，范例中IP位址127.0.0.1为本机localhost的IP，而埠可自行指定。

let http = require("http");

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

设定回呼函式执行内容与回应内容，首先以writeHead()定义回应的Status和Headers，再以sendData()或end()传送内容，若以end()回传内容则表示传送完之後便结束这个工作程序。

http.createServer(function(req, res){
  res.writeHead(200, {"Content-Type": "text/plain"});  //回应状态OK，资料类型MIME为纯文字
  res.end("Hello~\n");
}).listen(1324, "127.0.0.1");

执行除错时，程序会持续执行，等候浏览器传送请求，此时以浏览器连线Server监听IP位址，就会触发回呼函式回应文字内容。

若在浏览器中开启开发者工具，可以从网路>localhost>Header看到请求的资讯及Response可以看到回应的内容。

输出html

这部份提到的html输出包含静态的html页面及以placeholder保留变数在後续更新内容的html样板~

html

建立一个名为index.html的html档案。

<html>
    <head></head>
    <body>
        <h1>Hello To ITs</h1>
        <p>This is just an example</p>
    </body>
</html>

在主程序中引入http模组处理请求与回应，并引入fs模组以读取档案。

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

建立Server、监听指定位址，并设定回传内容。将html档案的内容以fs模组的功能读取为Buffer，再作为传送的回应内容，在Header的部份要将contentType设定为text/html以让执行引擎确认资料类型并转换，若设定为text/plain会直接以纯文字将html档案内容传送至浏览器。

http.createServer(function(req,res){
  let html = fs.readFileSync(`${__dirname}/index.html`);
  res.writeHead(200, {"contentType":"text/html"});
  res.end(html);
}).listen(1324,"127.0.0.1");

执行後以浏览器连线确认，html档案以网页物件呈现。

html样板

将html档案加入{DateMsg}参数作为placeholder。

<html>
  <head></head>
  <body>
    <h1>Hello To ITs</h1>
    <p>This is just an example</p>
    <p>{DateMsg}</p>	<!--加入placeholder-->
  </body>
</html>

在主程序部份，在readFileSync()方法加入编码参数，把html档案改以串流的方式读取，以便修改内容。

http.createServer(function(req,res){
  let html = fs.readFileSync(`${__dirname}/index.html`, "utf8");  //加入编码参数，html为Stream
  res.writeHead(200, {"contentType":"text/html"});
  res.end(html);
}).listen(1324,"127.0.0.1");

定义取代{DateMsg}的变数，更新html。

http.createServer(function(req,res){
  let html = fs.readFileSync(`${__dirname}/index.html`, "utf8");  //加入编码参数，html为Stream
  let date = new Date();
  html = html.replace("{DateMsg}", date);
  res.writeHead(200, {"contentType":"text/html"});
  res.end(html);
}).listen(1324,"127.0.0.1");