HTML 5 Web Sockets應用初探

作者：彬Go 2010-08-10 09:08:29

HTML 5之中一個很酷的新特性就是WebSockets，WebSockets是在一個(TCP)接口進行雙向通信的技術，PUSH技術類型，文章將詳細的介紹在客戶端上創建WebSocket服務器。

HTML 5之中一個很酷的新特性就是Web Sockets，在本文之前51CTO在《HTML 5 Web Socket：下一次Web通信革命揭幕》一文中已經詳細的為大家介紹過HTML 5 Web Sockets為Web通信帶來的改變，而本文將介紹通過PHP環境的服務器端運行Web Socket，創建客戶端并通過Web Sockets協議發送和接收服務器端信息。

什么是Web Sockets？

Web Sockets是在一個(TCP)接口進行雙向通信的技術，PUSH技術類型。同時Web Sockets仍將基于W3C標準，目前為止，Chrome和Safari的***版本瀏覽器已經支持Web Sockets了。

Web Sockets將會替代什么？　　

Web Sockets可以替代Long Polling(PHP服務端推送技術)，這是一個有趣的概念。客戶端發送一個請求到服務器，現在，服務器端并不會響應還沒準備好的數據，它會保持連接的打開狀態直到***的數據準備就緒發送，之后客戶端收到數據，然后發送另一個請求。

這有它的好處：減少任一連接的延遲，當一個連接已經打開時就不需要創建另一個新的連接。但是Long-Polling并不是什么花俏技術，他仍有可能發生請求暫停，因此會需要建立新的連接。

一些Ajax應用使用上述技術-這經常是歸因于低資源利用。試想一下，如果服務器在早晨會自啟動并發送數據到那些希望接收而不用提前建立一些連接端口的客戶端，這是一件多棒的事情啊！歡迎來到PUSH技術的世界！

***步：搞定Web Socket服務器　　

文章會把更多的精力放在客戶端的創建而不是服務器端的執行等操作。作者使用的是基于Windows 7的XAMPP來實現本地運行PHP。

啟動Apache服務器

第二步：修改URLs和端口　　

根據你之前的安裝修改服務器，下面是setup.class.php中的例子：

public function __construct($host='localhost',$port=8000,$max=100)    
    
   $this->createSocket($host,$port);

瀏覽文件并在適當情況下進行更改。

第三步：開始創建客戶端　　

下面來創建基本模板，這是我的client.php文件：

 <!DOCTYPE html>    
<html>    
<head>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
    
<title>Web Sockets Client</title>    
    
</head>    
<body>    
<div id="wrapper">    
    
    <div id="container">    
    
        <h1>Web Sockets Client</h1>    
    
        <div id="chatLog">    
    
        </div><!-- #chatLog -->    
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>    
    
        <input id="text" type="text" />    
        <button id="disconnect">Disconnect</button>    
    
    </div><!-- #container -->    
    
</div>    
</body>    
</html>

我們已經創建里基本模板：一個chat log容器，一個input輸入框和一個斷開連接的按鈕。

#p#

第四步：添加一些CSS　　

沒什么花俏代碼，只是處理一下標簽的樣式。

 body {    
    font-family:Arial, Helvetica, sans-serif;    
}    
#container{    
    border:5px solid grey;    
    width:800px;    
    margin:0 auto;    
    padding:10px;    
}    
#chatLog{    
    padding:5px;    
    border:1px solid black;    
}    
#chatLog p {    
    margin:0;    
}    
.event {    
    color:#999;    
}    
.warning{    
    font-weight:bold;    
    color:#CCC;    
}

第五步：Web Socket事件

首先讓我們嘗試并理解Web Socket事件的概念：

◆onopen: 當接口打開時

◆onmessage: 當收到信息時

◆onclose: 當接口關閉時

我們如何來實現呢？首先創建Web Socket對象。

var socket = new Web Socket("ws://localhost:8000/socket/server/startDaemon.php");

然后向下面這樣檢測事件：

 socket.onopen = function(){    
    alert("Socket has been opened!");    
}

當我們收到信息時這樣做：

 socket.onmessage = function(msg){    
    alert(msg); //Awesome!    
}

但我們還是盡量避免使用alert，現在我們可以把我們學的東西整合到客戶端頁面中了。

#p#

第六步：JavaScript　　

首先我們將代碼放到jQuery 的 document.ready函數中，然后我們還要檢查用戶的瀏覽器是否支持Web Socket。如果不支持，我們就添加一個鏈向Chrome瀏覽器頁面的鏈接。

 $(document).ready(function() {    
    if(!("Web Socket" in window)){    
        $('#chatLog, input, button, #examples').fadeOut("fast");    
        $('<p>Oh no, you need a browser that supports Web Sockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');    
    }else{    
    
    //The user has Web Sockets    
    
    connect();    
    
    function connect(){    
        //the connect function code is below    
    
    }    
});

如你所見，如果用戶瀏覽器支持Web Socket，我們將執行connect()函數。這里是核心功能，我們將開始創建open、close和receive事件。我們將在我們的服務器定義URL。

var socket;    
var host = "ws://localhost:8000/socket/server/startDaemon.php";

你可能會發現URL中怎么沒有http？恩，是的，這是一個Web Socket URL，使用了不同的協議。下面是URL分解圖示：

下面讓我們繼續完成connect()函數，我們將代碼放入try/catch塊，這樣如果代碼出現問題，我們能讓用戶知道。我們創建Web Socket，并將信息傳遞到message()函數，之后會做講解。我們創建我們的onopen、onmessage和onclose函數. 需要注意的是我們為用戶提供了端口狀態，這并不是必需的，但我們把它放進來主要是為了方便調試。

CONNECTING = 0 
OPEN = 1 
CLOSED = 2 
 
 function connect(){    
    try{    
    
    var socket;    
    var host = "ws://localhost:8000/socket/server/startDaemon.php";    
    var socket = new Web Socket(host);    
    
        message('<p class="event">Socket Status: '+socket.readyState);    
    
        socket.onopen = function(){    
             message('<p class="event">Socket Status: '+socket.readyState+' (open)');    
        }    
    
        socket.onmessage = function(msg){    
             message('<p class="message">Received: '+msg.data);    
        }    
    
        socket.onclose = function(){    
             message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');    
        }               
    
    } catch(exception){    
         message('<p>Error'+exception);    
    }    
}

message()函數很簡單, 它將我們想展現給用戶的文本填入chat log容器內。我們在socket事件函數中為段落(<p>)標簽創建適當的class，我們在message函數中只有一個段落結束標簽。

 function message(msg){    
    $('#chatLog').append(msg+'</p>');    
}

目前的成果
　　
如果你已按上面教程按部就班的做的話，很好，我們已經創建了HTML/CSS模板、創建并建立Web Socket連接、通過創建連接保持用戶的進展更新。

第七步：發送數據
　　
現在我們已經有了提交按鈕，但我們還需要監聽用戶按下鍵盤的事件，并運行send函數，下面的’13′便是回車鍵對應的ASCII碼。

 $('#text').keypress(function(event) {    
    if (event.keyCode == '13') {    
        send();    
    }    
});

下面是send()函數：

function send(){    
   
   var text = $('#text').val();    
   if(text==""){    
       message('<p class="warning">Please enter a message');    
       return ;    
   }    
   try{    
       socket.send(text);    
       message('<p class="event">Sent: '+text)    
   } catch(exception){    
   message('<p class="warning"> Error:' + exception);    
   }    
   
   $('#text').val("");

下面我們需要：

socket.send();

那些額外的代碼做了以下工作：檢測用戶是否什么都沒輸入卻仍點擊返回、清空input輸入框、執行message()函數。

#p#

第八步：關閉Socket
　　
關閉Socket操作相當簡單，添加對斷開連接按鈕的click事件監聽就可以。

 $('#disconnect').click(function(){    
    socket.close();    
});

完整JavaScript代碼

 $(document).ready(function() {    
    
  if(!("Web Socket" in window)){    
  $('#chatLog, input, button, #examples').fadeOut("fast");    
  $('<p>Oh no, you need a browser that supports Web Sockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');    
  }else{    
      //The user has Web Sockets    
    
      connect();    
    
      function connect(){    
          var socket;    
          var host = "ws://localhost:8000/socket/server/startDaemon.php";    
    
          try{    
              var socket = new Web Socket(host);    
    
              message('<p class="event">Socket Status: '+socket.readyState);    
    
              socket.onopen = function(){    
                 message('<p class="event">Socket Status: '+socket.readyState+' (open)');    
              }    
    
              socket.onmessage = function(msg){    
                 message('<p class="message">Received: '+msg.data);    
              }    
    
              socket.onclose = function(){    
                message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');    
              }             
    
          } catch(exception){    
             message('<p>Error'+exception);    
          }    
    
          function send(){    
              var text = $('#text').val();    
    
              if(text==""){    
                  message('<p class="warning">Please enter a message');    
                  return ;    
              }    
              try{    
                  socket.send(text);    
                  message('<p class="event">Sent: '+text)    
    
              } catch(exception){    
                 message('<p class="warning">');    
              }    
              $('#text').val("");    
          }    
    
          function message(msg){    
            $('#chatLog').append(msg+'</p>');    
          }    
    
          $('#text').keypress(function(event) {    
              if (event.keyCode == '13') {    
                send();    
              }    
          });       
    
          $('#disconnect').click(function(){    
             socket.close();    
          });    
    
      }//End connect    
    
  }//End else    
    
});