HTML 5 Web Sockets应用初探(2)

第四步：添加一些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;   
} 
第五步：Web Socket事件

首先让我们尝试并理解Web Socket事件的概念：



◆onopen: 当接口打开时

◆onmessage: 当收到信息时

◆onclose: 当接口关闭时

我们如何来实现呢？首先创建Web Socket对象。

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

然后向下面这样检测事件：

socket.onopen = function(){   
    alert("Socket has been opened!");   
} 
当我们收到信息时这样做：

socket.onmessage = function(msg){   
    alert(msg); //Awesome!   
} 
但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。