HTML5 WebSockets基礎使用教程

作者：Eve Cole 更新時間：2025-02-06 13:43:41

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>
<p id="examples">eg try 'hi', 'name', 'age', 'today'</p>
<input id="text" type="text" />
<button id="disconnect">Disconnect</button>
</div>
</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瀏覽器頁面的鏈接。

如你所見，如果用戶瀏覽器支持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('<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>)標籤創建適當的class，我們在message函數中只有一個段落結束標籤。

function message(msg){
$('#chatLog').append(msg+'</p>');
}

目前的成果

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

第七步：發送數據

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

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

下面是send()函數：

下面我們需要：

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");
$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="Google'>http://www.google.com/chrome">Google Chrome</a>?</p >').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('<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
});

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

php -q pathtoserver.php

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

大功告成！

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