强大的HTML5 WebSockets-讲解WebSockets入门必看-智软工作室

智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司，宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务，优惠的价格，深的客户信赖。相信有你的加入我们的明天会更有动力！期待与你合作！

2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案

强大的HTML5 WebSockets-讲解WebSockets入门必看

2010-09-20 17:23

我们将在我们的服务器定义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('Socket Status: '+socket.readyState);
 socket.onopen = function(){
 message('Socket Status: '+socket.readyState+' (open)');
 }
 socket.onmessage = function(msg){
 message('Received: '+msg.data);
 }
 socket.onclose = function(){
 message('Socket Status: '+socket.readyState+' (Closed)');
 }
 } catch(exception){
 message('Error'+exception);
 }
}

message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。我们在socket事件函数中为段落()标签创建适当的class，我们在message函数中只有一个段落结束标签。

function message(msg){
$('#chatLog').append(msg+'');
}

目前的成果

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

第七步：发送数据　　

现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

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

下面是send()函数：

下面我们需要：

socket.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");
$('Oh no, you need a browser that supports WebSockets. How about <a href="Google'>http://www.google.com/chrome">Google Chrome</a>?').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('Socket Status: '+socket.readyState);
 socket.onopen = function(){
 message('Socket Status: '+socket.readyState+' (open)');
 }
 socket.onmessage = function(msg){
 message('Received: '+msg.data);
 }
 socket.onclose = function(){
 message('Socket Status: '+socket.readyState+' (Closed)');
 }
 } catch(exception){
 message('Error'+exception);
 }
 function send(){
 var text = $('#text').val();

 if(text==""){
 message('Please enter a message');
 return ;
 }
 try{
 socket.send(text);
 message('Sent: '+text)
 } catch(exception){
 message('');
 }
 $('#text').val("");
 }
 function message(msg){
 $('#chatLog').append(msg+'');
 }
 $('#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的最新动态。