首页 > 代码库 > [HTML5_WebSockets]HTML 5 Web Sockets应用初探

[HTML5_WebSockets]HTML 5 Web Sockets应用初探

2024-07-10 10:44:24   220人阅读

HTML 5之中一个很酷的新特性就是Web Sockets，在本文之前51CTO在《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服务器

启动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://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
  5.     
  6. <title>Web Sockets Client</title>    
  7.     
  8. </head>    
  9. <body>    
  10. <div id="wrapper">    
  11.     
  12.     <div id="container">    
  13.     
  14.         <h1>Web Sockets 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. }  

第五步：Web Socket事件

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

WebSocket事件

◆onopen: 当接口打开时

◆onmessage: 当收到信息时

◆onclose: 当接口关闭时

我们如何来实现呢？首先创建Web Socket对象。

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

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

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

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

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

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

 

第六步：JavaScript

首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持Web Socket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。

  1.  $(document).ready(function() {    
  2.     if(!("Web Socket" in window)){    
  3.         $(‘#chatLog, input, button, #examples‘).fadeOut("fast");    
  4.         $(‘<p>Oh no, you need a browser that supports Web Sockets. How about <a href=http://www.mamicode.com/"http://www.google.com/chrome">Google Chrome</a>?</p>‘).appendTo(‘#container‘);    
  5.     }else{    
  6.     
  7.     //The user has Web Sockets    
  8.     
  9.     connect();    
  10.     
  11.     function connect(){    
  12.         //the connect function code is below    
  13.     
  14.     }    
  15. });  

如你所见，如果用户浏览器支持Web Socket，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。我们将在我们的服务器定义URL。

  1. var socket;    
  2. var host = "ws://localhost:8000/socket/server/startDaemon.php";  

你可能会发现URL中怎么没有http？恩，是的，这是一个Web Socket URL，使用了不同的协议。下面是URL分解图示：

URL分解图示

下面让我们继续完成connect()函数，我们将代码放入try/catch块，这样如果代码出现问题，我们能让用户知道。我们创建Web Socket，并将信息传递到message()函数，之后会做讲解。我们创建我们的onopen、onmessage和onclose函数. 需要注意的是我们为用户提供了端口状态，这并不是必需的，但我们把它放进来主要是为了方便调试。

  1. CONNECTING = 0 
  2. OPEN = 1 
  3. CLOSED = 2 
  4.  
  5.  function connect(){    
  6.     try{    
  7.     
  8.     var socket;    
  9.     var host = "ws://localhost:8000/socket/server/startDaemon.php";    
  10.     var socket = new Web Socket(host);    
  11.     
  12.         message(‘<p class="event">Socket Status: ‘+socket.readyState);    
  13.     
  14.         socket.onopen = function(){    
  15.              message(‘<p class="event">Socket Status: ‘+socket.readyState+‘ (open)‘);    
  16.         }    
  17.     
  18.         socket.onmessage = function(msg){    
  19.              message(‘<p class="message">Received: ‘+msg.data);    
  20.         }    
  21.     
  22.         socket.onclose = function(){    
  23.              message(‘<p class="event">Socket Status: ‘+socket.readyState+‘ (Closed)‘);    
  24.         }               
  25.     
  26.     } catch(exception){    
  27.          message(‘<p>Error‘+exception);    
  28.     }    
  29. }   

message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。 我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有一个段落结束标签。

  1.  function message(msg){    
  2.     $(‘#chatLog‘).append(msg+‘</p>‘);    
  3. }  

目前的成果

如果你已按上面教程按部就班的做的话，很好，我们已经创建了HTML/CSS模板、创建并建立Web Socket连接、通过创建连接保持用户的进展更新。

目前的成果

第七步：发送数据

现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

  1.  $(‘#text‘).keypress(function(event) {    
  2.     if (event.keyCode == ‘13‘) {    
  3.         send();    
  4.     }    
  5. });  

下面是send()函数：

  1. function send(){    
  2.    
  3.    var text = $(‘#text‘).val();    
  4.    if(text==""){    
  5.        message(‘<p class="warning">Please enter a message‘);    
  6.        return ;    
  7.    }    
  8.    try{    
  9.        socket.send(text);    
  10.        message(‘<p class="event">Sent: ‘+text)    
  11.    } catch(exception){    
  12.    message(‘<p class="warning"> Error:‘ + exception);    
  13.    }    
  14.    
  15.    $(‘#text‘).val("");    
  16.    
  17.   

下面我们需要：

  1. socket.send();
  2.   

那些额外的代码做了以下工作：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

 

第八步：关闭Socket

关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。

关闭Socket

  1.  $(‘#disconnect‘).click(function(){    
  2.     socket.close();    
  3. });  

完整JavaScript代码

  1.  $(document).ready(function() {    
  2.     
  3.   if(!("Web Socket" in window)){    
  4.   $(‘#chatLog, input, button, #examples‘).fadeOut("fast");    
  5.   $(‘<p>Oh no, you need a browser that supports Web Sockets. How about <a href=http://www.mamicode.com/"http://www.google.com/chrome">Google Chrome</a>?</p>‘).appendTo(‘#container‘);    
  6.   }else{    
  7.       //The user has Web Sockets    
  8.     
  9.       connect();    
  10.     
  11.       function connect(){    
  12.           var socket;    
  13.           var host = "ws://localhost:8000/socket/server/startDaemon.php";    
  14.     
  15.           try{    
  16.               var socket = new Web Socket(host);    
  17.     
  18.               message(‘<p class="event">Socket Status: ‘+socket.readyState);    
  19.     
  20.               socket.onopen = function(){    
  21.                  message(‘<p class="event">Socket Status: ‘+socket.readyState+‘ (open)‘);    
  22.               }    
  23.     
  24.               socket.onmessage = function(msg){    
  25.                  message(‘<p class="message">Received: ‘+msg.data);    
  26.               }    
  27.     
  28.               socket.onclose = function(){    
  29.                 message(‘<p class="event">Socket Status: ‘+socket.readyState+‘ (Closed)‘);    
  30.               }             
  31.     
  32.           } catch(exception){    
  33.              message(‘<p>Error‘+exception);    
  34.           }    
  35.     
  36.           function send(){    
  37.               var text = $(‘#text‘).val();    
  38.     
  39.               if(text==""){    
  40.                   message(‘<p class="warning">Please enter a message‘);    
  41.                   return ;    
  42.               }    
  43.               try{    
  44.                   socket.send(text);    
  45.                   message(‘<p class="event">Sent: ‘+text)    
  46.     
  47.               } catch(exception){    
  48.                  message(‘<p class="warning">‘);    
  49.               }    
  50.               $(‘#text‘).val("");    
  51.           }    
  52.     
  53.           function message(msg){    
  54.             $(‘#chatLog‘).append(msg+‘</p>‘);    
  55.           }    
  56.     
  57.           $(‘#text‘).keypress(function(event) {    
  58.               if (event.keyCode == ‘13‘) {    
  59.                 send();    
  60.               }    
  61.           });       
  62.     
  63.           $(‘#disconnect‘).click(function(){    
  64.              socket.close();    
  65.           });    
  66.     
  67.       }//End connect    
  68.     
  69.   }//End else    
  70.     
  71. });  

第九步：运行Web Socket服务器

我们要输入一些命令行，XAMPP提供了比较方便的shell选项。点击XAMPP控制面板的’shell’按钮并输入：

运行WebSocket服务器

  1. php -q path\to\server.php
  2.  

现在你已经运行了Web Socket服务器！

大功告成！

大功告成

当页面读取后，将尝试创建一个Web Socket连接，然后用户可以输入信息并从服务器接收信息。大家可以通过The Web Socket API了解HTML 5 Web Socket的最新动态。


联系
我们