前言
在WebSocket之前，開發(fā)者完成實時通訊大抵都是求助一些‘hacks’來實現(xiàn)實時通訊随珠。最流行的一種方式是長輪詢?灭袁。?長輪詢主要是發(fā)出一個HTTP請求到服務器，然后保持連接打開以允許服務器在稍后的時間響應（由服務器確定）窗看∪灼纾可想而知，這是很浪費資源的显沈。
WebSocket
它實現(xiàn)了瀏覽器與服務器全雙工通信(full-duplex)软瞎，可以傳輸基于消息的文本和二進制數(shù)據(jù)逢唤。WebSocket簡單的API背后隱藏了很多復雜性。他還提供了更多的服務：
- 連接協(xié)商和同源策略
- 與既有 HTTP 基礎設施的互操作
- 基于消息的通信和高效消息分幀
- 子協(xié)議協(xié)商及可擴展能力
API
var ws = new WebSocket('wss://xxxxxxxxx')
// 建立連接
ws.onerror = function () { // do something }
// 錯誤調用
ws.onclose = function () { ... }
// 關閉時調用
ws.onopen = function () {
// 連接建立時調用
ws.send("Connection established. Hello server!");
// 向服務端發(fā)送消息
}
接受數(shù)據(jù)與發(fā)送數(shù)據(jù)
處理數(shù)據(jù)
ws.onmessage = function(msg) {
// 接收服務端發(fā)送的消息
if(msg.data instanceof Blob) {
// 處理二進制信息
processBlob(msg.data);
} else {
processText(msg.data);
// 處理文本信息
}
}
應用只需監(jiān)聽onmessage事件涤浇，用回調處理返回數(shù)據(jù)即可鳖藕。 WebSocket支持文本和二進制數(shù)據(jù)傳輸，瀏覽器如果接收到文本數(shù)據(jù)只锭，會將其轉換為DOMString 對象吊奢，如果是二進制數(shù)據(jù)或Blob 對象，可直接將其轉交給應用或將其轉化為ArrayBuffer纹烹，由應用對其進行進一步處理。
詳細處理：
wss.onmessage = function(msg) {
if(msg.data instanceof ArrayBuffer) {
processArrayBuffer(msg.data);
} else {
processText(msg.data);
}
}
發(fā)送
ws.onopen = function () {
socket.send("Hello server!");
socket.send(JSON.stringify({'msg': 'payload'}));
var buffer = new ArrayBuffer(128);
socket.send(buffer);
var intview = new Uint32Array(buffer);
socket.send(intview);
var blob = new Blob([buffer]);
socket.send(blob);
}
名稱解釋：
Blob
ArrBuffer
Blob 對象是包含有只讀原始數(shù)據(jù)的類文件對象召边，可存儲二進制數(shù)據(jù)铺呵，它會被寫入磁盤；ArrayBuffer （緩沖數(shù)組）是一種用于呈現(xiàn)通用隧熙、固定長度的二進制數(shù)據(jù)的類型片挂，作為內存區(qū)域可以存放多種類型的數(shù)據(jù)。
對于將要傳輸?shù)亩M制數(shù)據(jù)贞盯，開發(fā)者可以決定以何種方式處理音念，可以更好的處理數(shù)據(jù)流，Blob 對象一般用來表示一個不可變文件對象或原始數(shù)據(jù)躏敢，如果你不需要修改它或者不需要把它切分成更小的塊闷愤，那這種格式是理想的；如果你還需要再處理接收到的二進制數(shù)據(jù)件余，那么選擇ArrayBuffer 應該更合適讥脐。
ws
wss
WebSocket 資源URI采用了自定義模式：ws 表示純文本通信（ 如ws://example.com/socket），wss 表示使用加密信道通信（TCP+TLS）啼器。為什么不使用http而要自定義呢旬渠？
WebSocket 的主要目的，是在瀏覽器中的應用與服務器之間提供優(yōu)化的端壳、雙向通信機制告丢。可是损谦，WebSocket 的連接協(xié)議也可以用于瀏覽器之外的場景岖免，可以通過非HTTP協(xié)商機制交換數(shù)據(jù)。
- ws協(xié)議：普通請求成翩，占用與http相同的80端口
- wss協(xié)議：基于SSL的安全傳輸觅捆，占用與tls相同的443端口。
參考文獻：
Google
掘金
