HTML5 WebSockets怎么使用

今天小編給大家分享一下HTML5 WebSockets怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　什么是WebSockets？

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

　　WebSockets將會替代什么？

　　WebSockets可以替代Long Polling(PHP服務端推送技術)，這是一個有趣的概念?？蛻舳税l(fā)送一個請求到服務器，現(xiàn)在，服務器端并不會響應還沒準備好的數(shù)據，它會保持連接的打開狀態(tài)直到最新的數(shù)據準備就緒發(fā)送，之后客戶端收到數(shù)據，然后發(fā)送另一個請求。這有它的好處：減少任一連接的延遲，當一個連接已經打開時就不需要創(chuàng)建另一個新的連接。但是Long-Polling并不是什么花俏技術，他仍有可能發(fā)生請求暫停，因此會需要建立新的連接。

　　一些AJAX應用使用上述技術-這經常是歸因于低資源利用。

　　試想一下，如果服務器在早晨會自啟動并發(fā)送數(shù)據到那些希望接收而不用提前建立一些連接端口的客戶端，這是一件多棒的事情??！歡迎來到PUSH技術的世界！

　　第一步：搞定WebSocket服務器

　　這篇教程會把更多的精力放在客戶端的創(chuàng)建而不是服務器端的執(zhí)行等操作。

　　我使用基于windows 7的XAMPP來實現(xiàn)本地運行PHP。phpwebsockets是PHP WebSocket服務器。(以我的經驗這個版本存在一些小問題，我已對它做了些修改并上傳源文件共享給大家)下面的這些不同版本也可以實現(xiàn)WebSocket，如果某個不能用，你可以試試其它版本或者繼續(xù)看下面的教程。

　　jWebSocket?(Java)

　　web-socket-ruby(ruby)

　　Socket IO-node?(node.js)

　　啟動Apache服務器

　　第二步：修改URLs和端口

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

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

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

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

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

　　第四步：添加一些CSS

　　沒什么花俏代碼，只是處理一下標簽的樣式。

　　第五步：WebSocket事件

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

　　WebSocket事件：

　　我們將使用三個WebSocket事件：

　　onopen: 當接口打開時onmessage: 當收到信息時onclose: 當接口關閉時

　　我們如何來實現(xiàn)呢？

　　首先創(chuàng)建WebSocket對象

　　然后向下面這樣檢測事件

　　3 }

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

　　第六步：JavaScript

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

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

　　我們將在我們的服務器定義URL。

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

　　下面讓我們繼續(xù)完成connect()函數(shù)，我們將代碼放入try/catch塊，這樣如果代碼出現(xiàn)問題，我們能讓用戶知道。我們創(chuàng)建WebSocket，并將信息傳遞到message()函數(shù)，之后會做講解。我們創(chuàng)建我們的onopen、onmessage和onclose函數(shù).需要注意的是我們?yōu)橛脩籼峁┝硕丝跔顟B(tài)，這并不是必需的，但我們把它放進來主要是為了方便調試。

　　CONNECTING = 0OPEN = 1CLOSED = 2

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

　　目前的成果

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

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

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

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

　　下面我們需要：

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

　　關閉Socket

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

　　完整JavaScript代碼

　　第九步：運行WebSocket服務器

　　我們要輸入一些命令行，XAMPP提供了比較方便的shell選項。點擊XAMPP控制面板的&rsquo;shell&rsquo;按鈕并輸入：php -q path\to\server.php現(xiàn)在你已經運行了WebSocket服務器！

以上就是“HTML5 WebSockets怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。