HTML5中WebSocket API的用法示例

這篇文章主要介紹了HTML5中WebSocket API的用法示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、什么是WebSocket API?

WebSocket API是下一代客戶端-服務器的異步通信方法。該通信取代了單個的TCP套接字，使用ws或wss協議，可用于任意的客戶端和服務器程序。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。

WebSocket API最偉大之處在于服務器和客戶端可以在給定的時間范圍內的任意時刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因為Ajax技術需要客戶端發起請求，而WebSocket服務器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。

Ajax技術很聰明的一點是沒有設計要使用的方式。WebSocket為指定目標創建，用于雙向推送消息。

二、WebSocket API的用法

只專注于客戶端的API，因為每個服務器端語言有自己的API。下面的代碼片段是打開一個連接，為連接創建事件監聽器，斷開連接，消息時間，發送消息返回到服務器，關閉連接。

// 創建一個Socket實例
var socket = new WebSocket('ws://localhost:8080'); 
// 打開Socket 
socket.onopen = function(event) { 
  // 發送一個初始化消息
  socket.send('I am the client and I\'m listening!'); 
  // 監聽消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 
  // 監聽Socket的關閉
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
  // 關閉Socket.... 
  //socket.close() 
};

WebSocket是HTML5開始提供的一種單個TCP連接上進行全雙工通訊的協議。

在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據相互傳送。

瀏覽器通過JavaScript向服務器發出建立WebSocket連接的請求，連接建立以后，客戶端和服務器之間就可以通過TCP連接直接交換數據。

當你獲取Web Socket連接后，你可以通過send（）方法來向服務器發送數據，并通過onmessage事件來接受服務器返回的數據。

以下api用于創建WebSocket對象。

var socket = new WebSocket(url,[protocol]);

以上代碼中第一個參數url，指定鏈接的URL。第二個參數protocol是可選的，指定了可接受的子協議。

WebSocket 屬性

以下是WebSocket對象的屬性。假定我們使用了以上代碼創建了socket對象：

Socket.readyState 只讀屬性readyState表示連接狀態，可以是以下值：

      1. 0-表示連接尚未建立。

      2. 1-表示鏈接已經建立，可以進行通行。

      3. 2-表示連接正在進行關閉。

      4. 3-表示連接已經關閉或者連接不能打開。

Socket.bufferedAmount 只讀butteredAmount已經send（）放入正在隊列中等待傳輸，但是還沒有發出的UTF-8文本字節數。

WebSocket事件

以下是WebSocket對象的相關事件。假定我們使用了創建的socket：

事件：open           message              error           close

事件處理程序：Socket.onopen           Socket.onmessage             Socket.onerror         Socket.onclose

描述：連接建立觸發             客戶端接受服務器端數據時觸發         通信發生錯誤時觸發       連接關閉時觸發

WebSocket方法

以下是WebSocket對象的相關方法。假定我們使用了以上代碼創建Socket對象：

方法： Socket.send()              Socket.close()

描述： 使用連接發送數據            關閉連接

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5中WebSocket API的用法示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!