2021-05-06

[Lichen5221]

NET101 網路基礎概論

傳紙條小故事

和網路的本質相同：傳遞訊息，來源與目的地都要。

老師的圖真的是很可愛。

確認收發功能正常，發送功能正常要建立在收發人成功回覆之上。

格式要統一，將特殊需求歸類，跟主要內容分成兩層，header 特殊需求，body 主要資訊。

資訊太多，透過訂定代碼簡略回覆資訊，同樣分成兩層，header 告知代碼，body 告知詳細錯誤情形。

訂定指令，透過指令表達想執行什麼行動。

標準化的好處：即便是新來的人也能立即了解如何執行與執行規範。

服務開始變多：統一服務代碼，一人負責一種服務。

繼續簡化格式：不同服務不同格式。

即時轉達：注重即時性，無需先執行確認，需要更快的傳遞訊息。

廣泛傳遞：無需填寫地址，地標即可辨識。

為什麼我們需要協定（ protocol）？

有標準才能規模化，有共同語言（程式語言）就能溝通，協定可以幫助規範統一語言。

由上到下：從 HTTP 協定開始講起

HTTP 簡言之就是一個協定，與全世界透過網路溝通的規範。

客戶端發出 request 給服務端（伺服器），然後服務端會發送 response 給客戶端。

怎麼看到一個網頁？打開 dev tool，network 小分頁可看見瀏覽器傳去給 server 的 request，跟 server 回傳的 response，需注意 server 並非回傳整個頁面，而是建立頁面的 html 程式語言等。

Domain Name System （ DNS Server ）：客戶端會詢問該 Server ，某個網址的 IP （位置）在哪，該 Server 會回傳該網址的 IP。客戶端的 request 會送到此 IP。

node 指令中：nslookup 某個網址，可以查看該網址之 IP。

127.0.0.1 代表自身電腦的 IP。自己的電腦本身也是一個 Server。

簡言之 DNS Server 就是將網域翻譯成 IP。

永遠不要忘記瀏覽器也只是另一個程式

即便沒有瀏覽器，我們一樣能拿到 request 跟 response 的內容。

透過 npm 安裝 request，將 request 導入後執行。如果將導入的東西另存到 html 檔案，打開後呈現會跟用瀏覽器看見的東西一模一樣。

脫離瀏覽器仍舊可以發 request 跟接收 response。

body 放主要內容，header 放額外資訊。如果在 request 成功並收到 response 後，console.log(response.header) 即可只看見 header 的內容。

GET 是我們要拿的資訊，POST 為執行部分動作，這部分老師講的比較少，額外自己去谷歌了文章。

淺談-http-method：表單中的-get-與-post-有什麼差別？

其他 HTTP Method

PUT 的內容會完全取代所以原先的資料。PATCH 就只會覆蓋想更改的部分。

HTTP 狀態碼

簡易實作 HTTP Server

var http = require('http')

var server = http.createServer(handleRequest)
function handleRequest(req, res) {
  console.log(req.url)
  res.write('hello')
  res.end( ) // response 結束
}

server.listen(5000) //服務代碼

在 html 輸入 localhost.5000，就會出現程式的要求所回傳的結果。

var http = require('http')

var server = http.createServer(handleRequest)
function handleRequest(req, res) {
  if (req.url === '/ ') {
    res.write('welcome')
    res.end( )
    return
  }
  if (req.url === '/hello') {
    res.write('hello')
    res.end( )
    return
  }
  if (req.url === '/redirect') {
    res.writeHead(200, { //寫 302 的話就會重新導向
      'lidemy': 'good' // 302 的話要寫：'Location': 要導向的地方
    })
    res.end( )
  }
  res.writeHead(404)
  res.end() //必放
}

server.listen(5000)

每次要把 Server 關掉重開才會更新。

TCP / IP

知道在做什麼即可，更深層的知識可之後探究。

從客戶端 request 到 Server 還要經過很多層。

OSI 七層 VS TCP / IP 模型

TCP / IP 模型才是主流，OSI 七層大多只出現在課本上。

參考文章：鳥哥的私房菜

IP 地址：網路協議地址（像住家地址）

虛擬IP：只有在相同連線來源的人才能找到，不同網路下可重複。除此之外，還會有對外 IP（可能浮動可能固定）。

浮動IP：每次連接的時候 IP 位址都不同。

固定IP：不會變，可直接連線。Server 一定會有固定 IP。

Port：連接埠（一個埠接收一個服務），沒有打冒號的話 HTTP 預設為 80。為了區別不同電腦上的不同服務。常用的 Port 為 3000、5000、4000⋯⋯。

傳輸層的兩個協議：TCP & UDP

TCP：可靠的連接（三次握手），可知道到底有沒有將資訊送過去且收到回覆。相較之下，不需要確認，而是不斷傳送資訊的時候：UDP（通常用在視訊）。

[Lichen5221]

API（ Application Programming Interface）應用程式介面

重點是介面兩個字。

當你要跟別人要東西的時候，透過對方提供的 API 來存取東西。利用 API，可以讓雙方交換資料。不一定要有網路。

WebAPI：透過 HTTP 協定的 API。

簡易串接 HTTP API：

const request = require('request');

request(
  '網址',
  function (error, response, body) {
    console.log(body);
  }
);

資料結構：發送和接收有一定格式。如果使用純文字，處理要求的服務端需要其他資訊來判斷文字的意思，純文字的好處是可以定義任何的格式。

一般來說會用 XML 跟 JSON。

XML（ Extensible Markup Language）和 html 類似。以標籤的形式表現資料。

JSON（JavaScript Object Notation）為當前最常使用的資料格式。介紹網頁 點此。和 JS 的物件很像，大小比 XML 少。

const request = require('request');

request(
  '網址',
  function (error, response, body) {
    const json = JSON.parse(body) // JSON 格式的字串轉成物件
    console.log(json); //印出來的形式不同
    console.log(json.data.first_name); //轉乘物件就可以印出 JSON 裡面的資料
  }
);

反向用法：

const obj = {
  name: 'huli',
  job: 'none'
}
console.log(JSON.stringify(obj)) //把物件變成 JSON 格式的字串

許多程式皆能使用。