HTML 5 Web Sockets應用初探
HTML 5之中一個很酷的新特性就是Web Sockets，在本文之前51CTO在《HTML 5 Web Socket：下一次Web通信革命揭幕》一文中已經詳細的為大家介紹過HTML 5 Web Sockets為Web通信帶來的改變，而本文將介紹通過PHP環(huán)境的服務器端運行Web Socket，創(chuàng)建客戶端并通過Web Sockets協(xié)議發(fā)送和接收服務器端信息。
什么是Web Sockets？
Web Sockets是在一個(TCP)接口進行雙向通信的技術，PUSH技術類型。同時Web Sockets仍將基于W3C標準，目前為止，Chrome和Safari的***版本瀏覽器已經支持Web Sockets了。
Web Sockets將會替代什么？
Web Sockets可以替代Long Polling(PHP服務端推送技術)，這是一個有趣的概念?？蛻舳税l(fā)送一個請求到服務器，現在，服務器端并不會響應還沒準備好的數據，它會保持連接的打開狀態(tài)直到***的數據準備就緒發(fā)送，之后客戶端收到數據，然后發(fā)送另一個請求。
這有它的好處：減少任一連接的延遲，當一個連接已經打開時就不需要創(chuàng)建另一個新的連接。但是Long-Polling并不是什么花俏技術，他仍有可能發(fā)生請求暫停，因此會需要建立新的連接。
一些Ajax應用使用上述技術-這經常是歸因于低資源利用。試想一下，如果服務器在早晨會自啟動并發(fā)送數據到那些希望接收而不用提前建立一些連接端口的客戶端，這是一件多棒的事情啊！歡迎來到PUSH技術的世界！
***步：搞定Web Socket服務器
文章會把更多的精力放在客戶端的創(chuàng)建而不是服務器端的執(zhí)行等操作。作者使用的是基于Windows 7的XAMPP來實現本地運行PHP。
啟動Apache服務器
第二步：修改URLs和端口
根據你之前的安裝修改服務器，下面是setup.class.php中的例子：
- public function __construct($host='localhost',$port=8000,$max=100)
- $this->createSocket($host,$port);
瀏覽文件并在適當情況下進行更改。
第三步：開始創(chuàng)建客戶端
下面來創(chuàng)建基本模板，這是我的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>
我們已經創(chuàng)建里基本模板：一個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: 當接口關閉時
我們如何來實現呢？首先創(chuàng)建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，我們將執(zhí)行connect()函數。這里是核心功能，我們將開始創(chuàng)建open、close和receive事件。我們將在我們的服務器定義URL。
- var socket;
- var host = "ws://localhost:8000/socket/server/startDaemon.php";
你可能會發(fā)現URL中怎么沒有http？恩，是的，這是一個Web Socket URL，使用了不同的協(xié)議。下面是URL分解圖示：
下面讓我們繼續(xù)完成connect()函數，我們將代碼放入try/catch塊，這樣如果代碼出現問題，我們能讓用戶知道。我們創(chuàng)建Web Socket，并將信息傳遞到message()函數，之后會做講解。我們創(chuàng)建我們的onopen、onmessage和onclose函數. 需要注意的是我們?yōu)橛脩籼峁┝硕丝跔顟B(tài)，這并不是必需的，但我們把它放進來主要是為了方便調試。
- 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>)標簽創(chuàng)建適當的class，我們在message函數中只有一個段落結束標簽。
- function message(msg){
- $('#chatLog').append(msg+'</p>');
- }
目前的成果
如果你已按上面教程按部就班的做的話，很好，我們已經創(chuàng)建了HTML/CSS模板、創(chuàng)建并建立Web Socket連接、通過創(chuàng)建連接保持用戶的進展更新。
第七步：發(fā)送數據
現在我們已經有了提交按鈕，但我們還需要監(jiān)聽用戶按下鍵盤的事件，并運行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輸入框、執(zhí)行message()函數。
#p#
第八步：關閉Socket
關閉Socket操作相當簡單，添加對斷開連接按鈕的click事件監(jiān)聽就可以。
- $('#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
- });
第九步：運行Web Socket服務器
我們要輸入一些命令行，XAMPP提供了比較方便的shell選項。點擊XAMPP控制面板的’shell’按鈕并輸入：
- php -q path\to\server.php
現在你已經運行了Web Socket服務器！
大功告成！
當頁面讀取后，將嘗試創(chuàng)建一個Web Socket連接，然后用戶可以輸入信息并從服務器接收信息。大家可以通過The Web Socket API了解HTML 5 Web Socket的***動態(tài)。
原文標題：HTML 5 Web Sockets 基礎使用教程
原文地址：http://blog.bingo929.com/html5-Web Sockets.html
【編輯推薦】
