HTML 5之中一个很酷的新特性就是Web Sockets，在本文之前在《HTML 5 Web Socket：下一次Web通信革命揭幕》一文中已经详细的为大家介绍过HTML 5 Web Sockets为Web通信带来的改变，而本文将介绍通过PHP环境的服务器端运行Web Socket，创建客户端并通过Web Sockets协议发送和接收服务器端信息。
什么是Web Sockets？
Web Sockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时Web Sockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持Web Sockets了。
Web Sockets将会替代什么？
Web Sockets可以替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。
这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。
一些Ajax应用使用上述技术-这经常是归因于低资源利用。试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！
第一步：搞定Web Socket服务器
文章会把更多的精力放在客户端的创建而不是服务器端的执行等操作。作者使用的是基于Windows 7的XAMPP来实现本地运行PHP。
启动Apache服务器
第二步：修改URLs和端口
根据你之前的安装修改服务器，下面是setup.class.php中的例子：
publicfunction__construct($host=’localhost’,$port=8000,$max=100) $this->createSocket($host,$port);
浏览文件并在适当情况下进行更改。
第三步：开始创建客户端
下面来创建基本模板，这是我的client.php文件：
<!DOCTYPEhtml> <html> <head> <scriptsrc=";></script> <title>Web SocketsClient</title> </head> <body> <divid="wrapper"> <divid="container"> <h1>Web SocketsClient</h1> <divid="chatLog"> </div><!–#chatLog–> <pid="examples">e.g.try’hi’,’name’,’age’,’today'</p> <inputid="text"type="text"/> <buttonid="disconnect">Disconnect</button> </div><!–#container–> </div> </body> </html>
我们已经创建里基本模板：一个chat log容器，一个input输入框和一个断开连接的按钮。
第四步：添加一些CSS
没什么花俏代码，只是处理一下标签的样式。
body{ font-family:Arial,Helvetica,sans-serif; } #container{ border:5pxsolidgrey; width:800px; margin:0auto; padding:10px; } #chatLog{ padding:5px; border:1pxsolidblack; } #chatLogp{ margin:0; } .event{ color:#999; } .warning{ font-weight:bold; color:#CCC; }
第五步：Web Socket事件
首先让我们尝试并理解Web Socket事件的概念：
◆onopen: 当接口打开时
◆onmessage: 当收到信息时
◆onclose: 当接口关闭时
我们如何来实现呢？首先创建Web Socket对象。
varsocket=newWeb Socket("ws://localhost:8000/socket/server/startDaemon.php");
然后向下面这样检测事件：
socket.onopen=function(){ alert("Sockethasbeenopened!"); }
当我们收到信息时这样做：
socket.onmessage=function(msg){ alert(msg);//Awesome! }
但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。
第六步：JavaScript
首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持Web Socket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。
$(document).ready(function(){ if(!("Web Socket"inwindow)){ $(‘#chatLog,input,button,#examples’).fadeOut("fast"); $(‘<p>Ohno,youneedabrowserthatsupportsWeb Sockets.Howabout<ahref="5/websockets/”>The Web Socket API了解HTML 5 Web Socket的最新动态。
原文标题：HTML 5 Web Sockets 基础使用教程
或者在河边放下一盏写着心愿的河灯，祝愿一切安好。
