HTTP

前言 現今網路世界主要都是用 HTTP request-response 的 model 來做為溝通的模型，client 發送 request 給 server，server 再回傳 response 給 client，但是隨著 Web 的需求改變與技術的演進，漸漸需要另一種溝通方式，來讓 server 無須被 client 請求時就能主動傳送資料給 client，最常見的例子就是股票網站的股價更新、新聞網站的文章更新…等等，或是需要前後端雙方即時溝通的需求，衍生出 WebSockets 的誕生。技術上區分為 Client Pull 和 Server Push 兩種，本篇文章就稍微總結這兩種方式的差異，以及各自有哪些方法 實時更新的幾種方式 主要分成以下幾種方式: Client Pull Short Polling Long Polling Server Push WebSockets SSE (Server Send Event) Short Polling vs Long Polling 早期更新方式是透過 JavaScript 的 Polling(輪詢)來獲得 server 最新的資料 Short polling Short polling 是一個 AJAX-based 的 timer，讓 client 每隔一段時間去向 server 獲取資源，但效能不好，因為有可能 client 每隔 N 秒去問 server 時這 N 秒內資料都沒改動，就會浪費網路資源...

前言 前陣子開發時，遇到 Node.js 上傳檔案到某個 file storage 時的問題，後來深入研究了一下上傳檔案時的 Content-Type: multipart/form-data，順手記錄一下，也透過常用套件 multer, busboy 的原始碼來驗證這些機制的存在。 何謂 boundary? 網路世界中，HTTP 協定定義了 Content-Type 標頭檔來規範資料傳遞的格式， 其中表單(Form)提交是很常見的情境，而表單提交的 Content-Type 主要有三種，並寫在 form 的 enctype 屬性裏頭: application/x-www-form-urlencoded multipart/form-data text/plain 第一種 application/x-www-form-urlencoded 會被表單轉換成 url 帶上 query params 的格式，例如: ?name=Madi&age=20，使用 & 符號作為參數的分隔符(Delimiter)。 第二種 multipart/form-data 就是本篇文章要探討的主角，他也有類似 application/x-www-form-urlencoded 的分隔符 &，但是是使用 boundary 作為分隔符，在上傳檔案的 Request Header 都可以看見它的存在，而主要目的就是透過這個分隔符來區分不同格式的資料，例如圖片、檔案、影片…等等。 boundary 可以是任意符合 ascii-7 的字元，可以自己定義他的值，但開頭需要兩個 hyphen(連字號-)，且長度須限制於 70 字元以內。當送出請求的 Content-Type 是 multipart/form-data時，強制規定必須帶上 boundary才能成功派送，但若是使用瀏覽器來發送，他會自己幫我們帶上一組 boundary。 例如，底下寫個簡單的 fetch，帶上 local 的某個文字檔 <script> const formData = new FormData(); formData....