网络编程
位置：首页>> 网络编程>> 网页设计>> HTML5 WebSockets基础使用教程（4）

HTML5 WebSockets基础使用教程（4）

作者：暴风彬彬　来源：彬Go　发布时间：2010-09-21 12:48:00　

标签：HTML5,WebSockets,教程

我们将在我们的服务器定义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连接、通过创建连接保持用户的进展更新。

第一页 上一页 2 3
4
5 6 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com