帶你認識HTML5中的WebSocket

認識 HTML5 的 WebSocket

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

一、HTML5 中的 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為指定目標創建，用於雙向推播訊息。

二、HTML5 中的 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()
};

讓我們來看看上面的初始化片段。參數為URL，ws表示WebSocket協定。 onopen、onclose和onmessage方法把事件連接到Socket實例。每個方法都提供了一個事件，以表示Socket的狀態。

onmessage事件提供了一個data屬性，它可以包含訊息的Body部分。訊息的Body部分必須是一個字串，可以進行序列化/反序列化操作，以便傳遞更多的資料。

WebSocket的語法非常簡單，使用WebSockets是難以置信的容易…除非客戶端不支援WebSocket。 IE瀏覽器目前不支援WebSocket通訊。如果你的客戶端不支援WebSocket通信，下面有幾個後備方案供你使用：

Flash技術 —— Flash可以提供一個簡單的替換。 使用Flash最明顯的缺點是並非所有用戶端都安裝了Flash，而且某些用戶端，例如iPhone/iPad，不支援Flash。

AJAX Long-Polling技術 —— 用AJAX的long-polling來模擬WebSocket在業界已經有一段時間了。它是一個可行的技術，但它不能優化發送的訊息。也就是說，它是一個解決方案，但不是最佳的技術方案。

由於目前的IE等瀏覽器不支援WebSocket，要提供WebSocket的事件處理、回傳傳輸、在伺服器端使用一個統一的API，那麼該怎麼辦呢？幸運的是，Guillermo Rauch創造了一個Socket.IO技術。

三、帶Socket.IO的WebSocket

Socket.IO是Guillermo Rauch創建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技術官以及LearnLearn實驗室的首席科學家。 Socket.IO使用檢測功能來判斷是否建立WebSocket連接，或是AJAX long-polling連接，或Flash等。可快速建立即時的應用程式。 Socket.IO也提供了一個NodeJS API，它看起來很像客戶端API。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

3. php.cn原創html5影片教學

4. h5Canvas繪製五星紅旗的實例解說