# [NET101] 網路基礎概論（搭配 JS 實作練習）

###### Date : 2021 May. 03 - 2021 May. 03

#### 先來理解溝通是怎麼回事
- 溝通前 ( 亞當跟夏娃 )
需要先確定雙方的 `發送` & `接收` 功能都沒問題，所以為什麼需要 3次 溝通前測試

note left of 小明:發送 : ???；接收 : ???
note right of 小美:發送 : ???；接收 : ???
小明 -> 小美 : 安安，在嘛
note right of 小美:發送 : ???；接收 : OK
小美 -> 小明 : 在唷 :D
note left of 小明:發送 : OK；接收 : OK
小明 -> 小美 : 收到，太好了
note right of 小美:發送 : OK；接收 : OK

> 承上

note left of 小明:發送 : OK；接收 : OK
note right of 小美:發送 : OK；接收 : OK
小明 -> 小美 : 請你跟我約會！
note right of 小美:．．．
note left of 小明:剛剛測試發送 & 接收都 OK 呀

> 這又是另一個故事了，一定是剛好小美去洗澡了。
- 建立溝通守則 ( 統一度量衡 )
- 標準化內容格式
- 分為 header & body
- 用狀態碼準化結果
- 用動詞標準化
- 規模化溝通守則 ( 客製化的溝通 )
- 新增服務代號，一人負責一個服務
- 不同服務可以有不同格式
- 有些服務不一定要經過三次確認
- 誇校傳紙條寫校名不用寫地址也行

- 為什麼我們需要協定 ( protocol )
- 需要一個溝通標準
- 有標準才可以規模化

#### HTTP ( Hyper Text Tansfer Protocal 超文本傳輸協定 )
- request 的一生
1. 瀏覽器傳 HTTP request 到 sever
2. serve 回傳一個 respones
3. 重點是裡面的格式
- DNS ( Domain Name System )
1. github.com 的 Adress 是哪 ( CLI : `nslookup github.com` )
2. 回傳 Address: 52.192.72.89
- local host 127.0.0.1
- 盜版原理 : request -> 導到不存在的 127.0.0.x -> XXX ( 沒有 respone ，也就無法驗證正版)
- 瀏覽器也只是個程式
- 套件 : [Request - Simplified HTTP client]()
- 安裝 : `npm install request`
- 使用方式 :

        const request = require('request');
        request('http://www.google.com', function (error, response, body) {
          console.error('error:', error); // Print the error if one occurred
          console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
          console.log('body:', body); // Print the HTML for the Google homepage.
        });

- Header

    const request = require('request');
    request(
        'http://www.google.com',
        (error, response, body) => {
            // 印出 header
            console.log(response.headers)
        }
    )

- 常見 HTTP Method
- GET, HEAD, POST, DELETE, PUT ( 取代 ) , PATCH ( 修改 )

- 常見的 HTTP Status code

| code | 狀態 | meme |
| --- | --- | --- |
| 1XX | 訊息 | Hold on |
| 2XX | 成功 | Here you go |
| 3XX | 重新導向 | Go away |
| 4XX | 用戶端錯誤 | You fucked up |
| 5XX | 伺服器錯誤 | I fucked up |

- 實作 : 簡易 Sever

    // node 內建套件
    let http = require('http')
    
    let server = http.createServer(handleRequest)

    // 處理 request, respones
    function handleRequest(req, res) {
      console.log(req.url)

      if (req.url === '/hello') {
        res.write('hello')
        res.end()
      }

      if (req.url === '/'){
        res.write('welcome')
        res.end()
      }

      if(req.url === '/redirect'){
        res.writeHead(302 , {
          'Location' : 'https://google.com'
        })
        res.end()
      }

      // 如果上面的路徑沒有，404 Error
      res.writeHead(404)
      res.end()
    }

    server.listen(5000)

#### TCP / IP
- TCP / IP 網路層級
<table>
<tr>
<th colspan=2>OSI 模型</th>
<th>TCP / IC 模型</th>
<th>相關通訊協定</th>
<tr/>
<tr>
<td>第七層 : 應用層</td>
<td>Application</td>
<td rowspan=3>應用層</td>>
<td rowspan=3>HTTP, SSH, ...</td>
</tr>
<tr>
<td>第六層 : 表示層</td>
<td>Presentation</td>
</tr>
<tr>
<td>第五層 : 會話層</td>
<td>Session</td>
</tr>
<tr>
<td>第四層 : 傳輸層</td>
<td>Session</td>
<td>傳輸層</td>>
<td>TCP...</td>
</tr>
<tr>
<td>第三層 : 網路層</td>
<td>Network</td>
<td>網路層</td>
<td>IP...</td>
</tr>
<tr>
<td>第二層 : 數據鏈路層</td>
<td>Data Link</td>
<td rowspan=2>網路訪問層</td>
<td>LAN</td>
</tr>
<tr>
<td>第一層 : 物理層</td>
<td>Pysical</td>
<td>WAN</td>
</tr>
</table>

- IP 地址，各種 IP
- IPv4, IPv6
- 固定 IP : 不會變
- 浮動 IP : 每次連線 IP 都不一樣
- 虛擬 IP : 只有內網裡面可以互通，對外是固定一個但不一樣的 IP

- Port 的作用
- 讓網頁的程式監聽 ( 預設是 : HTTP 80, HTTPS 443, FTP 21)
- 測試、開發常用的 Port : 3000, 4000, 8080, 8000

- TCP / UDP ( 兩種常見的傳輸層協定 )
- TCP 是可靠的連接，基本上 HTTP, FTP 都是建立在 TCP 上
- UDP 是相對不可靠，但是及時的連接，像是 : 視訊，即時比分 ... 等
> 補充 : TCP 三次握手

#### API ( Application Programming Interface )
- API 是甚麼
- 可分為 : 提供 API 跟 使用 API
- 簡單說就是透過 API ，可以讓雙方交換資料
- Web API
- Web API => HTTP API，透過 HTTP 協定的 API
- SDK ( Software development kit )，包裝好的 API ，可以直接使用
- 例如 : 可以拿到寶可夢資料、隨機圖片、hacker-news
- 串接 HTTP API 實戰

    const request = require('request')

    // node 內鍵模組，可以印出當前參數位置
    const process = require('process')

    // process test
    // 印出參數位置
    // console.log(process.argv)

    request(
            'https://reqres.in/api/user/' + process.argv[2],
            function (err, res, body) {
                    console.log(body)
            }
    )

#### 資料格式的選擇
- XML ( Extensible Makeup Language )
- 歷久不衰，使用標籤當作 key，例如 : <id>benben</id>
- JSON ( JavaScript Obejct Notation)
- 熱門的資料格式，key & value 都要使用 `"` 包起來
- 可以使用 `const jsonObj = JSON.parse(body)` 將 JSON 轉成 Object
- 可以使用 `const json = JSON.stringify(Obj)` 將 Object 轉成 JSON
- SOAP ( Simple Object Access Protocol )
- 用 XML 交換資料
- RESTful API
- 還不是協定，只是一種風格，請好好使用你的 API
- API 串接實戰

    const request = require('request')

    // node 內鍵模組，可以印出當前參數位置
    const process = require('process')

    // process test
    // 印出參數位置
    // console.log(process.argv)

    request.patch(
            {
                'https://reqres.in/api/user/2',
                form: {
                name: 'heillo'
                }
            },
            function (err, res, body) {
                console.log(response.stautsCode)  
                console.log(body)
            }
    )

- 跳脫 HTTP 的限制
- 自訂義交換資料格式，不要被 potocol 侷限住

#### 好用工具 & 指令
- 必學 curl
- `curl URL` : 發出 resquest ，可用 `|`, `>` 等指令串接
- `curl - I URL` : 只取得 header 內容
- 其他常用指令
- `ping URL` : 測試可不可以連到該網站
- `nslookup DNS/URL` : 解析 IP 位置、Doman name
- `telnet 52.74.223.119 80` : 檢查 github 的 80 port 有沒有開

#### 結語
- 看穿網路的本質，才能不被迷惑
- 網路的本質是溝通、交換資料
- 基礎的 API 知識，使用 API

---
#### 心得
課程前面的內容真的超級生動的 XDD
上課前真的覺得 Http 到底是 three 小，然後回憶高中時，真的是這樣傳紙條呢 ( 時代的眼淚 )，那時候還會把信紙折成好多種形狀。
我也好愛喝過氣的黃金比例翡翠檸檬呀！！！ ( 幫清玉QQ )
理論的地方講的很棒，不會太理論 (?) ，就是大多有點到，但更深入就太深了 QQ
後面的 API 實戰還蠻不錯的，自己做完有一點成就感，感覺熟悉之後可以做很多事，對，就是所謂的爬蟲 ( 爬蟲 = 串 API + 清洗資料 + 資料視覺化 ) ，又學到了許多知識。