Web Sockets----(《JavaScriopt高級程序設計》學習筆記)
Web Sockets
相關知識
Web Sockets 的目標是在一個單獨的持久連接上提供全雙工、雙向通信。在JavaScript中創建了Web Sockets之後,會有一個HTTP請求發送到瀏覽器以發起連接。在取得服務器響應後,建立的連接會使用HTTP升級從HTTP協議交換為Web Sockets協議。也就是說,使用標準的HTTP服務器無法實現Web Sockets,只有支持這種協議的專門服務器才能正常工作。
由於Web Sockets使用了自定義協議,所以URL模式也略有不同。未加密的連接是ws:// ;加密的是wss://。
使用自定義協議而非HTTP協議的好處是,能夠在客戶端和服務器之間發送非常少量的數據,而不必擔心HTTP那樣字節級的開銷。由於傳遞的數據包很小,因此Web Sockets非常適合移動應用。畢竟對移動應用而言,帶寬和網絡延遲都是關鍵問題。
Web Sockets API
1. 創建Web Socket
先實例一個WebSockets對象並傳入要連接的URL,例如:(註意:傳入絕對URL,雖然同源策略對Web Socket不適用,但能否與某個域通信,完全取決於服務器)
var sockets = new WebSocket("ws://www.example.com/sever.php");
Web Socket 表示當前狀態的readyState屬性值:
①WebSocket.OPENING(0):正在建立連接。
②WebSocket.OPEN(1):已經建立連接。
③WebSocket.CLOSING(2):正在關閉連接。
④WebSocket.CLOSE(3):已經關閉連接。
要關閉Web Socket 連接,可以在任何時候調用close() 方法。
2. 發送和接受數據
使用 send() 方法並傳入任意字符串,例如:
var socket = new WebSocket("ws://www.example.com/sever.php");
socket.send("Hello World") ;
如果要發送復雜的數據結構,請先將數據序列化為一個JSON字符串,再發送給服務器,例如:
var message = {
time: new Date(),
text: "hello world"
}
socket.send(JSON.stringify(message));
服務器讀取其中數據後,解析接受到的JSON字符串。當服務器向客戶端發來數據時,WebSocket對象會觸發message事件,並把放回的數據保存在event.data 屬性中。
socket.onmessage = function(event){
var data = event.data; //返回的event.data 也是字符串
//do something
}
3. 其他事件
WebSocket 對象還有其他三個事件,在連續生命周期的不同階段觸發。
①open:在成功建立連接時觸發。
②error:在發生錯誤時觸發,連接不能持續。
③close:在連接關閉時觸發。
其中close事件的event對象有三個額外的屬性:
①wasClean:布爾值,表示連接是否已經明確關閉。
②code:服務器返回的數據狀態碼。
③reason:字符串,包含服務器發回的消息。
最後:
常見使用 WebSocket 的情況:(在無法選擇Web Socket的情況下,組合XHR 和 SSE 也能實現雙向通信)
①有專門的服務器,
②用例之間必須雙向通信(如聊天室)。
Web Sockets----(《JavaScriopt高級程序設計》學習筆記)