認識HTML5的WebSocket

認識HTML5的WebSocket

在HTML5規格中，我最喜歡的Web技術就是快速變得流行的WebSocket API。 WebSocket提供了一個受歡迎的技術，以取代我們過去幾年一直在使用的Ajax技術。這個新的API提供了一個方法，從客戶端使用簡單的語法有效地推動訊息到伺服器。讓我們來看看HTML5的WebSocket API：它可用於客戶端、伺服器端。而且有一個優秀的第三方API，名為Socket.IO。

一、什麼是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。下面的程式碼片段是開啟一個連接，為連接建立事件監聽器，斷開連接，訊息時間，發送訊息返回伺服器，關閉連接。
CODE:

// 创建一个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            Socket.onmessage             Socket.onerror         Socket.onclose
說明：連線中觸發時觸發         通訊發生錯誤時觸發       連結關閉時觸發

WebSocket方法
以下是WebSocket物件的相關方法。假定我們使用了上述程式碼來建立Socket物件：

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

以上是認識HTML5的WebSocket的詳細內容。更多資訊請關注PHP中文網其他相關文章！