HTML5中的WebSocket有什么用

小編給大家分享一下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公司的首席技術官以及LearnBoost實驗室的首席科學家。Socket.IO使用檢測功能來判斷是否建立WebSocket連接，或者是AJAX long-polling連接，或Flash等。可快速創建實時的應用程序。Socket.IO還提供了一個NodeJS API，它看起來非常像客戶端API。

看完了這篇文章，相信你對“HTML5中的WebSocket有什么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！