DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5 WebSockets 基礎教程
HTML5 WebSockets 基礎教程
編輯:HTML和Xhtml     

 

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

什麼是WebSockets?

WebSockets是在一個(TCP)接口進行雙向通信的技術,PUSH技術類型。同時WebSockets仍將基於W3C標准,目前為止,Chrome和Safari的最新版本浏覽器已經支持WebSockets了。

WebSockets將會替代什麼?

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

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

試想一下,如果服務器在早晨會自啟動並發送數據到那些希望接收而不用提前建立一些連接端口的客戶端,這是一件多棒的事情啊!歡迎來到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中的例子:

 

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>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;  
}

 

第五步:WebSocket事件

首先讓我們嘗試並理解WebSocket事件的概念:

 

WebSocket事件:

我們將使用三個WebSocket事件:

onopen: 當接口打開時

onmessage: 當收到信息時

onclose: 當接口關閉時

我們如何來實現呢?

首先創建WebSocket對象

 

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

 

然後向下面這樣檢測事件

 

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  
 
    }  
});

 

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

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

 

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

 

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

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved