iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 5

全端開發者必懂的「網路觀念」

internet by NASA

internet by NASA from Unsplash

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

為什麼要懂網路在幹嘛?

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

 

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

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

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

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

實際的網路運作機制

網路運作機制

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

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

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

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

Client & Server

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

HTTP from Network in DevTools

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

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

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

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

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

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

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

HTTP 超文本傳輸協定

HTTP Request & Response

HTTP Request & Response from Alpha Camp's material

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

HTTP Request

HTTP Request & Response

HTTP Request from Alpha Camp's material

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

HTTP Response

HTTP Response

HTTP Request & Response from Alpha Camp's material

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

Resources & URLs

URL structure

URL 結構

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

 


閱讀更多

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


上一篇
GitHub 遠端儲存庫 初步上手——全端產品工具箱 III
下一篇
Node.js & nvm 初步上手——全端產品工具箱 IV
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言