HTML 5 Web Sockets应用初探(3)

第六步：JavaScript

首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持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，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。我们将在我们的服务器定义URL。

var socket;   
var host = "ws://localhost:8000/socket/server/startDaemon.php"; 
你可能会发现URL中怎么没有http？恩，是的，这是一个Web Socket URL，使用了不同的协议。下面是URL分解图示：





下面让我们继续完成connect()函数，我们将代码放入try/catch块，这样如果代码出现问题，我们能让用户知道。我们创建Web Socket，并将信息传递到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 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()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。 我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有一个段落结束标签。

function message(msg){   
    $('#chatLog').append(msg+'</p>');   
} 
目前的成果

如果你已按上面教程按部就班的做的话，很好，我们已经创建了HTML/CSS模板、创建并建立Web Socket连接、通过创建连接保持用户的进展更新。