這一章介紹如何用WebSocket API來控制協議和創建應用，運用http://websocket.org 提供的現有WebSocket服務器，我們可以收發消息、創建一些簡單的WebSocket應用。一步一步的學習使用WebSocket API，最后我們會討論瀏覽器的支持度和連通性。這一章的重點是WebSocket 協議在Web客戶端的應用，在稍后的章節會介紹WebSocket協議以及其使用環境。
綜述：
正如第一章提到的，WebSocket包含網絡協議和API，讓你能夠在客戶端和服務端創建WebSocket連接，第三章會詳細討論協議的細節，我們先看一下API。
WebSocket API其實就是一個使用WebSocket協議的接口，通過它來建立全雙工通道來收發消息，簡單易學，要連接遠程服務器，只需要創建一個WebSocket對象實體，並傳入一個服務端的URL。在客戶端和服務端一開始握手的期間，http協議升級到WebSocket協議就建立了連接，底層都是TCP協議。一旦建立連接，通過WebSocket接口可以反復的發送消息。在你的代碼里面，你可以使用異步事件監聽連接生命周期的每個階段。
WebSocket API是純事件驅動，一旦建立全雙工連接，當服務端給客戶端發送數據或者資源，它能自動發送狀態改變的數據和通知。所以你不需要為了狀態的更新而去輪訓Server，在客戶端監聽即可。在后續的章節我們會介紹更高級的協議，例如STOMP和XMPP，會學習不同的WebSocket API使用例子，然而現在，先仔細看看API。
入門：
首先，我們需要通過調用WebSocket構造函數來創建一個WebSocket連接，構造函數會返回一個WebSocket實例，可以用來監聽事件。這些事件會告訴你什么時候連接建立，什么時候消息到達，什么時候連接關閉了，以及什么時候發生了錯誤。WebSocket協議定義了兩種URL方案，WS和WSS分別代表了客戶端和服務端之間未加密和加密的通信。WS(WebSocket)類似於Http URL，而WSS（WebSocket Security）URL 表示連接是基於安全傳輸層（TLS/SSL）和https的連接是同樣的安全機制。
WebSocket的構造函數需要一個URL參數和一個可選的協議參數（一個或者多個協議的名字），協議的參數例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定義協議。而URL參數需要以WS://或者WSS://開頭，例如：ws://
www.websocket.org，如果URL有語法錯誤，構造函數會拋出異常。
// Create new WebSocket connection var ws = new WebSocket("ws://www.websocket.org"); //測試了下鏈接不上。
第二個參數是協議名稱，是可選的，服務端和客服端使用的協議必須一致，這樣收發消息彼此才能理解，你可以定義一個或多個客戶端使用的協議，服務端會選擇一個來使用，一個客服端和一個服務端之間只能有一個協議。當然都得基於WebSocket，WebSocket的重大好處之一就是基於WebSocket協議的廣泛使用，讓你的Web能夠擁有傳統桌面程序那樣的能力，這個我們將在第三章第六節學習到。
言歸正傳，我們回到構造函數，在第一次握手之后，和協議的名稱一起，客戶端會發送一個Sec-WebSocket-Protocol 頭，服務端會選擇0個或一個協議，響應會帶上同樣的Sec-WebSocket-Protocol 頭，否則會關閉連接。通過協議協商（Protocol negotiation ），我們可以知道給定的WebSocket服務器所支持的協議和版本，然后應用選擇協議使用。
// Connecting to the server with one protocol called myProtocol var ws = new WebSocket("ws://echo.websocket.org", "myProtocol"); //myProtocol 是假設的一個定義好的且符合標准的協議。
你可以傳遞一個協議的數組。
var echoSocket = new WebSocket("ws://echo.websocket.org", ["com.kaazing.echo","example.imaginary.protocol"]) //服務端會選擇其中一個使用 echoSocket.onopen = function(e) { // Check the protocol chosen by the server console.log(echoSocket.protocol); }
輸出：com.kaazing.echo
協議這個參數有三種。
1.注冊協議：根據RFC6455（WebSocket 協議）和IANA被官方注冊的標准協議。例如 微軟的SOAP。
看到兩個華為的
2.開放協議：被廣泛使用的標注協議，例如XMPP和STOMP。但沒有被正式注冊。
3.自定義協議：自己編寫和使用的WebSocket的協議。
協議會再后續章節給出詳細介紹，下面先看事件、對象和方法以及實例。
WebSocket事件：
WebSocket API是純事件驅動，通過監聽事件可以處理到來的數據和改變的鏈接狀態。客戶端不需要為了更新數據而輪訓服務器。服務端發送數據后，消息和事件會異步到達。WebSocket編程遵循一個異步編程模型，只需要對WebSocket對象增加回調函數就可以監聽事件。你也可以使用addEventListener()方法來監聽。而一個WebSocket對象分四類不同事件。
open:
一旦服務端響應WebSocket連接請求，就會觸發open事件。響應的回調函數稱為onopen。
// Event handler for the WebSocket connection opening ws.onopen = function(e) { console.log("Connection open..."); };
open事件觸發的時候，意味着協議握手結束，WebSocket已經准備好收發數據。如果你的應用收到open事件，就可以確定服務端已經處理了建立連接的請求，且同意和你的應用通信。
Message:
當消息被接受會觸發消息事件，響應的回調函數叫做onmessage。如下：
// 接受文本消息的事件處理實例： ws.onmessage = function(e) { if(typeof e.data === "string"){ console.log("String message received", e, e.data); } else { console.log("Other message received", e, e.data); } };
除了文本消息，WebSocket消息機制還能處理二進制數據，有Blob和ArrayBuffer兩種類型，在讀取到數據之前需要決定好數據的類型。
// 設置二進制數據類型為blob（默認類型） ws.binaryType = "blob"; // Event handler for receiving Blob messages ws.onmessage = function(e) { if(e.data instanceof Blob){ console.log("Blob message received", e.data); var blob = new Blob(e.data); } };
//ArrayBuffer ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { if(e.data instanceof ArrayBuffer){ console.log("ArrayBuffer Message Received", + e.data); // e.data即ArrayBuffer類型 var a = new Uint8Array(e.data); } };
Error
如果發生意外的失敗會觸發error事件，相應的函數稱為onerror,錯誤會導致連接關閉。如果你收到一個錯誤事件，那么你很快會收到一個關閉事件，在關閉事件中也許會告訴你錯誤的原因。而對錯誤事件的處理比較適合做重連的邏輯。
//異常處理 ws.onerror = function(e) { console.log("WebSocket Error: " , e); //Custom function for handling errors handleErrors(e); };
Close
不言而喻，當連接關閉的時候回觸發這個事件，對應onclose方法，連接關閉之后，服務端和客戶端就不能再收發消息。
WebSocket的規范其實還定義了ping和pong 架構（frames），可以用來做keep-alive，心跳，網絡狀態查詢，latency instrumentation（延遲儀表？），但是目前 WebSocket API還沒有公布這些特性，盡管瀏覽器支持了ping，但不會觸發ping事件，相反，瀏覽器會自動響應pong，第八章會將更多關於ping和pong的細節。
當然你可以調用close方法斷開與服務端的鏈接來觸發onclose事件，
ws.onclose = function(e) { console.log("Connection closed", e); };
連接失敗和成功的關閉握手都會觸發關閉事件，WebSocket的對象的readyState屬性就代表連接的狀態（2代表正在關閉，3代表已經關閉）。關閉事件有三個屬性可以用來做異常處理和重獲： wasClean,code和reason。wasClean是一個bool值，代表連接是否干凈的關閉。 如果是響應服務端的close事件，這個值為true，如果是別的原因，比如因為是底層TCP連接關閉，wasClean為false。code和reason代表關閉連接時服務端發送的狀態，這兩個屬性和給入close方法的code和reason參數是對應的，稍后會描述細節。
WebSocket 方法：
WebSocket 對象有兩個方法：send()和close()
send():
一旦在服務端和客戶端建立了全雙工的雙向連接，可以使用send方法去發送消息，
//發送一個文本消息 ws.send("Hello WebSocket!");
當連接是open的時候send()方法傳送數據，當連接關閉或獲取不到的時候回拋出異常。一個通常的錯誤是人們喜歡在連接open之前發送消息。如下所示：
// 這將不會工作 var ws = new WebSocket("ws://echo.websocket.org") ws.send("Initial data");
正確的姿勢如下，應該等待open事件觸發后再發送消息。
var ws = new WebSocket("ws://echo.websocket.org") ws.onopen = function(e) { ws.send("Initial data"); }
如果想通過響應別的事件去發送消息，可以檢查readyState屬性的值為open的時候來實現。
function myEventHandler(data) { if (ws.readyState === WebSocket.OPEN) { //open的時候即可發送 ws.send(data); } else { // Do something else in this case. //Possibly ignore the data or enqueue it. } }
發送二進制數據：
// Send a Blob var blob = new Blob("blob contents"); ws.send(blob); // Send an ArrayBuffer var a = new Uint8Array([8,6,7,5,3,0,9]); ws.send(a.buffer);
Blob對象和JavaScript File API一起使用的時候相當有用，可以發送或接受文件，大部分的多媒體文件，圖像，視頻和音頻文件。這一章末尾會結合File API提供讀取文件內容來發送WebSocket消息的實例代碼。
close()
使用close方法來關閉連接，如果連接以及關閉，這方法將什么也不做。調用close方法只后，將不能發送數據。
ws.close();
close方法可以傳入兩個可選的參數，code（numerical）和reason（string）,以告訴服務端為什么終止連接。第三章講到關閉握手的時候再詳細討論這兩個參數。
// 成功結束會話 ws.close(1000, "Closing normally"); //1000是狀態碼，代表正常結束。
WebSocket 屬性
WebSocket對象有三個屬性，readyState，bufferedAmount和Protocol。
readyState：
WebSocket對象通過只讀屬性readyState來傳達連接狀態，它會更加連接狀態自動改變。下表展示了readyState屬性的四個不同的值。
|
屬性
|
值
|
狀態
|
|
WebSocket.CONNECTING
|
0 |
連接正在進行，但還沒有建立
|
|
WebSocket.OPEN
|
1
|
連接已經建立，可以發送消息。 |
|
WebSocket.CLOSING
|
2
|
連接正在進行關閉握手 |
|
WebSocket.CLOSED
|
3
|
連接已經關閉或不能打開 |
了解當前連接的狀態有助於我們調試。
bufferedAmount：
有時候需要檢查傳輸數據的大小，尤其是客戶端傳輸大量數據的時候。雖然send()方法會馬上執行，但數據並不是馬上傳輸。瀏覽器會緩存應用流出的數據，你可以使用bufferedAmount屬性檢查已經進入隊列但還未被傳輸的數據大小。這個值不包含協議框架、操作系統緩存和網絡軟件的開銷。
下面這個例子展示了如何使用bufferedAmount屬性每秒更新發送。如果網絡不能處理這個頻率，它會自適應。
// 10k var THRESHOLD = 10240; //建立連接 var ws = new WebSocket("ws://echo.websocket.org"); // Listen for the opening event ws.onopen = function () { setInterval( function() { //緩存未滿的時候發送 if (ws.bufferedAmount < THRESHOLD) { ws.send(getApplicationState()); } }, 1000); }; //使用bufferedAmount屬性發送數據可以避免網絡飽和。
protocol：
在構造函數中，protocol參數讓服務端知道客戶端使用的WebSocket協議。而WebSocket對象的這個屬性就是指的最終服務端確定下來的協議名稱，當服務端沒有選擇客戶端提供的協議或者在連接握手結束之前，這個屬性都是空的。
完整實例
現在我們已經過了一遍WebSocket的構造函數、事件、屬性和方法，接下來通過一個完整的實例來學習WebSocket API。實例使用“Echo”服務器：ws://echo.websocket.org，它能夠接受和返回發過去的數據。這樣有助於理解WebSocket API是如何和服務器交互的。
首先，我們先建立連接，讓頁面展示客戶端連接服務端的信息，然后發送、接受消息，最后關閉連接。
<h2>Websocket Echo Client</h2> <div id="output"></div>
// 初始化連接和事件 function setup() { output = document.getElementById("output"); ws = new WebSocket("ws://echo.websocket.org/echo"); // 監聽open ws.onopen = function (e) { log("Connected"); sendMessage("Hello WebSocket!"); } // 監聽close ws.onclose = function (e) { log("Disconnected: " + e.reason); } //監聽errors ws.onerror = function (e) { log("Error "); } // 監聽 messages ws.onmessage = function (e) { log("Message received: " + e.data); //收到消息后關閉 ws.close(); } } // 發送消息 function sendMessage(msg) { ws.send(msg); log("Message sent"); } // logging function log(s) { var p = document.createElement("p"); p.style.wordWrap = "break-word"; p.textContent = s; output.appendChild(p); // Also log information on the javascript console console.log(s); } // Start setup();
判斷瀏覽器是否支持：
if (window.WebSocket){ console.log("This browser supports WebSocket!"); } else { console.log("This browser does not support WebSocket."); }