1、背景
在開發(fā)一些前端頁面的時候，總是能接收到這樣的需求：如何保持頁面并實現(xiàn)自動更新數(shù)據(jù)呢？以往的常規(guī)做法，是前端使用定時輪詢后端接口，獲取響應(yīng)后重新渲染前端頁面，這種做法雖然能達(dá)到類似的效果，但是依然有很多缺點，缺點就不在這里說了，感興趣的小伙伴可以自行查閱一下。現(xiàn)在讓我們回憶一下，我們有沒有想過，是否有一種技術(shù)，服務(wù)器可以主動將數(shù)據(jù)推送給客戶端進(jìn)行渲染，而不再是客戶端向服務(wù)器發(fā)出請求等待返回結(jié)果呢？接下來，讓我們一起了解 weboskcet。
2、什么是 websocket
websocket 是 html5 規(guī)范的一個部分，它借鑒了 socket 的思想，實現(xiàn)了瀏覽器與服務(wù)器全雙工通信，達(dá)到了即時通信的效果。websocket 協(xié)議基于 TCP 協(xié)議實現(xiàn)，包含初始的握手過程，以及后續(xù)的多次數(shù)據(jù)幀雙向傳輸過程，避免服務(wù)器頻繁打開多個 HTTP 連接，從而能更好的節(jié)省服務(wù)器資源和帶寬，提高工作效率與資源利用率
3、工作原理
websocket 的通信規(guī)范，首先瀏覽器通過 HTTP 協(xié)議發(fā)出 websocket 的連線請求，服務(wù)器進(jìn)行響應(yīng)，這個過程稱為握手，握手完成后，客戶端和服務(wù)器之間建立一個類似 TCP 的連接，使用 websocket 協(xié)議，從而實現(xiàn)它們之間的通信。
4、與 HTTP 的關(guān)系
相同點：
1、都是基于 TCP 協(xié)議，且都是可靠性傳輸協(xié)議；
2、都是應(yīng)用層協(xié)議；
3、websocket 支持兩種資源標(biāo)志符 ws（默認(rèn) 80 端口）與 wss（默認(rèn) 443 端口），類似 HTTP 和 HTTPS；
不同點：
1、websocket 是雙向通信協(xié)議，HTTP 是單向的；
2、websocket 是需要瀏覽器和服務(wù)器握手進(jìn)行建立連接的，HTTP 是瀏覽器發(fā)起向服務(wù)器的連接，服務(wù)器預(yù)先并不知道這個連接。
聯(lián)系點：
websocket 在建立握手時，數(shù)據(jù)是通過 HTTP 傳輸?shù)模⒅蟮臄?shù)據(jù)傳輸將不再需要 HTTP 協(xié)議，而是 websocket 協(xié)議；
5、websocket 創(chuàng)建與常用的屬性方法
5.1 websocket 屬性
屬性描述readyState只讀屬性 readyState 表示連接狀態(tài)，可以是以下值：0 ：表示連接尚未建立。1 ：表示連接已建立，可以進(jìn)行通信。2 ：表示連接正在進(jìn)行關(guān)閉。3 ：表示連接已經(jīng)關(guān)閉或者連接不能打開。bufferedAmount只讀屬性 bufferedAmount 已被 send () 放入正在隊列中等待傳輸，但是還沒有發(fā)出的 UTF-8 文本字節(jié)數(shù)。CONNECTING值為 0，表示正在連接OPEN值為 1，表示連接已建立，可以進(jìn)行通信CLOSING值為 2，表示連接正在關(guān)閉CLOSED值為 3，表示連接已經(jīng)關(guān)閉或者連接不能打開
// 創(chuàng)建websocket
var ws = new WebSocket("ws://www.example.com");
if(ws.readyState == ws.CONNECTING){
console.log('連接正在打開');
}
ws.onopen = function () {
ws.send(consumerId);
if(ws.readyState == ws.CONNECTING){
console.log('連接正在打開1');
}
if(ws.readyState == ws.OPEN){
console.log('連接已打開');
}
console.log('已經(jīng)建立連接');
// 關(guān)閉連接
// ws.close()
};
// 連接關(guān)閉時觸發(fā)
ws.onclose = function () {
if(ws.readyState == ws.CLOSED){
console.log('連接已關(guān)閉')
}
};
// 連接錯誤
ws. = function () {
console.log('連接錯誤');
};
5.2 weboscket 事件
事件處理程序描述openonopen連接建立時觸發(fā)messageonmessage接收消息時觸發(fā)error發(fā)生錯誤時觸發(fā)closeonclose關(guān)閉連接時觸發(fā)
5.3 客戶端的簡單示例
// 創(chuàng)建websocket
var ws = new WebSocket("ws://www.example.com");
// 連接成功時觸發(fā)
ws.onopen = function(e) {
console.log("Connectiong open ...");
// 發(fā)送消息
ws.send("Hello WebSocket");
};
// 接收消息時觸發(fā)
ws.onmessage = function(e) {
console.log("Received Message: " + e.data);
ws.close();
};
// 關(guān)閉連接時觸發(fā)
ws.onclose = function(e) {
console.log("Connection closed");
};
// 出現(xiàn)錯誤時觸發(fā)
ws. = function(e) {
console.log("error");
};
5.4 服務(wù)端的簡單示例
# 創(chuàng)建websocket服務(wù)端
from tornado.websocket import WebSocketHandler
class wsHandler(WebSocketHandler):
# 保存連接的用戶，用于后續(xù)推送消息
connect_users = set()
# 已與客戶端建立連接
def open(self):
print("開啟WebSocket opened")
self.connect_users.add(self)
# 關(guān)閉客戶端連接
def on_close(self):
self.connect_users.remove(self)
# 接收到消息
def on_message(self, message):
self.write_message("接收到客戶端的消息：{}".format(message))
# 所有用戶發(fā)送消息
@classmethod
def send_demand_updates(cls, message):
# 使用@classmethod可以使類方法在調(diào)用的時候不用進(jìn)行實例化
# 給所有用戶推送消息（此處可以根據(jù)需要，修改為給指定用戶進(jìn)行推送消息）
for user in cls.connect_users:
user.write_message(message)
# 允許WebSocket的跨域請求
def check_origin(self, origin):
return True
if __name__ == "__mAIn__":
# 調(diào)用
wsHandler。send_demand_updates("服務(wù)端發(fā)送給客戶端的消息")
注意：示例中使用 Python/ target=_blank class=infotextkey>Python 語言，需依托 tornado 框架搭建后端 web 服務(wù)端，文章中不再說明如何搭建服務(wù)端，感興趣的小伙伴可自行嘗試。tornado 內(nèi)置 websocket 模塊，能更簡單的支持使用 websocket。
6、總結(jié)
websocket 提供了一種低延遲、高性能的雙向數(shù)據(jù)通信，不同與 web 開發(fā)的請求、處理、等待響應(yīng)模式，它是客戶端、服務(wù)端因為同一個連接直接就可以數(shù)據(jù)互傳的模式，特別適合實時數(shù)據(jù)交互的應(yīng)用進(jìn)行開發(fā)。
實用點：
1、websocket 連接建立后，后續(xù)的數(shù)據(jù)傳輸都將以幀序列的形式傳輸；
2、在客戶端斷開 websocket 連接或服務(wù)端中斷連接前，不需要客戶端和服務(wù)端重新發(fā)起連接請求；
3、在海量并發(fā)、客戶端與服務(wù)器交互負(fù)載流量大的情況下，節(jié)省網(wǎng)絡(luò)帶寬資源的消耗，且客戶端發(fā)送與接收消息，都是在同一個持久連接上進(jìn)行，實現(xiàn)了 “真長連接”，真正的實現(xiàn)即時通信。
作者：京東物流 駱銅磊
來源：京東云開發(fā)者社區(qū) 自猿其說 Tech 轉(zhuǎn)載請注明來源
