網路基本架構

網路的架構如同字面意思

- 是一群點（電腦）跟線（電纜 or WiFi）交織出來的龐大系統

- 點和點之間通過線來交流

網路真的這麼簡單

- 如果你這堂課只能記住一個東西，那就記這張圖

- 接下來的概念都是從這張圖衍生出來的

第一集：排球少年

很久很久以前

這個男人太狠了，男子名叫小黑。

小黑是國語實小附設高中的學生。

他同時也是鑑店的社員。

(以下純屬虛構，如有雷同純屬巧     合）

（保護當事人）（這絕對不是講師）

小黑很想認識新朋友

但小黑是個超大社恐（真心），完全不敢跟陌生人講話。

小黑的交友圈因此僅限於鑑店、見到社跟班上同學。

所以小黑一直在想方法交新朋友，不過沒啥進展。

某天英文課上…

戴著三層口罩＋黑色墨鏡的粉紅色英文老師（派大星）操著北印口音在黑板上畫 English4U 課文的心智圖。

小黑是英文白癡，聽不懂老師在講啥，所以不想理英文老師。

所以小黑拿出了建中數學學資第二冊，準備開卷數學。

但他被學資的題目電爛了（而且這東西還沒詳解 == ）。

於是小黑做起白日夢來（夢的內容不可言說）。

突然間，小黑想到一個絕妙的點子：

「來做一個傳紙條系統吧！」

小黑覺得這點子有料

所以他開始研究這東西。

小黑請社牛同學 sleepyboy (簡稱 sb）在全校尋找信差。

使用者寫好紙條後，只要交給 sb 聘用的信差，紙條就能傳     當學校任一班上的任一個人。

小黑寫好這系統後洋洋得意，因此決定來測試看看。

測試傳紙條系統

於是小黑決定傳紙條給還不算熟的鑑店大電神 kea，約他放學後打排球。

放學後小黑在排球場等 kea，等了好久。

小黑從四點等到七點，等到自己也融入夜色了，kea 還是沒來

於是小黑氣炸了，打算找 kea 算帳

隔天早上…

小黑帶著四十米長刀來到 106，準備討個明白

黑：「你怎麼沒來排球場？想死嗎？」

kea：「虫合我有跟你約ㄇ？」

黑：「我有傳紙條給你，還想賴帳，找死吧你！」

說完小黑就作勢朝 kea 腦袋砍下一刀，kea 躲開了

kea：「不是哥們我好像知道問題在哪了，你先冷靜。」

黑：「不可能，我的系統天下無敵！」

kea：「總之你先給我看你傳的紙條。」

小黑想了想，拿起來 kea 完全沒寫的對話式，在上面寫下紙條內容：

放學打排球揪嗎

kea 看完紙條內容後：

你是不是北七？

kea：「你是不是傻逼？老哥，你覺得其他人知道我是 kea ㄇ？」

黑：「阿這…」

kea：「而且你要怎麼確保我收得到訊息？」

黑：「有一說一，我沒想過…那要怎麼解決這問題？」

kea：「目前這系統遇到兩個問題：如何確保訊息有傳遞到和如何知道要送給誰。讓我畫張圖解釋。」

黑：「嗯嗯。」

確保訊息傳、收得到

kea：「要確保訊息傳的到（即兩邊溝通成功）有四點得達成：

- A 的傳送功能沒問題

- A 的接收功能沒問題

- B 的傳送功能沒問題

- B 的接收功能沒問題

簡單來說，就是通訊雙方必須確定彼此發送、接收功能都正常。這四點必須都沒問題，兩邊才能成功溝通，不然可能會遺漏訊息。

有個方法叫做「三次打招呼」，能確保這四點成功

」

三次打招呼

第一次打招呼

- kea 知道小黑發送功能正常

- kea 知道自己接收功能正常

第二次打招呼

- 小黑知道 kea 發送功能正常（否則收不到訊息）

- 小黑知道自己接收功能正常（否則收不到訊息）

- 小黑知道 kea 接收功能正常（否則不會傳訊息來）

- 小黑知道自己發送功能正常（否則不會傳訊息來）

小黑

kea

「欸欸羅傑說你是 2486」

小黑

kea

「欸欸羅傑說你是 2486」

「羅傑什麼咖？」

第三次打招呼

- kea 知道自己發送功能正常

- kea 知道小黑接收功能正常

- 好耶，看來確實可以溝通了

小黑

kea

「欸欸羅傑說你是 2486」

小黑

kea

「欸欸羅傑說你是 2486」

「羅傑什麼咖？」

「羅傑叫你去北投區公館路找他」

確保送給誰

要怎麼知道送給誰

kea：「別人不知道我是 kea & 你是小黑，所以可以換成班上座位：

kea -> 106 第三排第五位

小黑 -> 102 第四排第一位。

改完可能會像這個樣子。」

kea 拿了張紙來，重寫了一次：

From 102 第四排第一位

To 106 第三排第五位:

放學打排球揪嗎

可是這樣好麻煩喔…

黑：「但這樣有點麻煩…而且換位子怎麼辦？」

kea：「這倒也不難解決，只要在給各個信差一個名單就行：

- kea -> 106 第三排第五位

- 小黑 -> 102 第四排第一位

如果有換位子的話，更新這個名單就行。

你一開始的紙條也能用了。」

黑：「太感謝你了！！！」

系統正式啟用

於是小黑回到班上後重新傳了一次紙條約 kea 打排球，而 kea 也欣然答應。

等到放學後，kea 如期來到排球場，並和小黑展開一場男人之間充滿熱血與激情的決鬥，球場裡充滿著快活的空氣。

小黑把這套系統稱為「社恐終結者」，並向學校其他同學推銷這套系統。

不久，幾乎全校學生都用這套系統交流（畢竟這個平行時空沒有手機）。

小黑也因此成為學校的風雲人物，交了不少有趣的朋友。

不過還是沒有認識學妹就是了

第一集背後的網路概念解釋

傳紙條分層

- 故事中的傳紙條系統可以分成三層，每層做好一件事：

（本圖參考 Huli 文章）

網路分層

- 我們可以把紙條分層對應到網路分層：

（本圖參考 Huli 文章）

TCP

- TCP 全稱 Transmission Control Protocol (傳輸控制協定)

- 所謂協定就是一套規則，要遵守這些規則電腦間才能做好某   些事

- 而 TCP 就是負責保證資料傳輸沒問題的協定

- 故事中的三次打招呼即對應到 TCP 中的三次握手

（Three-way handshake）

IP

- IP 全稱 Internet Protocol，是一套確保電腦知道彼此在哪的協定

- 故事中的座位 -> IP Address

- 每台電腦只會有一個特殊的 IP（不完全對，但留給你們找答案）

- 有兩個版本：IPv4 和 IPv6

- IPv4 的 Address 不夠用，所以才有 IPv6（加上其他東西）

- IP Address 舉例：142.250.66.78

- Domain -> 名單上的 kea 、小黑

- 每個 Domain 對應一個特定 IP (這 IP 可以更換）

- DNS Server -> 處理名單的信差

- Domain 舉例：ckefgisc.org、superhardalgebraproblems.com

- Packet -> 紙條

- 不過跟紙條不同，電腦傳送資料會把資料切成很多個 Packet

- 要很多個 Packet 才能組成完整內容

- 這樣能保證即使網路突然斷了，原有的資料也不會完全消失

- 傳送過程也會比較快（因為能同時用不同線纜傳）

第二集：臭甲

「社恐終結者」雖好評如潮…

可終究還是遇到了新問題

一段後的某天

打掃時間時，遠在自強樓的 Lan (不是 Ian）到明道樓找上小黑

黑：「Yo~ 這不是 Lan ㄇ 有什麼事ㄇ？」

Lan：「（怨歎）都是你啦！害班上同學都知道我是甲了…」

黑心裡 OS：（原來他真的是）

Lan 說完作勢要拿手上的四十米長刀砍向小黑。

黑：「我知道你很急但你先別急，能不能先跟我解釋發生什麼事了？講完再砍也行阿。咱都是文明人，沒必要訴諸暴力。」

Lan：「確實，你說的對，那我好好說。」

lan 出櫃了（那是小寫 L 不是 I）

Lan：「那天我用這系統跟我最好的朋友出櫃。我很確定他不會跟別人說，所以一定是你的系統有問題！」（嬌羞地）

黑心裡 OS：（一定是他講出去了）

黑：「情況我了解了，我會去處理的。」

自從有了上次經驗，小黑知道 kea 很電，所以又去找他解決這問題。

紙片內容可能被看到惹

黑：「kea 夢，我這次又遇到新問題惹。」

kea：「又怎麼了，這次又遇到啥倒楣問題？」

於是小黑把 lan 的狀況告訴了 kea。

kea：「我猜資料很有可能走漏了，可能有信差看到紙條內容覺得很有趣，所以就流出去了。」

黑：「那要怎麼解決呢？」

kea：「有個方法是把紙條內容加密。如果要加密的話，可以先把訊息內容轉成英文，然後所有的英文字母往右移兩個（a -> c, b-> d, 以此類推）。收到訊息的人在逆向回來就好了！

」（具體如下圖）

From kea To 小黑：

Aqw ctg ica

小黑聽了覺得很有道理

於是小黑決定採用這套系統。

而自此之後確實沒再發生消息走漏的情況了。

感謝 kea 讚嘆 kea。

（至於 lan ㄇ，那是他最好的朋友流出來的…）

第二集背後的網路概念

SSL

- 保證封包被駭客幹走後解不了的協定

- 如果有 SSL ，網址欄會有 https

- 原理跟故事中一樣是 A 加密 B 解密

- 但 SSL 用的是非對稱加密，剛剛故事用的是對稱加密

- 對稱加密就是同一把金鑰加密解密（改英文，偏移量 2 ）

- 但讓對方知道金鑰本身也要通訊過一次

（這樣就有可能被盜金鑰）

- 所以就有密碼學家跟一群瘋狂數學家搞出了非對稱加密

- 但講師懂的不多，所以留給下一位講師講

（或是你想聽也可以來私我沒問題）

第三集：便當

買便當好麻煩…

國語實中雖然可以中午出去吃飯，但小黑中午想玩爭吵星星跟看敗北女角，所以通常會去熱食部買便當。

但買便當麻煩的要死，每次都要翻山越嶺才能到熱食部。

小黑一直在想解決方法，但洋基世界大賽被道奇打爆了，美聯 MVP 連個中外野飛球也接不好，讓小黑很不爽，所以想不出好點子。

又是某天英文課上…

小黑這次決定來卷資訊，於是他打開了 SICP，但小黑同時是資訊和英文白癡，所以啥都沒讀進去。

小黑因此又做白日夢（夢的內容一樣不可言）。

「三號同學，警告一支。」小黑被英文老師的造句嚇醒了。

這時，他腦中又迸出新的好點子：

讓別人幫我訂就好了ㄚ

訂便當系統

小黑想到能利用之前的傳紙條系統，讓想訂便當的人利用紙條來跟幫別人訂的人講，到時候就可以來領便當了。

小黑又去找他認識的朋友推銷這套系統，同時也用手續費聘請班上同學幫訂便當。

過了不久，學校已經有不少人使用這套系統。

雖然實中大部分人喜歡出去吃，但下雨天時還是有不少人改用這套系統訂便當。

小黑也因此發大財，不過時間一久還是出現了一些問題

問題一：格式不統一

小黑聘用的模數社美宣 aka 便當人跟他回報說，每個人填的格式都不一樣（舉例如下），處理起來很麻煩。

From lan To 102 便當

1 << 2 個蛋炒飯

問題一解決方法：統一格式

小黑決定讓所有人都照一樣的格式填，格式不一樣就不接受。

問題二：特殊需求

有些人可能有些額外的需求，也都會寫在紙條上，只是格式也不太統一。

問題二解法：分塊

小黑把紙條分成上下兩個區塊：header 跟 body。

特殊需求放 header 裡，真正的訂單放 body 

From cdbe To 102 便當

送達時間：第五堂

醬油：甜

---------------------------

雞腿便當 8

問題三：回覆格式

對於每筆訂單，小黑收到後都要回覆。

比方說假如可以訂的話，小黑會回「下訂成功！」。

要是便當店沒開，小黑會回傳說「便當店沒開」。

小黑是個究極懶人，不想每次都動手寫這麼多字。

問題三解法：狀態對照表

小黑弄了對照表，每次回傳的數字可對應到對照表上的一種狀態。

問題四：想換其他家吃

這套系統目前只能訂一家的便當，所以有些人反映說很容易吃膩，如果能給其他選擇會更好。

(這張照片沒意義，我只是想放一下我女朋友的照片

問題四解法：找其他人負責

小黑班上有不少朋友，所以他找其他人來幫忙訂其他家的便當。

From lan To 102 飴盛禾

送達時間：第五堂

---------------------------

秘醬火烤-勁道五花 1

From 章魚 To 102 三元堂

豚骨醬油拉麵 1

問題五：改訂單

有些人可能優柔寡斷，點了之後又想改訂單。

或是突然被溫柔的學妹（？）中午叫去告白，不用便當了。

這群人會寫紙條過來告知，但格式每次都不一樣，小黑看了很躁

。

問題五解法：一樣是統一格式

小黑把所有的動作分成四種：GET（取得訂單資訊）、POST（送訂單）、DELETE（取消訂單）、PUT（修改訂單）。

每次交訂單來都得在 header 寫其中一種動作。

問題六：我不記得你

小黑想推出 VIP 會員「CK One」，讓同學可以一個月外送免手續費，但他遇到一個問題：鼎哥。

模數社美宣鼎哥記憶力不好，每張訂單在他看來都毫無關係。

他也記不起來誰有 CK One。

即使小黑想方設法提高鼎哥的記憶力，鼎哥的記憶力也絲毫沒有進步。

問題六解法：小紙條

小黑決定讓有買 CK One 的人拿一張小紙條，每次要訂便當就夾這張紙條一起送給鼎哥，這樣鼎哥就能知道誰有 CK One 了。

Ian 有 CK One

問題六解法的衍生問題和解方

但過了不久，小黑發覺有人偽造紙條來用免費的 CK One。

於是小黑把那張紙條的內容改成一串沒人看得懂的字。

收到訂單後，鼎哥會再看手邊的清單，確認那個人有沒有 CK One。

b54a95127a4b573f41e335fdbd339dcc2208fbfb1ae0b6fab7599d6e2d6ec754

大大大成功

解決以上問題後，小黑設計的系統獲得巨大成功，甚至連友校也來探詢合作意願。

小黑和他的同學也因此賺了不少零花錢。

至於之後有人亂生 VIP 會員，和小黑被迫在校慶穿女僕裝道歉，就又是另一回事了

（完。）

第二集背後的網路概念解釋

便當系統是傳紙條的應用

- 由上面的故事可知，便當系統利用了傳紙條這套系統

- 而這也能對應到網路分層那張圖

TCP

IP

海底電纜

保證發送正常

誰傳的、傳給誰

傳紙條的過程

如何傳送資料

加上收發地址

實際傳輸資料過程

實際應用

訂便當

HTTP

HTTP

- HTTP 全稱 HyperText Transfer Protocol

- 一種規範「怎麼傳網頁」的協定

- 讓電腦（Client）可以跟伺服器（Server）溝通

那什麼又是伺服器呢？

Client v.s. Server

- Client -> 故事中要訂便當的人

- Server -> 處理便當訂單的人（模數社美宣）

- Client 就是普通人用的電腦

- Server 一樣是電腦，只不過被設定成專門用來處理這些需求

- 一般電腦要裝一些軟體（Nginx, Apache）才能變成 Server

- Client 跟 Server 的溝通方式見下頁

Client v.s. Server

Request

「我要訂便當」

Response

「知道了」

對應到實際上網

Request

「我要去 google.com」

Response

「我傳給你網頁喔」

瀏覽器

伺服器

Request

- 送訂單 -> Request

- 最重要的四種方法：

   GET 獲取資料（取得訂單資訊）

   POST 送資料（訂便當）

   DELETE 刪除資料（取消訂單）

   PUT（修改訂單）

- Request 分成 header 跟 body （跟剛剛故事中一樣）

Response

- 回覆 -> Response

- Response 上會寫不同的 status code，表示 Request 的狀態

Port

- 故事中的不同店家 -> 不同 Port

- 每台 Server 有幾千個 Port，用來提供不同服務

- 最常見的是 80（HTTP 佔用的 Port）

- 之後幾週的課應該會很常用，所以得搞懂

Session & Cookie

- Session 是一套讓伺服器知道你是誰的機制

- 因為伺服器會把每個 Request 都當陌生人，所以需要 Session

- Cookie -> 故事中的 CK One 小紙條

- Cookie 就是實現 Session 的一種方式

- 一次 Request 後，伺服器會叫瀏覽器設 Cookie，存在電腦上     某個檔案（通常是 cookies.txt）

- 不能亂流出去，不然別人就能利用這東西盜你帳號