手机推荐排行榜,盗墓笔记小说txt下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

HTML5WebSockets應(yīng)用初探

HTML 5之中一個(gè)很酷的新特性就是Web Sockets，在本文之前在《HTML 5 Web Socket：下一次Web通信革命揭幕》一文中已經(jīng)詳細(xì)的為大家介紹過(guò)HTML 5 Web Sockets為Web通信帶來(lái)的改變，而本文將介紹通過(guò)PHP環(huán)境的服務(wù)器端運(yùn)行Web Socket，創(chuàng)建客戶(hù)端并通過(guò)Web Sockets協(xié)議發(fā)送和接收服務(wù)器端信息。

成都創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、古浪網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開(kāi)發(fā)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為古浪等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

什么是Web Sockets？

Web Sockets是在一個(gè)(TCP)接口進(jìn)行雙向通信的技術(shù)，PUSH技術(shù)類(lèi)型。同時(shí)Web Sockets仍將基于W3C標(biāo)準(zhǔn)，目前為止，Chrome和Safari的***版本瀏覽器已經(jīng)支持Web Sockets了。

Web Sockets將會(huì)替代什么？　　

Web Sockets可以替代Long Polling(PHP服務(wù)端推送技術(shù))，這是一個(gè)有趣的概念?？蛻?hù)端發(fā)送一個(gè)請(qǐng)求到服務(wù)器，現(xiàn)在，服務(wù)器端并不會(huì)響應(yīng)還沒(méi)準(zhǔn)備好的數(shù)據(jù)，它會(huì)保持連接的打開(kāi)狀態(tài)直到***的數(shù)據(jù)準(zhǔn)備就緒發(fā)送，之后客戶(hù)端收到數(shù)據(jù)，然后發(fā)送另一個(gè)請(qǐng)求。

這有它的好處：減少任一連接的延遲，當(dāng)一個(gè)連接已經(jīng)打開(kāi)時(shí)就不需要?jiǎng)?chuàng)建另一個(gè)新的連接。但是Long-Polling并不是什么花俏技術(shù)，他仍有可能發(fā)生請(qǐng)求暫停，因此會(huì)需要建立新的連接。

一些Ajax應(yīng)用使用上述技術(shù)-這經(jīng)常是歸因于低資源利用。試想一下，如果服務(wù)器在早晨會(huì)自啟動(dòng)并發(fā)送數(shù)據(jù)到那些希望接收而不用提前建立一些連接端口的客戶(hù)端，這是一件多棒的事情??！歡迎來(lái)到PUSH技術(shù)的世界！

***步：搞定Web Socket服務(wù)器　　

文章會(huì)把更多的精力放在客戶(hù)端的創(chuàng)建而不是服務(wù)器端的執(zhí)行等操作。作者使用的是基于Windows 7的XAMPP來(lái)實(shí)現(xiàn)本地運(yùn)行PHP。

啟動(dòng)Apache服務(wù)器

第二步：修改URLs和端口　　

根據(jù)你之前的安裝修改服務(wù)器，下面是setup.class.php中的例子：

 
 
 
 
  
  
  
  public function __construct($host='localhost',$port=8000,$max=100)   
  
  
  
     
  
  
  
     $this->createSocket($host,$port);

瀏覽文件并在適當(dāng)情況下進(jìn)行更改。

第三步：開(kāi)始創(chuàng)建客戶(hù)端　　

下面來(lái)創(chuàng)建基本模板，這是我的client.php文件：

 
 
 
 
  
  
  
      
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
  Web Sockets Client   
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
         
  
  
  
     
  
  
  
          Web Sockets Client

e.g. try 'hi', 'name', 'age', 'today'

Disconnect

我們已經(jīng)創(chuàng)建里基本模板：一個(gè)chat log容器，一個(gè)input輸入框和一個(gè)斷開(kāi)連接的按鈕。

#p#

第四步：添加一些CSS　　

沒(méi)什么花俏代碼，只是處理一下標(biāo)簽的樣式。

 
 
 
 
  
  
  
   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;   
  
  
  
  }

第五步：Web Socket事件

首先讓我們嘗試并理解Web Socket事件的概念：

◆onopen: 當(dāng)接口打開(kāi)時(shí)

◆onmessage: 當(dāng)收到信息時(shí)

◆onclose: 當(dāng)接口關(guān)閉時(shí)

我們?nèi)绾蝸?lái)實(shí)現(xiàn)呢？首先創(chuàng)建Web Socket對(duì)象。

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

然后向下面這樣檢測(cè)事件：

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

當(dāng)我們收到信息時(shí)這樣做：

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

但我們還是盡量避免使用alert，現(xiàn)在我們可以把我們學(xué)的東西整合到客戶(hù)端頁(yè)面中了。

#p#

第六步：JavaScript　　

首先我們將代碼放到j(luò)Query 的 document.ready函數(shù)中，然后我們還要檢查用戶(hù)的瀏覽器是否支持Web Socket。如果不支持，我們就添加一個(gè)鏈向Chrome瀏覽器頁(yè)面的鏈接。

 
 
 
 
  
  
  
   $(document).ready(function() {   
  
  
  
      if(!("Web Socket" in window)){   
  
  
  
          $('#chatLog, input, button, #examples').fadeOut("fast");   
  
  
  
          $('Oh no, you need a browser that supports Web Sockets. How about 
  
  
  
  
    }else{   
  
  
  
     
  
  
  
      //The user has Web Sockets   
  
  
  
     
  
  
  
      connect();   
  
  
  
     
  
  
  
      function connect(){   
  
  
  
          //the connect function code is below   
  
  
  
     
  
  
  
      }   
  
  
  
  });

如你所見(jiàn)，如果用戶(hù)瀏覽器支持Web Socket，我們將執(zhí)行connect()函數(shù)。這里是核心功能，我們將開(kāi)始創(chuàng)建open、close和receive事件。我們將在我們的服務(wù)器定義URL。

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

你可能會(huì)發(fā)現(xiàn)URL中怎么沒(méi)有http？恩，是的，這是一個(gè)Web Socket URL，使用了不同的協(xié)議。下面是URL分解圖示：

下面讓我們繼續(xù)完成connect()函數(shù)，我們將代碼放入try/catch塊，這樣如果代碼出現(xiàn)問(wèn)題，我們能讓用戶(hù)知道。我們創(chuàng)建Web Socket，并將信息傳遞到message()函數(shù)，之后會(huì)做講解。我們創(chuàng)建我們的onopen、onmessage和onclose函數(shù). 需要注意的是我們?yōu)橛脩?hù)提供了端口狀態(tài)，這并不是必需的，但我們把它放進(jìn)來(lái)主要是為了方便調(diào)試。

 
 
 
 
  
  
  
  CONNECTING = 0
  
  
  
  OPEN = 1
  
  
  
  CLOSED = 2
  
  
  
  
  
  
  
   function connect(){   
  
  
  
      try{   
  
  
  
     
  
  
  
      var socket;   
  
  
  
      var host = "ws://localhost:8000/socket/server/startDaemon.php";   
  
  
  
      var socket = new Web Socket(host);   
  
  
  
     
  
  
  
          message('Socket Status: '+socket.readyState);   
  
  
  
     
  
  
  
          socket.onopen = function(){   
  
  
  
               message('Socket Status: '+socket.readyState+' (open)');   
  
  
  
          }   
  
  
  
     
  
  
  
          socket.onmessage = function(msg){   
  
  
  
               message('Received: '+msg.data);   
  
  
  
          }   
  
  
  
     
  
  
  
          socket.onclose = function(){   
  
  
  
               message('Socket Status: '+socket.readyState+' (Closed)');   
  
  
  
          }              
  
  
  
     
  
  
  
      } catch(exception){   
  
  
  
           message('Error'+exception);   
  
  
  
      }   
  
  
  
  }

message()函數(shù)很簡(jiǎn)單, 它將我們想展現(xiàn)給用戶(hù)的文本填入chat log容器內(nèi)。我們?cè)趕ocket事件函數(shù)中為段落(

)標(biāo)簽創(chuàng)建適當(dāng)?shù)腸lass，我們?cè)趍essage函數(shù)中只有一個(gè)段落結(jié)束標(biāo)簽。

 
 
 
 
  
  
  
   function message(msg){   
  
  
  
      $('#chatLog').append(msg+'
');   
  
  
  
  }

目前的成果
　　
如果你已按上面教程按部就班的做的話(huà)，很好，我們已經(jīng)創(chuàng)建了HTML/CSS模板、創(chuàng)建并建立Web Socket連接、通過(guò)創(chuàng)建連接保持用戶(hù)的進(jìn)展更新。

第七步：發(fā)送數(shù)據(jù)
　　
現(xiàn)在我們已經(jīng)有了提交按鈕，但我們還需要監(jiān)聽(tīng)用戶(hù)按下鍵盤(pán)的事件，并運(yùn)行send函數(shù)，下面的’13′便是回車(chē)鍵對(duì)應(yīng)的ASCII碼。

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

下面是send()函數(shù)：

 
 
 
 
  
  
  
  function send(){   
  
  
  
    
  
  
  
     var text = $('#text').val();   
  
  
  
     if(text==""){   
  
  
  
         message('Please enter a message');   
  
  
  
         return ;   
  
  
  
     }   
  
  
  
     try{   
  
  
  
         socket.send(text);   
  
  
  
         message('Sent: '+text)   
  
  
  
     } catch(exception){   
  
  
  
     message(' Error:' + exception);   
  
  
  
     }   
  
  
  
    
  
  
  
     $('#text').val("");

下面我們需要：

 
 
 
 
  
  
  
  socket.send();

那些額外的代碼做了以下工作：檢測(cè)用戶(hù)是否什么都沒(méi)輸入?yún)s仍點(diǎn)擊返回、清空input輸入框、執(zhí)行message()函數(shù)。

#p#

第八步：關(guān)閉Socket
　　
關(guān)閉Socket操作相當(dāng)簡(jiǎn)單，添加對(duì)斷開(kāi)連接按鈕的click事件監(jiān)聽(tīng)就可以。

 
 
 
 
  
  
  
   $('#disconnect').click(function(){   
  
  
  
      socket.close();   
  
  
  
  });

完整JavaScript代碼

 
 
 
 
  
  
  
   $(document).ready(function() {   
  
  
  
     
  
  
  
    if(!("Web Socket" in window)){   
  
  
  
    $('#chatLog, input, button, #examples').fadeOut("fast");   
  
  
  
    $('Oh no, you need a browser that supports Web Sockets. How about 
  
  
  
  
  }else{   
  
  
  
        //The user has Web Sockets   
  
  
  
     
  
  
  
        connect();   
  
  
  
     
  
  
  
        function connect(){   
  
  
  
            var socket;   
  
  
  
            var host = "ws://localhost:8000/socket/server/startDaemon.php";   
  
  
  
     
  
  
  
            try{   
  
  
  
                var socket = new Web Socket(host);   
  
  
  
     
  
  
  
                message('Socket Status: '+socket.readyState);   
  
  
  
     
  
  
  
                socket.onopen = function(){   
  
  
  
                   message('Socket Status: '+socket.readyState+' (open)');   
  
  
  
                }   
  
  
  
     
  
  
  
                socket.onmessage = function(msg){   
  
  
  
                   message('Received: '+msg.data);   
  
  
  
                }   
  
  
  
     
  
  
  
                socket.onclose = function(){   
  
  
  
                  message('Socket Status: '+socket.readyState+' (Closed)');   
  
  
  
                }            
  
  
  
     
  
  
  
            } catch(exception){   
  
  
  
               message('Error'+exception);   
  
  
  
            }   
  
  
  
     
  
  
  
            function send(){   
  
  
  
                var text = $('#text').val();   
  
  
  
     
  
  
  
                if(text==""){   
  
  
  
                    message('Please enter a message');   
  
  
  
                    return ;   
  
  
  
                }   
  
  
  
                try{   
  
  
  
                    socket.send(text);   
  
  
  
                    message('Sent: '+text)   
  
  
  
     
  
  
  
                } catch(exception){   
  
  
  
                   message('');   
  
  
  
                }   
  
  
  
                $('#text').val("");   
  
  
  
            }   
  
  
  
     
  
  
  
            function message(msg){   
  
  
  
              $('#chatLog').append(msg+'
');   
  
  
  
            }   
  
  
  
     
  
  
  
            $('#text').keypress(function(event) {   
  
  
  
                if (event.keyCode == '13') {   
  
  
  
                  send();   
  
  
  
                }   
  
  
  
            });      
  
  
  
     
  
  
  
            $('#disconnect').click(function(){   
  
  
  
               socket.close();   
  
  
  
            });   
  
  
  
     
  
  
  
        }//End connect   
  
  
  
     
  
  
  
    }//End else   
  
  
  
     
  
  
  
  });

第九步：運(yùn)行Web Socket服務(wù)器

我們要輸入一些命令行，XAMPP提供了比較方便的shell選項(xiàng)。點(diǎn)擊XAMPP控制面板的’shell’按鈕并輸入：

 
 
 
 
  
  
  
  php -q path\to\server.php

現(xiàn)在你已經(jīng)運(yùn)行了Web Socket服務(wù)器！

大功告成！

當(dāng)頁(yè)面讀取后，將嘗試創(chuàng)建一個(gè)Web Socket連接，然后用戶(hù)可以輸入信息并從服務(wù)器接收信息。大家可以通過(guò)The Web Socket API了解HTML 5 Web Socket的***動(dòng)態(tài)。

原文標(biāo)題：HTML 5 Web Sockets 基礎(chǔ)使用教程

原文地址：http://blog.bingo929.com/html5-Web Sockets.html

網(wǎng)站欄目：HTML5WebSockets應(yīng)用初探
當(dāng)前網(wǎng)址：http://m.fisionsoft.com.cn/article/djjpose.html

新聞中心

Web Sockets Client

其他資訊