HTML 5 Web Sockets应用初探(1)

时间 2021-07-14 标签 Web HTML 应用服务器 PHP jQuery

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

什么是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文件： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>Web Sockets Client</title> </head> <body> <div id="wrapper"> <div id="container"> <h1>Web Sockets 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输入框和一个断开连接的按钮。