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

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

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

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

2010-09-20 17:23

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。

什么是WebSockets？

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

WebSockets将会替代什么？　　WebSockets可以替代Long Polling（PHP服务端推送技术），这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。

一些AJAX应用使用上述技术-这经常是归因于低资源利用。

试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！

第一步：搞定WebSocket服务器

这篇教程会把更多的精力放在客户端的创建而不是服务器端的执行等操作。

我使用基于windows 7的XAMPP来实现本地运行PHP。phpwebsockets是PHP WebSocket服务器。（以我的经验这个版本存在一些小问题，我已对它做了些修改并上传源文件共享给大家）下面的这些不同版本也可以实现WebSocket，如果某个不能用，你可以试试其它版本或者继续看下面的教程。

jWebSocket （Java）

web-socket-ruby （ruby）

Socket IO-node （node.js）

启动Apache服务器

第二步：修改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>
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>
        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>
    </div>
</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;
}

第五步：WebSocket

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

WebSocket事件：

我们将使用三个WebSocket事件：

onopen：当接口打开时

onmessage：当收到信息时

onclose：当接口关闭时

我们如何来实现呢？

首先创建WebSocket对象

var socket = new WebSocket（“ws://localhost:8000/socket/server/startDaemon.php”）;

然后向下面这样检测事件

socket.onopen = function(){
alert("Socket has been opened!");
}

当我们收到信息时这样做：

socket.onmessage = function(msg){
alert(msg); //Awesome!
}

但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。

第六步：JavaScript　　

首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持WebSocket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。

$(document).ready(function() {
    if(!("WebSocket" in window)){
        $('#chatLog, input, button, #examples').fadeOut("fast");
        $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="Google'>http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
    }else{
    //The user has WebSockets
    connect();
    function connect(){
        //the connect function code is below
    }
});

如你所见，如果用户浏览器支持WebSocket，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。