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）启动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
