HTML5WebSockets应用初探

HTML 5之中一个很酷的新特性就是Web Sockets，在本文之前在《HTML 5 Web Socket：下一次Web通信革命揭幕》一文中已经详细的为大家介绍过HTML 5 Web Sockets为Web通信带来的改变，而本文将介绍通过PHP环境的服务器端运行Web Socket，创建客户端并通过Web Sockets协议发送和接收服务器端信息。

成都创新互联公司专注于企业成都全网营销推广、网站重做改版、古浪网站定制设计、自适应品牌网站建设、H5开发、商城系统网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为古浪等各大城市提供网站开发制作服务。

什么是Web Sockets？

Web Sockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时Web Sockets仍将基于W3C标准，目前为止，Chrome和Safari的***版本浏览器已经支持Web Sockets了。

Web Sockets将会替代什么？　　

Web Sockets可以替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到***的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。

这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。

一些Ajax应用使用上述技术-这经常是归因于低资源利用。试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！

***步：搞定Web Socket服务器　　

文章会把更多的精力放在客户端的创建而不是服务器端的执行等操作。作者使用的是基于Windows 7的XAMPP来实现本地运行PHP。

启动Apache服务器

第二步：修改URLs和端口　　

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

 
 
 
 
  
  
  
  public function __construct($host='localhost',$port=8000,$max=100)   
  
  
  
     
  
  
  
     $this->createSocket($host,$port);

浏览文件并在适当情况下进行更改。

第三步：开始创建客户端　　

下面来创建基本模板，这是我的client.php文件：

 
 
 
 
  
  
  
      
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
  Web Sockets Client   
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
         
  
  
  
     
  
  
  
          Web Sockets Client

e.g. try 'hi', 'name', 'age', 'today'

Disconnect

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;
}

$(document).ready(function() {
if(!("Web Socket" in window)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('
Oh no, you need a browser that supports Web Sockets. How about Google Chrome?
').appendTo('#container');
}else{
//The user has Web Sockets
connect();
function connect(){
//the connect function code is below
}
});

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('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);
}
}

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

function send(){
var text = $('#text').val();
if(text==""){
message('Please enter a message');
return ;
}
try{
socket.send(text);
message('Sent: '+text)
} catch(exception){
message(' Error:' + exception);
}
$('#text').val("");

$(document).ready(function() {
if(!("Web Socket" in window)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('
Oh no, you need a browser that supports Web Sockets. How about Google Chrome?
').appendTo('#container');
}else{
//The user has Web Sockets
connect();
function connect(){
var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
try{
var socket = new Web Socket(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
});