HTML5 WebSockets基礎使用教學課程

作者：Eve Cole 更新時間：2010-10-07 18:43:37

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檔案：

WebSockets Client

eg try 'hi', 'name', 'age', 'today'

我們已經創建里基本模板：一個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");
$('

Oh no, you need a browser that supports WebSockets. How about Google Chrome?

').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，使用了不同的協定。

下面讓我們繼續完成connect()函數，我們將程式碼放入try/catch區塊，這樣如果程式碼出現問題，我們可以讓使用者知道。我們創建WebSocket，並將訊息傳遞到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 WebSocket(host);
message('

Socket Status: '+socket.readyState);
socket.onopen = function(){
message('

Socket Status: '+socket.readyState+' (open)');
}
socket.onmessage = function(msg){
message('

Received: '+msg.data);
}
socket.onclose = function(){
message('

Socket Status: '+socket.readyState+' (Closed)');
}
} catch(exception){
message('

Error'+exception);
}
}

message()函數很簡單, 它將我們想展現給使用者的文字填入chat log容器內。我們在socket事件函數中為段落(

)標籤建立適當的class，我們在message函數中只有一個段落結束標籤。

function message(msg){
$('#chatLog').append(msg+'

');
}

目前的成果

如果你已按上面教程按部就班的做的話，很好，我們已經創建了HTML/CSS模板、創建並建立Websocket連接、透過創建連接保持用戶的進度更新。

第七步：傳送數據

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

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

下面是send()函數：

function send(){
var text = $('#text').val();
if(text==""){
message('

Please enter a message');
return ;
}
try{
socket.send(text);
message('

Sent: '+text)
} catch(exception){
message('

Error:' + exception);
}
$('#text').val("");
}

下面我們需要：

socket.send();

那些額外的程式碼做了以下工作：偵測使用者是否什麼都沒輸入卻仍點選返回、清空input輸入框、執行message()函數。

第八步：關閉Socket

關閉Socket操作相當簡單，加入對斷開連線按鈕的click事件監聽就可以。

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

完整JavaScript程式碼

$(document).ready(function() {
if(!("WebSocket" in window)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('

Oh no, you need a browser that supports WebSockets. How about Google Chrome?

').appendTo('#container');
}else{
//The user has WebSockets
connect();
function connect(){
var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
try{
var socket = new WebSocket(host);
message('

Socket Status: '+socket.readyState);
socket.onopen = function(){
message('

Socket Status: '+socket.readyState+' (open)');
}
socket.onmessage = function(msg){
message('

Received: '+msg.data);
}
socket.onclose = function(){
message('

Socket Status: '+socket.readyState+' (Closed)');
}
} catch(exception){
message('

Error'+exception);
}
function send(){
var text = $('#text').val();

if(text==""){
message('

Please enter a message');
return ;
}
try{
socket.send(text);
message('

Sent: '+text)
} catch(exception){
message('

');
}
$('#text').val("");
}
function message(msg){
$('#chatLog').append(msg+'

');
}
$('#text').keypress(function(event) {
if (event.keyCode == '13') {
send();
}
});
$('#disconnect').click(function(){
socket.close();
});
}//End connect
}//End else
});

第九步：運行WebSocket伺服器我們要輸入一些命令列，XAMPP提供了比較方便的shell選項。點選XAMPP控制面板的'shell'按鈕並輸入：

php -q pathtoserver.php

現在你已經運行了WebSocket伺服器！

大功告成！

當頁面讀取後，將嘗試建立WebSocket連接，然後使用者可以輸入資訊並從伺服器接收資訊。感謝大家耐心閱讀本教程，希望你能從中學到有用的知識，HTML5 WebSocket的確令人興奮不已！大家可以透過The WebSocket API了解HTML5 WebSocket的最新動態。