HTML5中WebSocket API的用法示例

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

一、什么是WebSocket API?

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

WebSocket API最偉大之處在于服務(wù)器和客戶端可以在給定的時(shí)間范圍內(nèi)的任意時(shí)刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因?yàn)锳jax技術(shù)需要客戶端發(fā)起請(qǐng)求，而WebSocket服務(wù)器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。

Ajax技術(shù)很聰明的一點(diǎn)是沒(méi)有設(shè)計(jì)要使用的方式。WebSocket為指定目標(biāo)創(chuàng)建，用于雙向推送消息。

二、WebSocket API的用法

只專注于客戶端的API，因?yàn)槊總€(gè)服務(wù)器端語(yǔ)言有自己的API。下面的代碼片段是打開(kāi)一個(gè)連接，為連接創(chuàng)建事件監(jiān)聽(tīng)器，斷開(kāi)連接，消息時(shí)間，發(fā)送消息返回到服務(wù)器，關(guān)閉連接。

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

WebSocket是HTML5開(kāi)始提供的一種單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議。

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

瀏覽器通過(guò)JavaScript向服務(wù)器發(fā)出建立WebSocket連接的請(qǐng)求，連接建立以后，客戶端和服務(wù)器之間就可以通過(guò)TCP連接直接交換數(shù)據(jù)。

當(dāng)你獲取Web Socket連接后，你可以通過(guò)send（）方法來(lái)向服務(wù)器發(fā)送數(shù)據(jù)，并通過(guò)onmessage事件來(lái)接受服務(wù)器返回的數(shù)據(jù)。

以下api用于創(chuàng)建WebSocket對(duì)象。

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

以上代碼中第一個(gè)參數(shù)url，指定鏈接的URL。第二個(gè)參數(shù)protocol是可選的，指定了可接受的子協(xié)議。

WebSocket 屬性

以下是WebSocket對(duì)象的屬性。假定我們使用了以上代碼創(chuàng)建了socket對(duì)象：

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

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

      2. 1-表示鏈接已經(jīng)建立，可以進(jìn)行通行。

      3. 2-表示連接正在進(jìn)行關(guān)閉。

      4. 3-表示連接已經(jīng)關(guān)閉或者連接不能打開(kāi)。

Socket.bufferedAmount 只讀butteredAmount已經(jīng)send（）放入正在隊(duì)列中等待傳輸，但是還沒(méi)有發(fā)出的UTF-8文本字節(jié)數(shù)。

WebSocket事件

以下是WebSocket對(duì)象的相關(guān)事件。假定我們使用了創(chuàng)建的socket：

事件：open           message              error           close

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

描述：連接建立觸發(fā)             客戶端接受服務(wù)器端數(shù)據(jù)時(shí)觸發(fā)         通信發(fā)生錯(cuò)誤時(shí)觸發(fā)       連接關(guān)閉時(shí)觸發(fā)

WebSocket方法

以下是WebSocket對(duì)象的相關(guān)方法。假定我們使用了以上代碼創(chuàng)建Socket對(duì)象：

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

描述： 使用連接發(fā)送數(shù)據(jù)            關(guān)閉連接

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中WebSocket API的用法示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!