我們前面的系列講了網頁的設計，但網頁寫出來後，但到底是如何再電腦跟電腦之間形成通訊網路？
本篇先從網路為什麼要切成七層？再介紹每一層的主要觀念，以及每個層級之間如何互動。網路的知識很瑣碎，所以我會以下的邏輯來做筆記。
- 先給地圖（OSI模型）
- 再說怎麼找到對象、怎麼講話（IP → TCP → DNS）
- 最後講怎麼開口講話與後續互動（HTTP）
- 最後講進階功能（即時通訊）
1. OSI model, TCP/IP model
網路的世界主要分層以下七層，實務面用 TCP/IP 模型來解釋，解釋之前先了解為什麼要分層？分層的好處:
- 某一層出問題，只修這層，不會牽連整個系統
- 不同系統、不同廠商之間也能合作（只要遵守該層協定）
👉 OSI 七層模型：理論完整、用來教學與理解分工
👉 TCP/IP 四層模型：實務精簡、實際網路世界中比較常用
YouTube 影片 What is OSI Model | Real World Examples
2. DNS, IPv4, IPv6
有了分層，接下來我們來認識 IP 位址，像是每個網站的門牌號碼。
舉例來說，Youtube 的地址是www.youtube.com，但其實電腦不是根據這一串英文找地址，而是利用IP來找，那www.youtube.com 是如何被轉化成IP 位置的呢?
有個默默無聞但每天被用爆的系統出現了：DNS Domain Name System（網域名稱系統）。
它的工作就是幫你把「網址」翻譯成「IP 位址」，讓你的電腦知道該去哪裡找資料，就像你只記得朋友的名字，DNS 幫你查出他的電話號碼一樣。
- 你打
www.youtube.com，但其實你是跟電腦說：「請幫我找這個網站在哪裡」 - 電腦看不懂網址（URL），它要先問 DNS：「請問 youtube.com 的地址是？」
- DNS 查到對應的 IP（像是 142.250.206.206）才有辦法真正去找這個網站
小知識補充：當網頁越來越多，地址不夠用，就出現 IPv4 是數字，IPv6 更長、更像亂碼
IPv4 是目前最常見的 IP 格式，長這樣：192.168.1.1 （我們公司的內部網頁就是類似這樣的編碼）
- 四組數字，每組 0~255（因為是 8 位元）
- 全世界最多只能分出大約 42 億個 IP（2 的 32 次方）
聽起來很多？其實超快就不夠用了！你家 Wi-Fi 至少三台裝置（手機、平板、電視），全世界上網的冰箱、汽車、感測器愈來愈多，所以 IPv4 早就被用光了，這時候 IPv6 誕生了。
IPv6 是 IPv4 的進化版，長得像這樣：
2001:0db8:85a3:0000:0000:8a2e:0370:7334
- 超～長，有 128 位元
- 可以分出大約 是 340×10³⁶ 個 IP，等於，地球上每一粒沙子都能有幾百個 IP，根本用不完
3 Port (system port, registered port, dynamic port)
有了地址，下一步介紹「通訊埠」，誰開在哪個門、用哪一個服務，是 port 在負責的。Network Ports Explained 可以參考這個影片。
不過IP位置就像一座大樓的地址，你拿到IP位置還是不知道要去哪一層樓哪個部門，所以要靠port來更具體描述。一台電腦（或伺服器）可以同時提供很多服務（Web、FTP、Email），就靠不同的 port 來區分。
不是「直接連到 IP」，而是「透過某個 port 連到 IP 裡的某個服務」。
192.168.0.100:80，意思是：192.168.0.100：我家地址:80：我家的「網站服務部門」（HTTP）
那 FTP 是什麼？跟你平常用的 Google Drive 有什麼不一樣？
FTP（File Transfer Protocol） 是一種舊但還常用的「檔案傳輸協定」，專門讓你：
- 上傳檔案到伺服器
- 從伺服器下載檔案
以前很多公司都有自己的 FTP Server，會用帳號密碼登入上傳資料，長得像這樣：
ftp://username@ftp.yourcompany.com:21
📌 預設使用 port 21
伺服器收到Port就會召喚出功能(網頁或檔案...)
IP + Port 是不是也適用在「內部系統」跟「外部供應商」連接？
完全適用！👍
✅ 例子1：外部供應商的系統
假設供應商提供一個報價查詢 API：
api.vendor.com:443
→ 表示：走的是 HTTPS（port 443）協定去 call API
✅ 例子2：內部系統之間對接
你們內部有兩台伺服器：
- A 是 ERP 系統：192.168.10.5，提供 API 在 port 8080
- B 是資料庫：192.168.10.8，開在 port 3306（MySQL）
→ A 如果要叫 B，會說：「我要連 192.168.10.8 的 port 3306」
公司的防火牆（Firewall）有時會開特定 port 的原因：不然廠商的軟體就連不進來了。
雖然 Port 就是個號碼，但其實它的編號範圍是有分類的，主要分三種：
1. Well-known / System Ports（0–1023）
被固定保留給超知名服務用。例如：當你瀏覽器打開 https:// 時，電腦默默就在找 port 443
- Registered Ports（1024–49151）給軟體開發商。例如MySQL 資料庫的是
3306
- Dynamic / Private Ports（49152–65535） 個人可以使用，暫時的port。
4 TCP & UDP +TCP的三次握手、四次揮手
知道哪個門後，那資料怎麼送？介紹兩種傳送快遞員：一個謹慎、一個快速。
TCP（Transmission Control Protocol）:傳輸控制協定
UDP（User Datagram Protocol）:使用者資料報協定
連線導向（connection-oriented）代表什麼？
👉 在傳資料前，兩邊要先「握手確認」彼此都在線、都準備好
這就像你打電話之前要確定對方有接起來才開始講話，而 UDP 就像你直接講一句話扔出去，也不管對方有沒有聽到，比較像廣播節目。
從傳紙條輕鬆學習基本網路概念(我覺得這篇寫的比較好XD)
🤝 三次握手：TCP 的暖男開場白
TCP 傳資料前，會先來個三次握手（3-way handshake）
- A：我想跟你聊天（SYN）
- B：好啊我準備好了，你呢？（SYN-ACK）
- A：我也準備好了（ACK）
這樣才開始傳資料~
這確保了：雙方都在線、都同步準備好、才不會白講。回應前面的講解，現在對應到 OSI 模型：傳輸層（Layer 4）的行為
🖐四次揮手：TCP 的禮貌結束
傳完資料要結束連線，也會：
- A：我講完了（FIN）
- B：我知道了（ACK）
- B：我也講完了（FIN）
- A：我收到啦（ACK）
這就是 四次揮手（4-way handshake），確保雙方都有好好說再見 ✋
那 UDP 到底為什麼不用這些？
因為它不管這麼多！
- 不握手、不確認、有就丟、沒收到算了
- 很適合「不能慢但可以漏」的場景，例如：
- 直播影片（漏幾幀觀眾也看不出來）
- 語音通話（慢一秒才聽到反而尷尬）
📦 傳輸方式差異：Stream vs Datagram
協定傳輸型態說明 TCPStream（連續資料流）像水管一樣資料一條線流過去，送到才會顯示 UDPDatagram（資料封包）一包一包丟出去，像是傳紙飛機，丟了就丟了
以程式開發的角度來說，
- TCP 用起來比較簡單，因為它幫你管順序、丟包、重送
- UDP 開發起來更輕巧，但你要自己處理封包順序、遺失問題（常搭配補強機制）
前面我們搞懂了 TCP 和 UDP 是怎麼把資料安全地送出去，
但你可能會想問：「那我在滑網頁時，實際上到底傳了什麼？」
答案就是 —— HTTP request！
瀏覽器跟伺服器的對話，其實就是用 GET、POST、PUT 這些「請求方法」在溝通的。有點類似像OK這個手勢是世界的共通手勢。
TCP 把資料穩穩送到伺服器門口之後，實際開口說話的「語言」，就是 HTTP 協定。
5 HTTP request (GET, POST, PUT, PATCH, DELETE)
以上是概念，先舉個最簡單的GET，在本機也可以呈現
用 JavaScript（或其他語言）在 Visual Studio Code 操作，你可以寫一段程式碼，然後在 VS Code 執行，例如用 fetch()：下一篇我會再介紹Javascipt
fetch('https://jsonplaceholder.typicode.com/posts') //測試資料
.then(res => res.json())
.then(data => console.log(data));
6 HTTP status code (1XX, 2XX, 3XX, 4XX, 5XX)
跟網頁要完資料後，應該要不少人遇過404 not fund的經驗，究竟404是什麼呢？
HTTP 狀態碼是伺服器的「回覆信號」，告訴你請求有沒有成功、或是哪裡出錯。
它總共有五大類，每類的第一個數字代表狀態分類：
前面我們提到 HTTP 請求與回應，但你有沒有想過： 「每次打開網頁，都要重複建立連線、送 request，再關掉連線，是不是很沒效率？」
對，這就是早期 HTTP/1.0 的問題。
為了改善這件事，HTTP/1.1 推出了 keep-alive，讓我們可以重複利用同一條連線，不用每次都重新握手。
在 HTTP/1.0 時代，每一筆請求都會：
- 建立連線（TCP 三次握手）
- 傳資料
- 關閉連線
問題：如果你一頁要載入 50 張圖片，50 次握手 CPU 就爆炸了！
HTTP keep-alive 的做法是這樣：
- 建立一條 TCP 連線後，不馬上關掉
- 之後的請求可以「共用」這條連線來處理多個 request
這樣就像是你跟店員講完話，不掛電話，直接順便再問：「再幫我加一杯奶茶。」
現在的 HTTP/1.1 預設就支援 keep-alive（不需額外設定）
不過即使有了 keep-alive，HTTP 還是「一次一來一回」，而且是單向的。如果你想做的是 聊天室、即時對戰遊戲、股票跳動、物聯網感測資料 的技術，你會發現 keep-alive 還是不夠用。
所以我們下一步要介紹的就是：WebSocket！
7 WebSocket & Socket.io
WebSocket 是一種網頁協定，讓瀏覽器跟伺服器之間可以：
雙向溝通（你可以講話，也可以被伺服器主動叫）、連線常駐（不會講完一句話就掛掉）、即時互動（沒有延遲感，不用每次都重新請求）
和 HTTP 不同，WebSocket 一開始會透過 HTTP 建立「握手」連線，成功後就升級成 WebSocket 連線，之後就不再是傳統 HTTP 行為。
那 Socket.io 又是什麼？
Socket.io 是一個 JavaScript 函式庫，可以更簡單地在前端 + 後端建立 WebSocket 通訊。在寫程式的時候可以用socket.on...
細節可以參考這個影片手把手教學，Building a Chat App - Intro to WebSockets
Socket.io 可以做到
- 自動重連斷線
- 支援事件（你可以自訂「訊息」、「通知」、「打招呼」等）
- 前端和後端都可以用 JS 操作，超直覺！
總之，WebSocket 是一種協定（protocol）就像網路對講機，Socket.io是JavaScript 工具庫，幫你安裝好對講機、設定頻道、開機自動重連。
補充說明：
Q: 瀏覽器本來就是透過 HTTP 溝通的，那 WebSocket 是怎麼接進來的？
A: WebSocket 一開始也是走 HTTP，但會在第一步請求時「提出升級要求」。如果伺服器答應了，就從 HTTP 協議「升級」成 WebSocket 連線！
以上就是網路連線的筆記，下一篇預計學習行動通訊網路和Javascript
