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

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)沅陵,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

一、什么是WebSocket API?

WebSocket API是下一代客戶端-服務(wù)器的異步通信方法。該通信取代了單個的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ù)器和客戶端可以在給定的時間范圍內(nèi)的任意時刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因為Ajax技術(shù)需要客戶端發(fā)起請求，而WebSocket服務(wù)器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。

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

二、WebSocket API的用法

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

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

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

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

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

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

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

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

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

WebSocket 屬性

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

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)閉或者連接不能打開。

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

WebSocket事件

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

事件：open           message              error           close

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

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

WebSocket方法

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

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

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

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

文章題目：HTML5中WebSocketAPI的用法示例
URL鏈接：http://chinadenli.net/article46/giddeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計、服務(wù)器托管、軟件開發(fā)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)