HTML5之中一個很酷的新特性就是WebSockets，它可以讓我們無需AJAX請求即可與服務器端對話。今天彬Go將讓大家通過Php環境的服務器端運行WebSocket，創建客戶端并通過WebSockets協議發送和接收服務器端信息。什么是WebSockets？WebSockets是在一個（TCP）接口進行雙向通信的技術，PUSH技術類型。同時WebSockets仍將基于W3C標準，目前為止，Chrome和Safari的最新版本瀏覽器已經支持WebSockets了。WebSockets將會替代什么？WebSockets可以替代Long Polling（PHP服務端推送技術），這是一個有趣的概念?？蛻舳税l送一個請求到服務器，現在，服務器端并不會響應還沒準備好的數據，它會保持連接的打開狀態直到最新的數據準備就緒發送，之后客戶端收到數據，然后發送另一個請求。這有它的好處：減少任一連接的延遲，當一個連接已經打開時就不需要創建另一個新的連接。但是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）啟動html' target='_blank'>Apache服務器第二步：修改URLs和端口根據你之前的安裝修改服務器，下面是setup.class.php中的例子： public function __construct($host='localhost',$port=8000,$max=100) { $this- createSocket($host,$port); } !DOCTYPE html html head script src= http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js /script
title WebSockets Client /title
/head body div id= wrapper
div id= container
h1 WebSockets 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輸入框和一個斷開連接的按鈕。第四步：添加一些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; } socket.onopen = function(){ alert( Socket has been opened! ); } socket.onmessage = function(msg){ alert(msg); //Awesome! } 但我們還是盡量避免使用alert，現在我們可以把我們學的東西整合到客戶端頁面中了。第六步：JavaScript首先我們將代碼放到jQuery 的 document.ready函數中，然后我們還要檢查用戶的瀏覽器是否支持WebSocket。如果不支持，我們就添加一個鏈向Chrome瀏覽器頁面的鏈接。 $(document).ready(function() { if(!( WebSocket in window)){ $('#chatLog, input, button, #examples').fadeOut( fast ); $(' p Oh no, you need a browser that supports WebSockets. How about a href= http://www.google.com/chrome Google Chrome /a ? /p ').appendTo('#container'); }else{
//The user has WebSockets
connect();
function connect(){ //the connect function code is below
