HTML5 WebSockets怎么使用

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

　　什么是WebSockets？

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

　　WebSockets將會替代什么？

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

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

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

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

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

　　第三步：開始創建客戶端

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

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

　　第四步：添加一些CSS

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

　　第五步：WebSocket事件

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

　　WebSocket事件：

　　我們將使用三個WebSocket事件：

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

　　我們如何來實現呢？

　　首先創建WebSocket對象

　　然后向下面這樣檢測事件

　　3 }

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

　　第六步：JavaScript

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

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

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

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

　　下面讓我們繼續完成connect()函數，我們將代碼放入try/catch塊，這樣如果代碼出現問題，我們能讓用戶知道。我們創建WebSocket，并將信息傳遞到message()函數，之后會做講解。我們創建我們的onopen、onmessage和onclose函數.需要注意的是我們為用戶提供了端口狀態，這并不是必需的，但我們把它放進來主要是為了方便調試。

　　CONNECTING = 0OPEN = 1CLOSED = 2

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

　　目前的成果

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

　　第七步：發送數據

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

　　下面是send()函數：

　　下面我們需要：

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

　　關閉Socket

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

　　完整JavaScript代碼

　　第九步：運行WebSocket服務器

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

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