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

HTML5 WebSockets基础使用教程（2）

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

标签：HTML5,WebSockets,教程

第二步：修改URLs和端口　　

根据你之前的安装修改服务器，下面是setup.class.php中的例子：

 public function __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; 
}

 

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

猜你喜欢

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