# 理解網路以前，先來理解溝通是怎麼一回事？

## 傳紙條的故事一：明美篇
- 傳紙條守則：確認發送、接收結果
1. 寫明「來源」
2. 寫明「目的地」
3. 經過「安安在嗎？」「哈囉我在。」「太好了妳在。」的前置作業確保雙方都能收到～(三次前置作業，即三方交握！)

## 傳紙條的故事二：賣便當篇
- 傳紙條守則：如何更快賣便當賺大錢？

1. 標準化內容格式：
例如數字、格式統一，幫助千千一眼看出訂單。
2. 分成 header 與 body (上與下的概念)：
特殊需求列在 header 內（好處：可以無限擴張，例如加辣、不要免洗筷），讓千千方便客製化。
3. 用「狀態碼」標準化結果：
200/404...等表示成功/出問題等，千千也分成寫入 header/body 方便客人閱讀。
4. 用「動詞」標準化動作：
get：想要知道訂單資訊
post：想要訂便當
delete：取消訂單
put：修改訂單

以上標準化的好處：轉學生一來，馬上可以進入狀況

### 傳紙條的故事三：野心變更大的千千
- 傳紙條守則：發展多樣化事業的做事方法？
1. 統一服務代碼
明白服務代碼後，轉交給同學，一位同學負責一個業務。
2. 簡化格式
不同服務內容搭配不同紙條格式。
3. 加快速度
比如多樣化事業裡面的其中一項「NBA 的即時戰況服務」千千不需跟對方經過三次確認，只要每隔幾秒不斷發送，對方可以知道即時戰況。
4. 跨校傳紙條
只寫校名，不寫地址也可以。

# 關於「協定」（protocol）

## 1. 什麼是「協定」（protocol）？
網路上一種可以共通交流的模式，雙方需要依照此規則進行溝通。

## 2. 為什麼我們需要「協定」（protocol）?
為了讓彼此能夠溝通順利，減少交流成本，所以需要將規矩標準化，例如阿拉伯數字的寫法。

# 由上往下的 HTTP 協定開始講起

## What's HTTP?
HyperText Transfer Protocol
為全球通訊網的資訊通訊基石。就像是若要透過網路傳達訊息，必須符合網路的遊戲規則（＝一種協定）。而 HTTP 則像是一本網路的遊戲規則說明書～

## 令人討厭的 HTTP request 一生
比起標題，我覺得更適合叫做 HTTP request 極其無聊的一生，因為根本就是一個小跑腿的流程～（頌芝，奉茶！）

瀏覽器 -> 製造 request -> 傳給 server
server 收到後 -> 處理訊息（紙條）-> 傳 request 回來

## 我只是個計程車司機 DNS Server
Domain Name System
一個你說地標不用說地址就可以送到的概念。

比如：

：「司機大哥，麻煩送我到小巨蛋，謝謝」
：「ＯＫ，沒問題！」

以上情境司機大哥不需你跟他報地址，他也知道怎麼去～

但萬一遇到比較普龍供的司機大哥，他還是需要 google map 一下（DNS Server），查詢正確定址，這時出現的「喔～原來是台灣台北市松山區南京東路四段2號呀～」即等於網路上的 IP 位置。

- 其他小筆記：
1. 可以在 iTerm 裡面查某個網址的 ip 位置。

//iTrerm
打 nslookup github.com

//出現
Server:		91.187.200.206
Address:	91.187.200.206#53

Non-authoritative answer:
Name:	github.com
Address: 140.82.118.4
Name:	github.com
Address: 140.82.118.3

2. 127.0.0.1 永遠是自己 local 端的位置。

## header and body (非網頁的)
request and response 都有 header and body。
header 放些額外資訊，body 放些主要資訊。

## GET vs POST and 其他 HTTP method
覺得以前寫的筆記比較好懂
[Week4 簡答題](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/12#issuecomment-431933395)
[[ MTR02 ] - Week4-2 Javascript ( Callback function) ](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/16#issue-380616840)
[[ MTR01 ] - Lesson 4-2 之 HTTP 基礎與 Ajax 筆記](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/6)

## 實作簡易 HTTP Server and HTTP Client

> 注意：在 iTerm 上，按 control + c 可以終止跑碼

### HTTP Client 端

var request = require('request');
request('放網址', function (error, response, body) {
  // console.log('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 web page.
});

### HTTP Server 端

// node.js 內建 libery : require
var http = require('http')

var server = http.createServer(handleRequest)
function handleRequest(req, res) {
    console.log(req.url)

    if (req.url === '/') { // 主目錄
        res.write('welcome!')
        res.end()
        return 
    }

    if (req.url === '/hello') { // 主目錄底下的 hello 檔案
        res.write('hello!')
        res.end()
        return 
    }

    if (req.url === '/redirect1' ) {
        res.writeHead(200, {
            'Ciao': 'Mi chiamo Joanne.' // 見下圖
        })
        res.end()
        return
    }

    if (req.url === '/redirect2') {
        res.writeHead(302, {
            'Location': 'https://google.com'
        }) // 轉址： location
        res.end()
        return 
    }

    res.writeHead(404)
    res.end()
}

server.listen(5000) // port

> 顯示在：Network -> filter -> 點 All -> 左欄的第一個文件點開，就可以看到啦！

## 小結
1. HTTP 只是一個協定 （類似傳紙條/訂便當的故事）
2. 瀏覽器 ＝ 一個程式 (瀏覽器本身有些限制，非 server 的限制～，我們可以自己寫出一個瀏覽器)
3. 實作部分證實我們可以寫出自己的瀏覽器。

# 由下到上的 TCP/IP 開始談起

## TCP/IP 是啥毀？

> 有聽沒懂，僅把關鍵字寫下

- 網路的層級，分很多層～
- 分為：
1. OSI 模型：共有七層，每層都有不同功能
2. TCP/IP 模型：僅有四層而已。為目前主要在使用的，等於簡化版的 OSI 模型。

## What's IP？
- 等於 Internet Protocol （網路協議地址）
既然有地址，則表示它是為了讓網路可透過「IP 協定」來識別每一台電腦（類似家裏門牌號）。

- 目前有兩種版本：
1. IPv6 是新版
2. IPv4

其中主要差異：IP 地址不同

## 各種 IP：虛擬、浮動、固定 IP
- 前提要緊：
理想狀況是希望每台電腦都有自己的 IP 可以連線（一個人一個位置）

- 斯斯有三種，IP 也是三種。哪三種？
1. 固定 IP
2. 浮動 IP
3. 虛擬 IP

上圖分為網內、網外。

網內的三台電腦有自己的「虛擬IP」位置（只有家裡內共用的人可以互相連接彼此的 IP 位置）（在不同的網路裡面 IP 可以重複，因為我們彼此網路不同），當對網外時通常有個固定或是浮動的 IP 可以對應。

- 怎麼知道自己的對外 IP？
股溝 MyIP

- 其他實例
公司對外有個一個固定的 IP，但在內的每個人員工都是不一樣的 IP。網咖也是一樣的概念。

## Port 的作用
### what's port?
= 連接埠，對岸人士稱為端口。他的目的很簡單，就是為了區別同一台電腦上的各種不同服務。一個 port 對應到一個服務。

- 常用的 Port

1. HTTP 80
2. HTTPS 443
3. FTP 21

## TCP 與 UDP
(在傳輸層)

- 大部分網路都建立在 TCP，因為它比較可靠～
- UDP 則是比較快，但不保證一定送到。

## 淺談 TCP 三次握手
同小明小美三次對話 = 三方交握（Three-way handshake）

## 總結
記住以下表格（由下而上）：

| 層級 | 層級名稱 | 名字 | 內容 |
| :--------: | :--------: | :--------: | :--------:|
| L5 | 應用層（Application Layer）| HTTP/FTP | 紙條上的內容：買便當 |
| L4 | 傳輸層 (Transport Layer) | TCP/ UDP | 傳紙條時的三次確認<br>不確定時：一直傳遞紙條問候<br>確認時：ok，繼續傳下去|
| L3 | 網際網路層 (Network Layer) | IP | 寄紙條：寫收件人跟寄件人 |
| L1 | 實體層 (Physical Layer) | 最底層的實體層 | 郵差幫忙寄信 |

## 補充
[CS101 單元四](https://github.com/zuppachu/Joanne-s-Learning-Blog/issues/9#issuecomment-427194287)
[[網際網路] TCP/IP 階層模型基礎](https://pjchender.github.io/2018/05/26/%E7%B6%B2%E9%9A%9B%E7%B6%B2%E8%B7%AF-tcp-ip-%E9%9A%8E%E5%B1%A4%E6%A8%A1%E5%9E%8B%E5%9F%BA%E7%A4%8E/)

# 你一定聽過的名詞：API

## What's API?
Application Programming **Interface** 應用程式**介面**

## Why do we need it?
因為我們需要透過「作業系統」提供的 API 讓我們達成想要做的事情 ＝ 透過 API，讓彼此可以交換資料。

## API vs WebAPI
除了作業系統提供的 API，還有另外一種是 Web 提供的。那WebAPI 又是什麼意思呢？它等於 HTTP API，意即透過「HTTP 協定」的 API。

## 簡易串接 HTTP API 實戰

需回頭再看一次 ＸＤ

# 資料格式的選擇
無論是發送或接收資料，都有固定的格式。

## 存文字＋自定義格式
- 存文字
好處：可以定義各種你想要的格式
壞處：要自己去寫出來判斷

但，通常我們會使用熱門格式：XML and JSON！

## What's XML？
Extensible Markup Language， 標記語言。利用標籤來表示屬性。

格式：

<?xml version="1.0" encoding="UTF-8"?>
<user>
    <id>2</id>
    <firstName>Joanne</firstName>
    <lastName>Chu</lastName>
    <avatar>https://...</avatar>
</user>

不過記憶體容量大，因為超多標籤，所以近年來比較常用的資料格式是超級火紅的 JSON。

## What's JSON?
JaveScript Object Notation，也是一種資料格式。他基於JS 的物件產生的格式，故與 JS 的相容性超好。

格式：
請移駕去看寫得超棒的[你不可不知的 JSON 基本介紹](https://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/)

任何一種資料格式，都可以在各種語言內使用。以目前來說 JSON 為最熱門的資料格式。

# 除了 Web API 外，還有其他種透過網路交換資料的方式

## 第一種： SOAP
Simple Object Access Protocol
資料交換都透過 XML。
## 第二種：除了 SOAP 以外的 HTTP API
透過 HTTP 基本的 method 跟 JSON 的 response 在溝通。事實上，大多數的 API 都是長這樣子～

## 第 n 種方式：跳脫 HTTP 的限制
其實你可以自己制定交換資料的格式～

### RESTful 洗蝦？
非一種協定，只是一種推薦使用的風格～

# 各種好用工具及指令
1. curl
- curl -I ：下載下來只要 header 不要 body

2. nslookup

3. ping
測試是否有連接成功？

5. telnet
檢測 port 是否有開？
PTT 是基於 telnet 的協定。

## 補充

# 總結
網路主要的本質就是「溝通」！

那要能夠好好溝通的話，需要一個能夠將東西規模化，規模化之前需要先標準化，把溝通的標準制定好～

###### tags: `note` `web` `HTTP`