HTML5WebSockets的介紹以及應用

這篇文章給大家介紹HTML5 Web Sockets的介紹以及應用，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

10年積累的網(wǎng)站制作、成都網(wǎng)站建設(shè)經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有長治免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

HTML 5之中一個很酷的新特性就是Web Sockets

介紹通過PHP環(huán)境的服務(wù)器端運行Web Socket，創(chuàng)建客戶端并通過Web Sockets協(xié)議發(fā)送和接收服務(wù)器端信息。

什么是Web Sockets？

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

Web Sockets將會替代什么？

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

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

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

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

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

啟動Apache服務(wù)器

HTML5 Web Sockets的介紹以及應用

第二步：修改URLs和端口　　

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

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

瀏覽文件并在適當情況下進行更改。

第三步：開始創(chuàng)建客戶端　　

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

 <!DOCTYPE html>    <html>    <head>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>        <title>Web Sockets Client</title>        </head>    <body>    <div id="wrapper">            <div id="container">                <h2>Web Sockets Client</h2>                <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>

我們已經(jīng)創(chuàng)建里基本模板：一個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;    }

第五步：Web Socket事件

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

HTML5 Web Sockets的介紹以及應用

◆onopen: 當接口打開時

◆onmessage: 當收到信息時

◆onclose: 當接口關(guān)閉時

我們?nèi)绾蝸韺崿F(xiàn)呢？首先創(chuàng)建Web Socket對象。

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

然后向下面這樣檢測事件：

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

當我們收到信息時這樣做：

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

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

第六步：JavaScript

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

 $(document).ready(function() {        if(!("Web Socket" in window)){            $('#chatLog, input, button, #examples').fadeOut("fast");            $('<p>Oh no, you need a browser that supports Web Sockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');        }else{            //The user has Web Sockets            connect();            function connect(){            //the connect function code is below            }    });

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

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

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

HTML5 Web Sockets的介紹以及應用

下面讓我們繼續(xù)完成connect()函數(shù)，我們將代碼放入try/catch塊，這樣如果代碼出現(xiàn)問題，我們能讓用戶知道。我們創(chuàng)建Web Socket，并將信息傳遞到message()函數(shù)，之后會做講解。我們創(chuàng)建我們的onopen、onmessage和onclose函數(shù). 需要注意的是我們?yōu)橛脩籼峁┝硕丝跔顟B(tà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('<p class="event">Socket Status: '+socket.readyState);                socket.onopen = function(){                 message('<p class="event">Socket Status: '+socket.readyState+' (open)');            }                socket.onmessage = function(msg){                 message('<p class="message">Received: '+msg.data);            }                socket.onclose = function(){                 message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');            }                       } catch(exception){             message('<p>Error'+exception);        }    }

message()函數(shù)很簡單, 它將我們想展現(xiàn)給用戶的文本填入chat log容器內(nèi)。我們在socket事件函數(shù)中為段落(<p>)標簽創(chuàng)建適當?shù)腸lass，我們在message函數(shù)中只有一個段落結(jié)束標簽。

 function message(msg){        $('#chatLog').append(msg+'</p>');    }

目前的成果

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

HTML5 Web Sockets的介紹以及應用

第七步：發(fā)送數(shù)據(jù)

現(xiàn)在我們已經(jīng)有了提交按鈕，但我們還需要監(jiān)聽用戶按下鍵盤的事件，并運行send函數(shù)，下面的’13′便是回車鍵對應的ASCII碼。

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

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

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

下面我們需要：

socket.send();

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

第八步：關(guān)閉Socket

關(guān)閉Socket操作相當簡單，添加對斷開連接按鈕的click事件監(jiān)聽就可以。

HTML5 Web Sockets的介紹以及應用

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

完整JavaScript代碼

 $(document).ready(function() {          if(!("Web Socket" in window)){      $('#chatLog, input, button, #examples').fadeOut("fast");      $('<p>Oh no, you need a browser that supports Web Sockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');      }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('<p class="event">Socket Status: '+socket.readyState);                      socket.onopen = function(){                     message('<p class="event">Socket Status: '+socket.readyState+' (open)');                  }                      socket.onmessage = function(msg){                     message('<p class="message">Received: '+msg.data);                  }                      socket.onclose = function(){                    message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');                  }                           } catch(exception){                 message('<p>Error'+exception);              }                  function send(){                  var text = $('#text').val();                      if(text==""){                      message('<p class="warning">Please enter a message');                      return ;                  }                  try{                      socket.send(text);                      message('<p class="event">Sent: '+text)                      } catch(exception){                     message('<p class="warning">');                  }                  $('#text').val("");              }                  function message(msg){                $('#chatLog').append(msg+'</p>');              }                  $('#text').keypress(function(event) {                  if (event.keyCode == '13') {                    send();                  }              });                     $('#disconnect').click(function(){                 socket.close();              });              }//End connect          }//End else        });

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

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

HTML5 Web Sockets的介紹以及應用

php -q path\to\server.php

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

大功告成！

HTML5 Web Sockets的介紹以及應用

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

關(guān)于HTML5 Web Sockets的介紹以及應用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前題目：HTML5WebSockets的介紹以及應用
標題鏈接：http://jinyejixie.com/article40/ggigeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計公司、移動網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、Google、網(wǎng)站導航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML5WebSockets的介紹以及應用