網頁制作Webjx文章簡介：HTML5之中一個很酷的新特性就是WebSockets，它可以讓我們無需AJAX請求即可與服務器端對話。今天彬Go將讓大家通過Php環境的服務器端運行WebSocket，創建客戶端并通過WebSockets協議發送和接收服務器端信息。 什么是WebSockets？ WebSockets是在一個（TCP）接口進行雙向

HTML5之中一個很酷的新特性就是WebSockets，它可以讓我們無需AJAX請求即可與服務器端對話。今天彬Go將讓大家通過Php環境的服務器端運行WebSocket，創建客戶端并通過WebSockets協議發送和接收服務器端信息。

什么是WebSockets？

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

WebSockets將會替代什么？

WebSockets可以替代Long Polling（PHP服務端推送技術），這是一個有趣的概念。客戶端發送一個請求到服務器，現在，服務器端并不會響應還沒準備好的數據，它會保持連接的打開狀態直到最新的數據準備就緒發送，之后客戶端收到數據，然后發送另一個請求。這有它的好處：減少任一連接的延遲，當一個連接已經打開時就不需要創建另一個新的連接。但是Long-Polling并不是什么花俏技術，他仍有可能發生請求暫停，因此會需要建立新的連接。

一些AJAX應用使用上述技術-這經常是歸因于低資源利用。

試想一下，如果服務器在早晨會自啟動并發送數據到那些希望接收而不用提前建立一些連接端口的客戶端，這是一件多棒的事情?。g迎來到PUSH技術的世界！

第一步：搞定WebSocket服務器

這篇教程會把更多的精力放在客戶端的創建而不是服務器端的執行等操作。

我使用基于windows 7的XAMPP來實現本地運行PHP。phpwebsockets是PHP WebSocket服務器。（以我的經驗這個版本存在一些小問題，我已對它做了些修改并上傳源文件共享給大家）下面的這些不同版本也可以實現WebSocket，如果某個不能用，你可以試試其它版本或者繼續看下面的教程。

jWebSocket （Java）

web-socket-ruby （ruby）

Socket IO-node （node.js）

啟動Apache服務器

第二步：修改URLs和端口

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

 
 
}

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

第三步：開始創建客戶端

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

><>  
 
>  
 
    >  
 
        >  
 
         
        >e.g. try 'hi', 'name', 'age', 'today'>  
        >Disconnect>>  
</html>​

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

第四步：添加一些CSS

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

body  
grey 
     
     
 
     
 
 
 
     
}

第五步：WebSocket事件

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

WebSocket事件：

我們將使用三個WebSocket事件：

onopen： 當接口打開時

onmessage： 當收到信息時

onclose： 當接口關閉時

我們如何來實現呢？

首先創建WebSocket對象

然后向下面這樣檢測事件

socket. 
     
}

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

socket.msgmsg); //Awesome!  
}

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

第六步：JavaScript

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

$ 
    window 
        $. 
        $. 
     
 
     
 
     
       

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

我們將在我們的服務器定義URL。

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