8. 網路協定 - ZoeHYH/mentor-program-4th GitHub Wiki

客戶端 Client 與 伺服器端 Server

你的瀏覽器身為客戶端的一種，會發送請求 Request 到伺服器，伺服器端收到 Request 開始處理資料，完成會回傳回應 Response 到客戶端。

路由器 Router（Default Gateway）傳遞訊息

網路服務供應商 ISP 的路由器能夠在各個 IP 位置與路由器間傳遞訊息。

網路協定 － TCP/IP 四層模型

透過海底電纜傳輸，IP 位置規範位置， 傳送資料時透過 TCP 確保收發正常或 UDP 確保即時性，實際應用是透過 HTTP 或 FTP 標準化傳輸內容。

網路存取層 Network Access － 海底電纜

網路互連層 Internet － 網際協定位址 Internet Protocol Address

簡稱 IP 位置，網址背後代表的代碼，每一個能連上網的機器都有專屬的代碼，標示機器在網際網路中獨一無二的位置。傳輸時必須透過 IP 位置，而不是語意化的網址。

IPv4 表現為 W.X.Y.Z ，每組都是 0~ 255 的數字，即 32 位元，有 $2^{32}$ 種可能組合，即將用盡，因此推出了 IPv6 ，有 $2^{128}$ 種組合。

localhost 本地伺服器

不經網卡傳輸，不受防火牆與網卡相關限制。 系統帶著本機當前使用者的許可權去訪問本機。

127.0.0.1 本機地址

依賴網卡傳輸，受防火牆與網卡相關限制，系統通過網路連回本機。

傳輸層 Transport

TCP（Transmission Control Protocol）－ Three-way Handshake

甲傳給乙收到，乙就確定了接收功能無誤，回傳給甲收到，甲就確定了收發功能皆無誤，甲再回傳，乙也就確定了發送功能也無誤。

UDP（User Datagram Protocol）

不保證收發功能，而以即時傳輸為主，例如即時通話或視訊。

SSL/TLS 安全通訊協定（Secure Sockets Layer）/ 傳輸層安全性協定（Transport Layer Security）

SSL含有記錄層（Record Layer）協定確定傳輸層資料的封裝格式，與傳輸層安全協定保證通訊的保密性和可靠性，不被攻擊者竊聽。 SSL 標準化成 TSL ，SSL 是 TSL 的前身。

應用層 Application

HTTPS 超文本傳輸安全協定（HyperText Transfer Protocol Secure）

目前主流的網路協定，經由 HTTP 進行通訊，但利用 SSL/TLS 來加密封包。

HTTP 超文本傳輸協定（HyperText Transfer Protocol）

其中一種網路協定，約定傳輸的方法與內容格式，標準化以便通用推廣，使用 TCP。

  • Server IP：80：告訴伺服器主機要使用TCP Port 80也就是 HTTP 這項協定，使用瀏覽器時已預設。
  • 請求與回應內容
    • header 額外資訊
      • 客戶端與伺服器端的 IP 位置
      • method ： GET 、 POST
      • scheme ： 網路協定版本
      • path ：通常會用 / 根目錄代表默認的檔案， index.html 之類
    • body 主要內容
  • 請求方法 Request Method
    • Get：沒有 body
    • Post： header 與指定資訊用的 body 一起傳送
    • Put : 取代整個 request
    • Patch : 修改部分 request
    • Delete : 刪除資源
    • Head: 只要 header，不要 body
    • Option : 可以暸解 server 提供哪些溝通方法
  • Server IP：80：告訴伺服器主機要使用 HTTP 這項協定
  • 狀態碼 Http Code
    1. 稍等
      • 100Continue ：伺服器端成功接收，但客戶端還要處理
    2. 成功
      • 200OK ：成功
      • 204No Content ：成功但沒有內容，例如發送 delete 請求時
    3. 重新導向
      • 301Moved Permanently ：資料永久移位，下次發送會到新位置
      • 302 Found（Moved Temporarily）：資源暫時移位
      • 304 Not Modified：資料不變，直接從快取拿
    4. 客戶端錯誤
      • 400Bad Request：語法錯誤、資源太大......
      • 401Unauthorized：未認證，可能需要登入或 Token
      • 403Forbidden：沒有權限
      • 404Not Found：找不到資源
    5. 伺服器端錯誤
      • 500Internal Server Error：伺服器出錯，例如搶票時
      • 501 Not Implemented
      • 502 Bad Gateway：通常是伺服器的某個服務出錯

SMTP

告訴伺服器要使用TCP Port 25，E-mail 使用的協定。

FTP（File Transfer Protocol）

其中一種網路協定，使用TCP Port 21。

  • Server IP：21：告訴伺服器主機要使用 FTP 這項協定

互動順序

客戶端發送請求 Request

告訴伺服器端你想取得某些資料，例如：一個網頁。

DNS（Domain Name System）轉化

客戶端會先連上 DNS 伺服器，請它調出資料，回傳域名 Domain Name 或主機名稱 Host Name 對應的 IP 位置。

  • 層級 Hierarchy：如果所屬 DNS 伺服器沒有這個少見網址的資料，所屬伺服器會轉向較上層級的伺服器請求資料。
    1. Root Level ：記錄了哪些伺服器知道哪些域名，最高層級的伺服器。
    2. Top-level Domains
    3. Second-level Domains
    4. Sub-Domains / Third-level Domain
    5. Host

伺服器端發送回應 Response

伺服器端接收請求後處理資料並發送回應。

客戶端發送其它請求獲得回應

瀏覽器解析回應的 HTML 並發現需要其它元素，例如： CSS 、 JavaScript 、圖片、影片，發送這些元素的請求，獲得回應，也就是下載資源。

瀏覽器渲染網頁

實作

模擬客戶端

使用request library。

npm install request
const request = require('request');
request('客戶端網址', function (error, response, body) {
  console.error('error:', error);
  console.log('statusCode:', response && response.statusCode);
  console.log('head:', response.headers); #印出 response 的 header
  console.log('body:', body); #印出 response 的 body
});

模擬 HTTP 伺服器端

使用http library。

  • 新建的 server.js

    let http = require('http'); // 引用 library: http 
let server = http.createServer(handleRequest);

function handleRequest(req, res) {
  console.log('request url: ', req.url);
  if (req.url === '/') {
    res.writeHead(200, { // 更改 response header
      'info': 'index'
    })
    res.write('index'); // 更改 response body
    res.end();
    return;
  }
  if (req.url === '/redirect') {
    res.writeHead(301, {
      'Location': '轉址位置' // Ex google.com
    });
    res.end();
    return;
  }
  if (req.url === '/category') {
    res.writeHead(200, {
      'info': 'category'
    })
    res.write('category')
    res.end();
    return;
  }
  res.writeHead(404);
  res.end();
  return;
}

server.listen(5000); // 監聽 5000 這個 port

  • 執行

    • node server.js，按ctrl + c停止
    • 瀏覽器輸入 http://localhost:5000/
      • 畫面有 index
      • 加上'/category'畫面會有 category
      • 加上'/redirect'會跳轉到 google
      • 加上'/隨意輸入'會404 Not Found

API 交換資料的介面

我們一般聽到的是 Web API 在網路交換資料，其實電腦裡不同程式交換資料也是透過 API 。

可供串接

我們可以通過串接 API 拿到別人願意開放的資料。

資料處理

JSON.parse(資料)將資料轉成 Object 。