代码改变世界

HTML5超酷新特性WebSockets初体验

2011-09-23 22:57  狼人:-)  阅读(146)  评论(0)  编辑  收藏  举报

人人网Web前端开发工程师暴风彬彬（网名），在个人网站彬Go上发表了一篇博文《HTML5 WebSockets 基础使用教程》，和大家一起分享了如何利用HTML5超酷新特性WebSockets进行服务器端开发，文中给出了较详细的源代码及图片，现将本文转载于此，供大家借鉴学习：

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。

什么是WebSockets？

WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。

WebSockets将会替代什么？

WebSockets可以替代Long Polling（PHP服务端推送技术），这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，它仍有可能发生请求暂停，因此会需要建立新的连接。

一些AJAX应用使用上述技术——这经常是归因于低资源利用。

试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！

第一步：搞定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中的例子：

  1. public function __construct($host='localhost',$port=8000,$max=100)    
  2. {    
  3.     $this->createSocket($host,$port);    
  4. } 

浏览文件并在适当情况下进行更改。

第三步：开始创建客户端

下面来创建基本模板，这是我的client.php文件：

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
  5.     
  6. <title>WebSockets Client</title>    
  7.     
  8. </head>    
  9. <body>    
  10. <div id="wrapper">    
  11.     
  12.     <div id="container">    
  13.     
  14.         <h1>WebSockets Client</h1>    
  15.     
  16.         <div id="chatLog">    
  17.     
  18.         </div><!-- #chatLog -->    
  19.         <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>    
  20.     
  21.         <input id="text" type="text" />    
  22.         <button id="disconnect">Disconnect</button>    
  23.     
  24.     </div><!-- #container -->    
  25.     
  26. </div>    
  27. </body>    
  28. </html> 

我们已经创建里基本模板：一个chat log容器，一个input输入框和一个断开连接的按钮。

第四步：添加一些CSS

没什么花俏代码，只是处理一下标签的样式。

  1. body {    
  2.     font-family:Arial, Helvetica, sans-serif;    
  3. }    
  4. #container{    
  5.     border:5px solid grey;    
  6.     width:800px;    
  7.     margin:0 auto;    
  8.     padding:10px;    
  9. }    
  10. #chatLog{    
  11.     padding:5px;    
  12.     border:1px solid black;    
  13. }    
  14. #chatLog p {    
  15.     margin:0;    
  16. }    
  17. .event {    
  18.     color:#999;    
  19. }    
  20. .warning{    
  21.     font-weight:bold;    
  22.     color:#CCC;    
  23. } 

第五步：WebSocket事件

首先让我们尝试并理解WebSocket事件的概念：

WebSocket事件：

我们将使用三个WebSocket事件：

onopen：当接口打开时

onmessage： 当收到信息时

onclose：当接口关闭时

我们如何来实现呢？

首先创建WebSocket对象：

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

然后向下面这样检测事件：

  1. socket.onopen = function(){    
  2.     alert("Socket has been opened!");    
  3. } 

当我们收到信息时这样做：

  1. socket.onmessage = function(msg){    
  2.     alert(msg); //Awesome!    
  3. } 

但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。

全文请见：http://blog.bingo929.com/html5-websockets.html