internet by NASA from Unsplash

在網路時代生活的我們，對於機器能聯網互動似乎覺得稀鬆平常。對前陣子從程式基礎邏輯、慢慢學習到前端開發、軟體運作等技術的我來說，甚至會以為自己應該懂了不少了吧！直到揭開網路真實面貌，我才發現越學越博大精深。

為什麼要懂網路在幹嘛？

這個階段，我們要學習打造的全端產品，其實就是網路應用程式（web application），顧名思義就是能在網路上運行的軟體。從前端跨足後端／全端的關鍵，就是能親自打造 Web app 內部的運作機制。由於前端的瀏覽器及後端的伺服器通常運行在不同的機器上，當然也就牽涉機器間跨網路的溝通模式。

機器如何透過網路來溝通？

一旦能清楚、準確地描述「機器間跨網路的溝通」，如：

• 當使用者在網址列輸入網址並按下 Enter 後，到瀏覽器呈現出對應畫面之間，發生了什麼事？
• 使用者點擊網頁上的某個元件後，改變了畫面的狀態，中間的過程如何發生？

就有機會以程式碼來呈現內部運作的流程了。

實際的網路運作機制

網路運作機制 from Alpha Camp's material

從上圖能很清晰地透視，從客戶端（Client，可能是瀏覽器或 API 等）發出請求後，會進到伺服器端（Server，可能是雲端主機或機房等）。經歷總路由的分配後，分三個部分來處理：

• 管理中心 Controller：負責將任務切分、分派給不同職責的中心。
• 資料中心 Model：負責處理資料，通常聚焦在 CRUD。
• 畫面中心 view：負責呈現畫面，組裝及排版畫面的渲染。

完成後將相關資源回傳給客戶端。

Client & Server from Alpha Camp's material

Client & Server

在開頭提到的兩台機器，分別就是客戶端 (client-side)和伺服器端 (server-side)。

• 客戶端：通常指使用者，會在操作過程中提出請求，以達成某些目的。
• 伺服器端：就是伺服器，會在收到請求後進行處理，並回傳指定的資源，以達成客戶端的要求。

Request/Response Cycle

整個網路運作機制就圍繞在這兩端的互動，其中的重頭戲，就是處理客戶端發出的請求（Request）及伺服器端給予的回應（Response）。

以線上購物來理解網路傳輸流程

然而，在尚未實作過機制的運作細節時，難免還是會感到抽象。所以我喜歡用本來就熟悉的概念來比喻。

透過物流比喻網路，可以把請求（Request）的資訊想像成訂單，而回應（Response）的資源類比為商品。

機器間對話的語言與內容是什麼？

HTTP from Network in DevTools

在不同情境中，機器間被定義了各自的溝通語言，統稱為：「通訊協定 (Protocol)」。

而機器在網路間採用的是 HTTP（HyperText Transfer Protocol），中譯為「超文本傳輸協定」，也就是「電腦之間互相交流文件的溝通語言」。

在 Chrome 瀏覽器的 DevTools 中，可以點選 Network 查看 HTTP 的細節。

用物流配送來認識網路傳輸協定

透過物流比喻網路，可以把請求（Request）的資訊想像成訂單，而回應（Response）的資源類比為商品。

接續前面提到的比喻，上圖這些購買及配送資訊，就類似 HTTP 的溝通內容。當中包含了給收發單位及傳遞者看的資訊，以及給消費者和商家的內容及商品。

HTTP 超文本傳輸協定

HTTP Request & Response from Alpha Camp's material

實際的 HTTP 就包含上述的資訊，以下分別簡單講解。在接下來的實作中，會更加明白，這些資訊如何互動。

HTTP Request

HTTP Request from Alpha Camp's material

• Method：處置資源的一個行動。
• URL：俗稱為網址，類似一個定位，每個定位都對應一筆獨特的資源。

HTTP Response

HTTP Request & Response from Alpha Camp's material

• Status：資源取得的狀態，細節可以參考 HTTP 狀態碼列表
• Content-Type：回傳的資源的格式，例如 text/html 等

Resources & URLs

URL 結構

• Protocal：使用的傳輸協定。
• Host：伺服器主機位址，通常是一串 IP 位址，例如192.168.100.1；而為了方便記憶通常會再向網域商租用一個網域名稱 （domain name），如 example.com 。在雲端部署的文章中會在細談。
• Port：通訊埠，可以想像為大樓的各間公寓，一個伺服器服務就會對應一個通訊埠。
• Path：取得檔案的路徑，不一定為伺服器中檔案存放的實際位置，通常特別設計，我的理解主要是資安及程式易讀性的考量。
• Parameter：可夾帶的參數也被稱為「查詢符（query）」，用以搭配某些功能的實作。

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。