HTML5 WebSockets 基礎使用分享

時間 2019-12-06

標籤 html5 html websockets 基礎使用分享欄目 HTML5 简体版

原文原文鏈接

摘要：HTML5之中一個很酷的新特性就是WebSockets，它可讓咱們無需AJAX請求便可與服務器端對話。今天彬Go將讓你們經過Php環境的服務器端運行WebSocket，建立客戶端並經過WebSockets協議發送和接收服務器端信息。

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

　　WebSockets將會替代什麼？php

　　WebSockets能夠替代Long Polling(PHP服務端推送技術)，這是一個有趣的概念。客戶端發送一個請求到服務器，如今，服務器端並不會響應還沒準備好的數據，它會保持鏈接的打開狀態直到最新的數據準備就緒發送，以後客戶端收到數據，而後發送另外一個請求。這有它的好處：減小任一鏈接的延遲，當一個鏈接已經打開時就不須要建立另外一個新的鏈接。可是Long-Polling並非什麼花俏技術，他仍有可能發生請求暫停，所以會須要創建新的鏈接。html

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

　　試想一下，若是服務器在早晨會自啓動併發送數據到那些但願接收而不用提早創建一些鏈接端口的客戶端，這是一件多棒的事情啊！歡迎來到PUSH技術的世界！java

　　第一步：搞定WebSocket服務器
　　這篇教程會把更多的精力放在客戶端的建立而不是服務器端的執行等操做。jquery

　　我使用基於windows 7的XAMPP來實現本地運行PHP。phpwebsockets是PHP WebSocket服務器。(以個人經驗這個版本存在一些小問題，我已對它作了些修改並上傳源文件共享給你們)下面的這些不一樣版本也能夠實現WebSocket，若是某個不能用，你能夠試試其它版本或者繼續看下面的教程。web

啓動Apache服務器ajax

第二步：修改URLs和端口
chrome

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

publicfunction _construct($host='localhost',$port=8000,$max=100)  
{  
    $this->createSocket($host,$port);  
}

瀏覽文件並在適當狀況下進行更改。

第三步：開始建立客戶端

　　下面來建立基本模板，這是個人client.php文件：

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

咱們已經建立裏基本模板：一個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;
}

第五步：WebSocket事件
　　首先讓咱們嘗試並理解WebSocket事件的概念：

　　WebSocket事件：

　　咱們將使用三個WebSocket事件：

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

　　咱們如何來實現呢？

　　首先建立WebSocket對象

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

而後向下面這樣檢測事件

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

但咱們仍是儘可能避免使用alert，如今咱們能夠把咱們學的東西整合到客戶端頁面中了。

第六步：JavaScript
　　首先咱們將代碼放到jQuery的 document.ready函數中，而後咱們還要檢查用戶的瀏覽器是否支持WebSocket。若是不支持，咱們就添加一個鏈向Chrome瀏覽器頁面的連接。

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

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

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

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

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

　　下面讓咱們繼續完成connect()函數，咱們將代碼放入try/catch塊，這樣若是代碼出現問題，咱們能讓用戶知道。咱們建立WebSocket，並將信息傳遞到message()函數，以後會作講解。咱們建立咱們的onopen、onmessage和onclose函數.須要注意的是咱們爲用戶提供了端口狀態，這並非必需的，但咱們把它放進來主要是爲了方便調試。

CONNECTING = 0
OPEN = 1
CLOSED = 2

function connect(){  
try{  

var socket;  
var host ="ws://localhost:8000/socket/server/startDaemon.php";  
var socket =new WebSocket(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()函數很簡單,它將咱們想展示給用戶的文本填入chat log容器內。咱們在socket事件函數中爲段落(<p>)標籤建立適當的class，咱們在message函數中只有一個段落結束標籤。

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

目前的成果

　　若是你已按上面教程循序漸進的作的話，很好，咱們已經建立了 HTML/CSS 模板、建立並創建Websocket鏈接、經過建立鏈接保持用戶的進展更新。

第七步：發送數據
　　如今咱們已經有了提交按鈕，但咱們還須要監聽用戶按下鍵盤的事件，並運行send函數，下面的’13′即是回車鍵對應的ASCII碼。

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

下面是send()函數：

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("");  

}

下面咱們須要：

1socket.send();

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

　　關閉Socket
　　關閉Socket操做至關簡單，添加對斷開鏈接按鈕的click事件監聽就能夠。

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

完整JavaScript代碼

    $(document).ready(function() {

        if(!("WebSocket"in window)){
            $('#chatLog, input, button, #examples').fadeOut("fast");
            $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
        }else{
            //The user has WebSockets  
            connect();
            function connect(){
                var socket;
                var host ="ws://localhost:8000/socket/server/startDaemon.php";

                try{
                    var socket =new WebSocket(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  

    });

第九步：運行WebSocket服務器
　　咱們要輸入一些命令行，XAMPP提供了比較方便的shell選項。點擊XAMPP控制面板的’shell’按鈕並輸入：php -q path\to\server.php如今你已經運行了WebSocket服務器！

　　大功告成！
　　當頁面讀取後，將嘗試建立一個WebSocket鏈接，而後用戶能夠輸入信息並從服務器接收信息。

　　感謝你們耐心閱讀本教程，但願你能從中學到有用的知識，HTML5 WebSocket的確使人興奮不已！你們能夠經過The WebSocket API瞭解HTML5 WebSocket的最新動態。點擊這裏下載源文件

文章來源：HTML5 WebSockets 基礎使用分享