SSE(Server Sent Event) vs WebSocket vs XHR?

by Michael.K

最近在研究realtime(for text, for image, for video...)剛好讀到一些協定的實作，那我們比較常在web技術上面見到的包含了SSE、WebSocket及XHR(Ajax)，這裡將會簡短的區分下面這幾種協定的優缺點及方式。

XHR(Ajax)

XHR一般來說就是跨網頁存取，通常我們稱作Ajax，而所謂的Ajax呢，就是Asynchronous JavaScript and XML，用比較熟悉的說法就是API(Application Interface)，通常是以JSON或是XML等格式做跨網頁存取的作法。
大部份來說ajax為一次性的存取，不會再另外要新的資料，但由於後期的需求，分別演化出了兩種模式：

  1. 輪詢(polling)

輪詢的方式是比較老舊的做法，通常的解法就是持續的定時發送一個XHR的ajax請求，拿到資料後立刻更新頁面資料

  1. 長輪詢(long-polling)

長輪詢跟輪詢很像，通常是client端發出請求後，server端有新資料才向client端反應，反應完後又去等新的資料。
這樣的做法有個好處是可以減少輪詢造成的大量網路資源的浪費，而且可以做更有效的更新，不會像原本的輪詢頻繁的更新頁面。

WebSocket

在web技術中是一種雙向的溝通模式，他主要會維持一個connection到client端離開為止，所以對server來說會做持續連接。那WebSocket連線發起者通常都是由client所發起，他的模式會接近這樣

browser與server會透過send及onMessage達到互相溝通的效果，比較值得注意的是websocket走的是特殊的ws protocol，不是以往的http protocol而且因為保持一個連線的原因，所以server端的port會持續開啟

有興趣的可以參考已經實作的介面socket.io http://socket.io

SSE(Server Sent Event)

SSE是一個蠻有趣的東西，他一樣被定義在html5的標準內，他主要是一個持續性的http連線，透過一直對資料進行清除及新增來實作，跟前面提到的websocket類似，但是他是「單方面」的由server端去push資料給browser。
關於實作部份，唯一一點需要注意的是SSE是使用text/event-stream作為識別的header，而且理論上來說SSE只能傳送text型別的資料，詳細一點的可以參考html5rock。
類似的架構會長的像是這樣