websocket 之入門 (一)

1. 長連接技術介紹

說到websocket，必須講到在它以前的各類長連接技術，好比輪循，長輪循，sse等。長連接顧名思義，就是讓客戶端瀏覽器與服務器端保持長久的鏈接，並能持續通信，它還有一個特色，就是反向ajax，或叫服務器推技術。也就是說，服務器端也能經過這些手段實現向客戶端推送的技術，好比，在現實應用中，看到的股票數據實時更新，這是經過這種技術來實現的。由於服務器端沒法主動的向客戶端推送數據，只能經過客戶端鏈接上服務器端，而後被動地推送數據，這些鏈接到服務器端或者服務器端向客戶端發送數據的方法就能夠分紅不少種，好比最簡單的就是經過ajax隔一段時間發送http請求。

像輪循，長輪循等技術並不能實現真正意義上的實時，它是模擬型的實時，它發送的是完整的http請求。下面來具體說一下每一個技術的特色。

1.1 輪循

輪循，也叫短輪循，英文名也叫Polling。它很簡單，只是用ajax隔一段時間，多是1秒，2秒，時間本身設定，向服務器發送請求。這種方案會頻繁地與服務器通信，每次通信都是發送完整的http請求，若是服務器常常有數據變更，有迴應還好，有時候發送的請求都是沒有意義，都是在等服務器端的迴應，而服務器又沒有任何改變，因此這種方式很消耗網絡資源，很低效。

1.2 長輪循

長輪循是對定時輪詢的改進和提升，目地是爲了下降無效的網絡傳輸。這種方式也是經過ajax請求發送數據到服務器端，服務器端一直hold住這個鏈接，直到有數據到達，經過這種機制來減小無效的客戶端和服務器間的交互，好比能夠經過這種方式實現簡易型的聊天室，可是，若是服務端的數據變動很是頻繁的話，或者說訪問的人很是多的時候，這種機制和定時輪詢比較起來沒有本質上的性能的提升。

1.3 HTML5 服務器推送事件

英文名也叫HTML5 Server Sent Events (SSE) / EventSource。SSE是html5規範的一部分，它是一種流技術，它的規範由兩部分組成，第一個部分是服務器端與瀏覽器端之間的通信協議，第二部分則是在瀏覽器端提供 JavaScript 使用的 EventSource 對象。服務器端的響應的內容類型是「text/event-stream」，響應文本的內容能夠當作是一個事件流，它可以持續不斷地向服務器端推送數據。不過這種技術很難跨域，且對IE的支持並很差，但也不能表明這種技術是沒用或過期的，用它結合PostgreSQL的notify，或者Redis的pub/sub能夠輕易構建聊天室。

2. websocket

上述的幾種方法不表明就是過期沒用的，相反，在某一程度上，它們還在應用中，只是，如今咱們要來介紹一種更爲好，更實時的技術，它叫websocket。它也是一種協議，它是基於tcp協議的，它跟http協議同級，它在瀏覽器層次發揮做用，能夠由http協議升級爲ws協議，就像是http加個安全通道升級爲https協議同樣。它的原理是這樣的，因爲它是一個協議，它不用發送跟http一樣多的頭信息，它比較輕量，速度快。爲了創建一個 WebSocket 鏈接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和一般的 HTTP 請求不一樣，包含了一些附加頭信息，其中附加頭信息」Upgrade: WebSocket」代表這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息而後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 鏈接就創建起來了，雙方就能夠經過這個鏈接通道自由的傳遞信息，而且這個鏈接會持續存在直到客戶端或者服務器端的某一方主動的關閉鏈接。

在github.com或trello.com等應用就能夠看到websocket的使用。好比，github上的：

請求
Request URL:wss://live.github.com/_sockets/NzQwNjQzOjA4NmI3MGI3ODE2N2JmNGI2OTkwNTI1MzA3NjVjNjYxOjgxYTFjMzVlYTE0NDBkYTUxYjllNTc2NmNjYmE1MDg0ZWY2M2ZiZDQ1NWFmOTM5MWIwMmNlYTMzOGZlYWIwMzY=--46b941101badcb9affe775bd52bf902d4b57468c
Request Method:GET
Status Code:101 Switching Protocols

響應頭信息
Response Headers
Connection:Upgrade
Sec-WebSocket-Accept:ihEYOEOsteVV84Y2koOeMRELVT8=
Server:GitHub.com
Upgrade:websocket

請求頭信息
Request Headers
Connection:Upgrade
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:+wcmQ7sbHbIF7K/sGpkOKw==
Sec-WebSocket-Version:13
Upgrade:websocket

本篇完結。

下一篇：websocket之客戶端與服務器端的交互(二)