nodejs-第一章-第三節-網絡通訊-構建http服務

時間 2020-02-13

原文原文鏈接

內容索引：

Node中的http模塊
使用node構建http服務
實現一個靜態資源服務器
使用模板引擎處理動態網頁
結合數據庫渲染動態頁面
實現一個留言本案例
第三方HTTP服務框架

Node中的http模塊

TCP和UDP 都屬於傳輸層協議
HTTP，用於瀏覽器和服務器端進行通訊，因爲HTTP協議自己並不考慮數據如何傳輸等其餘問題，因此屬於應用層協議。
Node提供了基本的http和https模塊用於HTTP 和 HTTPS的封裝

const http = require('http')
const server = http.createServer()

1.1Server實例

API	說明
Event: 'close'	服務器關閉時觸發
Event: 'request'	服務器收到請求消息時觸發
server.close()	關閉服務
server.listening	獲取服務狀態

1.2 請求對象

API	說明
request.method	請求方法
request.url	請求路徑
request.header	請求頭
request.httpVersioni	請求http協議版本

1.3 響應對象

API	說明
response.end()	結束響應
response.setHeader(name, value)	設置響應頭
response.removeHeader(name, value)	刪除響應頭
response.statusCode	設置響應狀態碼
response.statusMessage	設置響應狀態短語
response.write()	寫入響應數據
response.writeHead()	寫入響應頭

2.1 hello world

const http = require('http');
const path = require('path');
const mimie = require('mime'); // 返回擴展名對應的content-type
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
  // res.setHeader('Content-type', 'text/plain charset=utf-8'); // 響應字符串
  const url = req.url;
  if (url === '/') {
    fs.readFile(`./index.html`, (err, data) => {
      if (err) {
        throw err;
      }
      res.statusCode = 200;
      res.setHeader('Content-type', 'text/html; charset=utf-8'); // 響應html
      res.end(data);
    });
  } else if (url.startsWith('/assets/')) {
    fs.readFile(`.${url}`, (err, data) => {
      if (err) {
        res.setHeader('Content-type', 'text/plain; charset=utf-8');
        res.statusCode = 404;
        res.end('404 Not Fund.');
      }
      // path.extname(url) 獲取文件對應的擴展名
      const contentType = mimie.getType(path.extname(url));
      res.statusCode = 200;
      res.setHeader('Content-type', `${contentType}; charset=utf-8`); // 設置響應頭
      res.end(data);
    });
  } else {
    res.statusCode = 404;
    res.setHeader('Content-type', 'text/plain; charset=utf-8');
    res.end('404 Not Fund.');
  }

  // console.log('req', Object.keys(req));
});
server.listen(port, hostname, () => {
  console.log(`server running at http://${hostname}:${port}`);
});

contentType對照表：http://tool.oschina.net/commons

經常使用模板引擎：

marko
nunjucks
handlebars.js
ejs
Pug
art-template

template-engine.jshtml

const http = require('http');
const path = require('path');
const fs = require('fs');
const template = require('art-template');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
  const url = req.url;
  const fileBaseUrl = path.join(__dirname);
  if (url === '/') {
    fs.readFile('./template-engine.html', (err, data) => {
      data = data.toString();
      const ret = template.render(data, {
        msg: 'world',
        todos: [
          { title: '吃飯', completed: false },
          { title: '睡覺', completed: true },
          { title: '打豆豆', completed: false }
        ]
      });
      res.setHeader('Content-type', 'text/html charset=utf-8'); // 響應字符串z
      res.end(ret);
      res.statusCode = 200;
    });
  }
});
server.listen(port, hostname, () => {
  console.log(`server running at http://${hostname}:${port}`);
});

template-engine.htmlnode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="title">我是我{{ msg }}</div>
    <ul>
      {{ each todos }}
      <li>
        {{ $value.title }}
        <input type="checkbox" {{ $value.completed ? 'checked' : '' }} />
      </li>
      {{ /each }}
    </ul>
  </body>
</html>