HTML5 基礎(chǔ)教程

HTML5 API

HTML5 媒體

HTML5 圖形

HTML(5) 代碼編寫規(guī)范 HTML5 服務(wù)器發(fā)送事件

HTML5 WebSocket

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

WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單，允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

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

現(xiàn)在，很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來(lái)很明顯的缺點(diǎn)，即瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求，然而HTTP請(qǐng)求可能包含較長(zhǎng)的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會(huì)浪費(fèi)很多的帶寬等資源。

HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時(shí)地進(jìn)行通訊。

圖片.png

瀏覽器通過(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)，可以是以下值： 0 - 表示連接尚未建立。 1 - 表示連接已建立，可以進(jìn)行通信。 2 - 表示連接正在進(jìn)行關(guān)閉。 3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開。
Socket.bufferedAmount	只讀屬性 bufferedAmount 已被 send() 放入正在隊(duì)列中等待傳輸，但是還沒(méi)有發(fā)出的 UTF-8 文本字節(jié)數(shù)。

WebSocket 事件

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

事件	事件處理程序	描述
open	Socket.onopen	連接建立時(shí)觸發(fā)
message	Socket.onmessage	客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
error	Socket.onerror	通信發(fā)生錯(cuò)誤時(shí)觸發(fā)
close	Socket.onclose	連接關(guān)閉時(shí)觸發(fā)

WebSocket 方法

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

方法	描述
Socket.send()	使用連接發(fā)送數(shù)據(jù)
Socket.close()	關(guān)閉連接

WebSocket 示例

WebSocket 協(xié)議本質(zhì)上是一個(gè)基于 TCP 的協(xié)議。

為了建立一個(gè) WebSocket 連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個(gè) HTTP 請(qǐng)求，這個(gè)請(qǐng)求和通常的 HTTP 請(qǐng)求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個(gè)申請(qǐng)協(xié)議升級(jí)的 HTTP 請(qǐng)求，服務(wù)器端解析這些附加的頭信息然后產(chǎn)生應(yīng)答信息返回給客戶端，客戶端和服務(wù)器端的 WebSocket 連接就建立起來(lái)了，雙方就可以通過(guò)這個(gè)連接通道自由的傳遞信息，并且這個(gè)連接會(huì)持續(xù)存在直到客戶端或者服務(wù)器端的某一方主動(dòng)的關(guān)閉連接。

客戶端的 HTML 和 JavaScript

目前大部分瀏覽器支持 WebSocket() 接口，你可以在以下瀏覽器中嘗試示例： Chrome, Mozilla, Opera 和 Safari。

nhooo_websocket.html 文件內(nèi)容

示例

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>WebSocket使用方法,菜鳥教程(cainiaoplus.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
         var x=document.getElementById("websocket");
            if ("WebSocket" in window)
            {
               x.innerHTML="您的瀏覽器支持 WebSocket!";
               
               // 打開一個(gè) web socket
               var ws = new WebSocket("ws://echo.websocket.org");
                
               ws.onopen = function()
               {
                  // Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
                  ws.send("發(fā)送數(shù)據(jù)");
                  x.innerHTML="數(shù)據(jù)發(fā)送中...";
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  x.innerHTML="數(shù)據(jù)已接收,基礎(chǔ)教程(cainiaoplus.com)...";
               };
                
               ws.onclose = function()
               { 
                  // 關(guān)閉 websocket
                  x.innerHTML="連接已關(guān)閉..."; 
               };
            }
            
            else
            {
               // 瀏覽器不支持 WebSocket
               x.innerHTML="您的瀏覽器不支持 WebSocket!";
            }
         }
      </script>
        
   </head>
   <body>
       
      <div id="sse">
         <input type="button" onclick="WebSocketTest()" value="運(yùn)行 WebSocket">
      </div>
      <div id="websocket"></div>
      
   </body>
</html>

測(cè)試看看 ?/?

測(cè)試結(jié)果如下圖：

圖片.png

websocket與socket的區(qū)別

軟件通信有七層結(jié)構(gòu)，下三層結(jié)構(gòu)偏向與數(shù)據(jù)通信，上三層更偏向于數(shù)據(jù)處理，中間的傳輸層則是連接上三層與下三層之間的橋梁，每一層都做不同的工作，上層協(xié)議依賴與下層協(xié)議。基于這個(gè)通信結(jié)構(gòu)的概念。
Socket 其實(shí)并不是一個(gè)協(xié)議，是應(yīng)用層與 TCP/IP 協(xié)議族通信的中間軟件抽象層，它是一組接口。當(dāng)兩臺(tái)主機(jī)通信時(shí)，讓 Socket 去組織數(shù)據(jù)，以符合指定的協(xié)議。TCP 連接則更依靠于底層的 IP 協(xié)議，IP 協(xié)議的連接則依賴于鏈路層等更低層次。
WebSocket 則是一個(gè)典型的應(yīng)用層協(xié)議。

Socket 是傳輸控制層協(xié)議
WebSocket 是應(yīng)用層協(xié)議

HTML(5) 代碼編寫規(guī)范 HTML5 服務(wù)器發(fā)送事件