WebSocket 對(duì)web應(yīng)用來將是一個(gè)事件驅(qū)動(dòng)，全雙工異步通信通道(WebSocket is an event-driven, full-duplex asynchronous communications channel for your web applications)
websocket特點(diǎn)：
- 在TLS(Transport Layer Security 或 SSL)協(xié)議上進(jìn)行操作
- 能夠?qū)崟r(shí)的更新碰辅，減少客戶端和服務(wù)端(更多)資源需求
- 使用HTTP作為初始化傳輸機(jī)制峰鄙，客戶端接受到響應(yīng)之后俭厚，通信不會(huì)中斷，因此能夠拜托傳統(tǒng)的HTTP request/response 模式的約束
- 只要連接(connection)保持打開，客戶端和服務(wù)端就能夠自由異步的發(fā)送信息锄码，而不用使用輪詢(polling)
學(xué)習(xí)目標(biāo)：
- 了解Websocket API
- Websocket 協(xié)議： 信息傳遞工具
- web 應(yīng)用中如何使用
API
初始化
WebSocket 的構(gòu)造器有2個(gè)參數(shù)：
-
URL： 用作連接到服務(wù)器触徐，如果不指定端口咪鲜，則會(huì)通過默認(rèn)端口80(HTTP 端口)或者端口443(HTTPS 端口)連接 -
protocol(可選參數(shù)): 可以是數(shù)組或者一個(gè)字符串，不傳入則默認(rèn)為空字符串撞鹉，用來指定子協(xié)議(subprotocols)嗜诀。頭文件作為 Sec-WebSocket-Protocol,一個(gè)server能夠?qū)崿F(xiàn)多個(gè)WebSocket子協(xié)議
WebSocket的一些協(xié)議：
- Registered protocols: 在WebSocket RFC6455的規(guī)范中，第11.5節(jié)定義了子協(xié)議名稱由IANA維護(hù)注冊(cè)的注冊(cè)管理機(jī)構(gòu)孔祸。
- Opened protocols: 可以使用開發(fā)的未注冊(cè)的協(xié)議隆敢，比如XMPP(Extensible Messaging and Presence Protocol) 或者 STOMP(Simple Text Oriented Message Protocol 面向簡(jiǎn)單文字信息協(xié)議)
- Custom protocols: 可以自由設(shè)計(jì)協(xié)議，只要客戶端和服務(wù)端都支持崔慧，推薦使用包含子協(xié)議發(fā)起方(originator)的域名的ASCII版本的名稱拂蝎，比如：chat.acme.com
使用本地server,而不使用web server代理連接的話，可以通過下列方式來實(shí)例化一個(gè)WebSocket對(duì)象
# 此處URL為: 'ws://localhost:8181'
# 如果使用TLS傳輸協(xié)議惶室，URL中的'ws://' 可以用 'wss://'替換
var ws = new WebSocket('ws://localhost:8181');
事件
open
當(dāng)WebSocket server響應(yīng)連接請(qǐng)求温自，握手完成，open 事件觸發(fā)皇钞，連接建立悼泌。
此時(shí)服務(wù)端完成握手，準(zhǔn)備好發(fā)送信息和接收來自客戶端應(yīng)用的信息
var stock_request = {"stock": ["AAPL", "MSFT", "AMZN", "GOOG", "YHOO"]}
// WebSocket 連接建立
ws.onopen = function(e) {
console.log('Connection established');
ws.send(JSON.stringify(stock_request));
};
// stock_request json化后的字符串通過WebSocket發(fā)送給服務(wù)端
// 服務(wù)端知道哪些stocks需要更新
// 并且每隔1s向客戶端將信息發(fā)送這些stocks信息
可以通過這個(gè)事件夹界，可以向服務(wù)器發(fā)送信息馆里，并且輸出狀態(tài)到屏幕，連接已準(zhǔn)備好可柿，可以開始雙向的通信
message
當(dāng)服務(wù)器端有數(shù)據(jù)鸠踪，WebSocket API將調(diào)用 'message' 事件
error
當(dāng)發(fā)生錯(cuò)誤時(shí)，'error'事件觸發(fā)复斥，然后 'close' 事件將觸發(fā)或者嘗試重新連接营密，code 和 reason 特性能夠提供一些錯(cuò)誤信息
ws.onerror = function(e) {
console.log('WebSocket failure, error', e);
handleErrors(e);
}
PING/PONG
WebSocket協(xié)議調(diào)用2種幀類型： PING 和 PONG。
客戶端不能夠發(fā)送PING到服務(wù)端目锭，PING只能由服務(wù)端發(fā)送评汰，瀏覽器應(yīng)當(dāng)以PONG作為回應(yīng)
close
當(dāng)WebSocket連接關(guān)閉纷捞，'close'事件將觸發(fā)，同時(shí)'onerror' 將被執(zhí)行被去。一旦此事件觸發(fā)兰绣，服務(wù)器和客戶端的連接也就斷開了
code 和 reason 特性，可以用于指示要處理的錯(cuò)誤條件或close事件的原因,
wasClean(布爾值)可以用來判斷中斷是否完整编振， readyState 的值缀辩，從2('closing') 變?yōu)?3('closed')
// close事件
ws.onclose = function(e) {
console.log(e.reason + ' ' + e.code);
for (var symbol in stocks) {
if (stocks.hasOwnProperty(symbol)) {
stocks[symbol] = 0;
}
}
}
// close方法
ws.close(1000, 'WebSocket connection closed');
方法
WebSocket的創(chuàng)建者使它的方法十分的簡(jiǎn)單，只有2個(gè)方法：
- send()
- close()
send()
當(dāng)客戶端和服務(wù)端建立起連接踪央，客戶端可以指定什么類型的數(shù)據(jù)能夠被傳遞臀玄，能夠接收 string 和 binary 的值。
我們知道WebSocket是事件驅(qū)動(dòng)的畅蹂，使用此事件前健无，必須保證連接已經(jīng)打開，并且準(zhǔn)備好了接收消息液斜，可以通過下面2種方式來完成：
1.在 onopen 事件中發(fā)送數(shù)據(jù)
var ws = new WebSocket('ws://localhost:8181');
ws.onopen = function(e) {
ws.send(JSON.stringify(stock_request));
}
2.檢查 readyState 特性累贤，確保WebSocket對(duì)象準(zhǔn)備好了接收messages
function processEvent(e) {
if (ws.readyState === WebSocket.OPEN) {
// Socket 打開，Send
ws.send(e);
} else {
// 顯示錯(cuò)誤信息少漆，待會(huì)再發(fā)送
}
}
close()
斷開WebSocket連接或者中斷嘗試連接完成可以使用 close方法臼膏，調(diào)用此方法之后，數(shù)據(jù)就不能夠再傳遞了
可以不帶參數(shù)使用：
ws.close()
或者傳入一個(gè) 數(shù)字代碼 和 關(guān)閉原因
ws.close(1000, 'Goodbye, World');
數(shù)字代碼：
-
1000：
CLOSE_NORMAL,正常關(guān)閉示损，連接任務(wù)已經(jīng)成功完成 -
1001：
CLOSE_GOING_AWAY,終端離開渗磅，要么服務(wù)器失敗或者瀏覽器離開連接的頁(yè)面 -
1002：
CLOSE_PROTOCOL_ERROR, 由于協(xié)議錯(cuò)誤，終端終止連接 -
1003：
CLOSE_UNSUPPORTED,由于終端接收到的數(shù)據(jù)類型不支持检访，連接斷開 -
1004：
CLOSE_TOO_LARGE,接收到的數(shù)據(jù)過大導(dǎo)致連接斷開 -
1005：
CLOSE_NO_STATUS,保留數(shù)字代碼始鱼，顯示沒有狀態(tài)碼被提供 -
1006：
CLOSE_ABNORMAL,表示連接意外被終止
特性(Attributes)
當(dāng)連接建立(open),客戶端應(yīng)用中有幾個(gè)可使用的特性
readyState
只讀，在客戶端發(fā)送數(shù)據(jù)之前最好先檢查一下這個(gè)屬性脆贵，這個(gè)屬性有4個(gè)值医清，分別表示W(wǎng)ebSocket不同的狀態(tài):
-
WebSocket.CONNECTING:0, 連接還沒有打開 -
WebSocket.OPEN:1,連接打開，準(zhǔn)備好通信 -
WebSocket.CLOSING:2,連接正在關(guān)閉中 -
WebSocket.CLOSED:3,連接關(guān)閉
不同的值可以用于調(diào)試和了解連接服務(wù)器的生命周期
bufferedAmount
發(fā)送到服務(wù)器的緩存數(shù)據(jù)量卖氨，多用于發(fā)送 binary 數(shù)據(jù)会烙，因?yàn)樵摂?shù)據(jù)量給瀏覽器處理過大，這個(gè)屬性最大的用處就是 在關(guān)閉連接之前確保所有的數(shù)據(jù)都被發(fā)送双泪，并且實(shí)現(xiàn)客戶端節(jié)流(throttling)
protocol
WebSocket構(gòu)造器可選參數(shù)持搜，客戶端發(fā)送多個(gè)子協(xié)議到服務(wù)器，服務(wù)器決定選取那個(gè)協(xié)議焙矛，客戶端和服務(wù)端握手完成，服務(wù)端應(yīng)當(dāng)包含選擇的協(xié)議或者什么也沒有
總結(jié)
本章主要了解了WebSocket的一些基本概念残腌，以及WebSocket建立客戶端與服務(wù)端的優(yōu)勢(shì)村斟，主要有：
- WebSocket的定義
- WebSocket對(duì)象的實(shí)例化贫导，2個(gè)參數(shù)，URL蟆盹，protocols(可選)
- WebSocket相關(guān)的一些事件：open, message, error, close, PING/PONG
- 2個(gè)方法：send(), close()
- 特性：readyState孩灯，bufferedAmount, protocol
