# 六角計算機網路-HTTP前後端傳輸流程
## 什麼是伺服器
伺服器其實就是提供服務的電腦，例如網頁伺服器、檔案伺服器、郵件伺服器等。伺服器和家用電腦有很大的不同，家用電腦較注重顯示效果，無論是遊戲電玩、或是電腦繪圖都需要強大的顯示卡運算能力。

伺服器則重視運算以及資料安全，需要強大或多個 CPU，RAM 要插到最多最大，並選擇磁碟陣列（利用虛擬化儲存技術把多個硬碟組合起來，成為一個或多個硬碟陣列組，目的提升效能或資料冗餘或是兩者同時提升。）來保護資料。伺服器通常是 24 小時不關機。伺服器主機通常是放在機架裡，機架一般放置在機房。

### 網頁伺服器軟體
有了硬體，我們還需要伺服器軟體，以網頁為例有 Apache HTTP、微軟的 IIS等。

### Node.js 安裝伺服器
透過 node.js 建立網頁伺服器

npm i express-generator -g
express -h //了解 express 有哪些功能
express -e//使用 ejs 的功能
npm i
npm start

使用 npm start 建立伺服器後，進入 http://localhost:3000 會在 command line 看到以下訊息

GET / 200 154.296 ms - 207 //有人發了請求到這個伺服器
GET /stylesheets/style.css 200 12.922 ms - 111//有人拿了這個檔案
GET /favicon.ico 404 2.543 ms - 973

### 網址怎麼產生畫面
HTTP 通訊協定：跟網頁伺服器溝通的協定。
### HTTP VS HTML
- HTTP 是通訊協定
- HTML 是網頁標記語言，在網頁瀏覽契做視覺呈現。
### HTTPS
HTTPS 會加密內容傳輸，HTTP 沒有加密，只要攔截到封包就能看到傳送內容，所以來路不明免費 Wifi 不一定是安全的。
### localhost
localhost 是指向自己電腦的名稱。網址會先透過 DNS 伺服器解析成 IP，但 localhost 預設指向 127.0.0.1 的 IP。網址是給人看的，電腦則透過 IP 傳遞資料。
- 在網頁上打一個網址，其實是向 Dns server 發送一個 request 去解析網址對應的 IP，server 會回傳對應的 IP。
- 127.0.0.1 自己電腦的 IP 位址。
- IPv4 vs IPv6：127.0.0.1是 IPv4 格式（10進位），IPv6（16進位）用更多數組來解決 IP 不夠用的問題。
- :3000 是通訊符號，http 預設是 80，https 是443。預設的 port 可以不用加在網址中，每個 port 只能給一個應用程式監聽。
- FTP 檔案傳輸協定 =>21
- SMTP 簡單郵件傳輸協定 =>25
### 查詢 port 被誰占用

netstat -ano | findstr LISTENING //列出所有目前在監聽的 port
tasklist | findstr xxxx //xxxx 打電腦執行序編號

### TCP/IP
- TCP:資料量大的時候，會用 TCP 來做切割。
- IP:資料傳遞的位址。
- 產生 Request 封包：瀏覽器會向伺服器送出 request，然後等待 response 來解讀。
### Request 封包格式
- 常見的 method 有 get, post 等等。
- path 存取的路徑
- protocol 是通訊協定版本
#### Method
- get: 有限制大小，通常是 2kb。
- get 的 path 通常會有 ? 來切割第一個參數，之後的則用 &。
- post: 沒有上限。
- path 通常沒有問號，會在 header 後面附加傳遞的資料。
#### 檔案上傳的封包
- 通常也是用 post。
- headr 中有 Content-type，multipart 是指多組件的內容，boundary 後面有分隔線表示要區分開來的檔案。
#### 常見的 Header
- Host: 瀏覽器存取 host 的名稱，因為一個 IP 可以綁定多個不同的 Domain，此時需要 host 知道對應哪個伺服器。
- User-Agent: 瀏覽器名稱和版本，作業系統名稱和版本。
- Accept: 瀏覽器接受的類型，EX: text/plain, text/html。
- Accept-Language: 瀏覽器接受的語言，q 表示語言優先的權重，zh-tw;zh;q=0.9,en-US;q=0.8,en;q=0.7，優先採用最前面的語言。
- Accept-encoding: 瀏覽器支援的壓縮格式，大部分瀏覽器都支援 gzip 壓縮，伺服器則會壓縮內容後傳給瀏覽器，節省下載時間和頻寬。
- Date: 傳送瀏覽器時間給伺服器。
- Expect: 要求伺服器回應特定的結果，期望可以給想要的結果，但最終還是由伺服器決定。
- If-Modified-Since: 瀏覽器 cache 檔案，下一次 request 則會發送此 header，伺服器使用這時間來判定是否修改過檔案，沒有則會回傳 304。If-Modified-Since(時間)，If-None-Match(Hash code)。如果是帶時間，伺服器會去檢查檔案是否異動、修改過時間，沒有則回傳 304，304 表示沒有內容，瀏覽器收到 304 會從快取取出之前的內容。如果是 Hash code，會把網頁內容編碼起來，只要資料沒有異動，內容就會是一樣的。
- Cookie: 把瀏覽器的 cookie 傳給伺服器，讓伺服器知道目前瀏覽器紀錄了哪些資訊，知道瀏覽器的狀態，每一個 request 都會包含 cookie。圖檔也會包含 cookie，但圖檔的 cookie 沒有意義，因為不會解讀。
- Referer: 瀏覽器前一個瀏覽頁面的網址，可用此 header 判斷 request 的來源，但較不可靠，因為有可能遭到串改。
- Connection: 可以設定 Keep-Alive 保持連線時間，減少重新連接 TCP 連線次數，提高傳輸效率。
- Content-Type: 指傳送內容的格式，常見的格式為。
- Authorization: HTTP連線的身分驗證
- Upgrade: 升級到另外一個協定，ex: websocket。如果有需要 upgrade，Connection 會帶 Upgrade。
### Response
- Reponse 的 Header 一定放在最前面。
- Protocol: 通訊協定版本
- Status code: 狀態碼
1. 1xx: 訊息類。(收到請求，請求者繼續執行操錯) EX:100 Continue(server 請求希望收到更多資訊，通常是 request 帶有 except 要求)、101 Switiching Protocols(用在 websocket 初始化，然後切換到 TCP 連線，進行雙向資料傳輸)
2. 2xx: 成功類。(操作被成功接受並處理)
3. 3xx: 重新定向類。(需要進一步操作才能完成)
* 301 Moved Permanently(永久移動到新的網址，同時需要有 Location 的 Header，SEO 會被更新)
* 302 Found(找到網址，同時需要有 Location 的 Header，SEO 不會被更新)
* 304 Not Modified(內容未修改，回應不包含 Content，例如快取情形)
* 307 Temporary Redirect(暫時重新導向，與 302 很相似，但 302 從 post 進來會改成由 get 導向網址，307 不會變更請求方法。)
* 308 Permanent Redirect(永久重新導向，類似於301，好比是 302 與 307 之間的關係，不會變更請求方法)
4. 4xx: 客戶端錯誤類。(請求語法錯誤或無法完成請求)
* 401 Unauthorized(未驗證拒絕存取)
* 403 Forbidden(伺服器接受請求，但被拒絕處理)
* 404 Not Found(伺服器找不到要求的網頁)
* 413 Request Entity Too Large(通常是使用 ger 傳送 url 超過上限大小，伺服器無法處理)
5. 5xx: 伺服器錯誤類。(後端的問題)
* 500 Internal Server Error(伺服器法生錯誤，通常是後端程式有問題)
* 503 Service Unavailable(伺服器維護或者過載，伺服器當前無法處理請求)
*
#### 常見的 Response header
- Etag: 產生檔案的 hash code 給瀏覽器，下一次瀏覽器可以傳送 If-None-Match 給伺服器判斷是否有修改過檔案，沒有則回傳 304 並且不包含 Content。
- Last-Modified: 回傳檔案最後修改時間，下一次瀏覽器可以傳送 If-Modified-Since 給伺服器判斷是否有修改過檔案，沒有則回傳 304 並且不包含 Content。
- Catch-Contorl: 快取檔案的策略，max-age 則表示該檔案有效的 cache 秒數，no-cache 則表示不使用快取。
- HTTP 1.1 Cache 機制:https://blog.toright.com/posts/3414/%E5%88%9D%E6%8E%A2-http-1-1-cache-%E6%A9%9F%E5%88%B6.html
- Content-Type: 回覆 content 的 mime 類型，當 Content-Type 設為 text/html 和 text/plain 可同時設定 charset 文字編碼格式，若無 Content-Type，瀏覽器自動判斷。
- Content-Disposition: 讓瀏覽器可以打開下載視窗並且指定檔案名稱，例如：Content-Disposition: attachment; filename="download.zip"
- Content-length: 取得下載傳送內容的大小，讓瀏覽器可以判斷下載的速度。
- Location: 當狀態碼為 301 或 302 時，瀏覽器則會重新導向 Location 這個位置。
- Set-Cookie: 設定瀏覽器的 Cookie，當瀏覽器收到 header 則會建立 cookie 在瀏覽器中。
- Content-Encoding: 回傳內容的壓縮格式，讓瀏覽器知道該如何解壓縮內容。
- Access-Control-Allow-Origin: 准許跨網域存取的 Domain，全部網域是使用 * 字號表示，script 和 link 標籤不在此限。