[网页设计]Ajax、Comet与Websocket--转

http协议说起

1996年IETF  HTTP工作组发布了HTTP协议的1.0版本 ,到现在普遍使用的版本1.1,HTTP协议经历了17 年的发展。这种分布式、无状态、基于TCP的请求/响应式、在互联网盛行的今天得到广泛应用的协议,相对于互联网的迅猛发展,它似乎进步地很慢。互联网从兴起到现在,经历了门户网站盛行的web1.0时代,而后随着ajax技术的出现,发展为web应用盛行的web2.0时代,如今又朝着web3.0的方向迈进。反观http协议,从版本1.0发展到1.1,除了默认长连接之外就是缓存处理、带宽优化和安全性等方面的不痛不痒的改进。它一直保留着无状态、请求/响应模式,似乎从来没意识到这应该有所改变。

Ajax---脚本发送的http请求

传统的web应用要想与服务器交互,必须提交一个表单(form),服务器接收并处理传来的表单,然后返回全新的页面,因为前后两个页面的数据大部分都是相同的,这个过程传输了很多冗余的数据、浪费了带宽。于是Ajax技术便应运而生。

Ajax是Asynchronous JavaScript and 的简称,由Jesse James Garrett 首先提出。这种技术开创性地允许浏览器脚本(JS)发送http请求。Outlook Web Access小组于98年使用,并很快成为IE4.0的一部分,但是这个技术一直很小众,直到2005年初,google在他的goole groups、gmail等交互式应用中广泛使用此种技术,才使得Ajax迅速被大家所接受。

Ajax的出现使客户端与服务器端传输数据少了很多,也快了很多,也满足了以丰富用户体验为特点的web2.0时代 初期发展的需要,但是慢慢地也暴露了他的弊端。比如无法满足即时通信等富交互式应用的实时更新数据的要求。这种浏览器端的小技术毕竟还是基于http协议,http协议要求的请求/响应的模式也是无法改变的,除非http协议本身有所改变。

 

Comet---一种hack技术

以即时通信为代表的web应用程序对数据的Low Latency要求,传统的基于轮询的方式已经无法满足,而且也会带来不好的用户体验。于是一种基于http长连接的“服务器推”技术便被hack出来。这种技术被命名为Comet,这个术语由Dojo Toolkit 的项目主管Alex Russell在博文Comet: Low Latency Data for the Browser首次提出,并沿用下来。

其实,服务器推很早就存在了,在经典的client/server模型中有广泛使用,只是浏览器太懒了,并没有对这种技术提供很好的支持。但是Ajax的出现使这种技术在浏览器上实现成为可能, google的gmail和gtalk的整合首先使用了这种技术。随着一些关键问题的解决(比如 IE 的加载显示问题),很快这种技术得到了认可,目前已经有很多成熟的开源Comet框架。

以下是典型的Ajax和Comet数据传输方式的对比,区别简单明了。典型的Ajax通信方式也是http协议的经典使用方式,要想取得数据,必须首先发送请求。在Low Latency要求比较高的web应用中,只能增加服务器请求的频率。Comet则不同,客户端与服务器端保持一个长连接,只有客户端需要的数据更新时,服务器才主动将数据推送给客户端。

Comet的实现主要有两种方式:

  1. 基于Ajax的长轮询(long-polling)方式

  浏览器发出

  2.  基于 Iframe 及 htmlfile 的流(http streaming)方式

  Iframe是html标记,这个标记的src属性会保持对指定服务器的长连接请求,服务器端则可以不停地返回数据,相对于第一种方式,这种方式跟传统的服务器推则更接近。

在第一种方式中,浏览器在收到数据后会直接调用JS回调函数,但是这种方式该如何响应数据呢?可以通过在返回数据中嵌入JS脚本的方式,如“<script type="text/javascript">js_func(“data from server ”)</script>”,服务器端将返回的数据作为回调函数的参数,浏览器在收到数据后就会执行这段JS脚本。

但是这种方式有一个明显的不足之处:IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成,而且 IE 上方的图标会不停的转动,表示加载正在进行。Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法应用到了 gmail+gtalk 产品中。

Websocket---未来的解决方案

         如果说Ajax的出现是互联网发展的必然,那么Comet技术的出现则更多透露出一种无奈,仅仅作为一种hack技术,因为没有更好的解决方案。Comet解决的问题应该由谁来解决才是合理的呢?浏览器,html标准,还是http标准?主角应该是谁呢?本质上讲,这涉及到数据传输方式,http协议应首当其冲,是时候改变一下这个懒惰的协议的请求/响应模式了。

W3C给出了答案,在新一代html标准html5中提供了一种浏览器和服务器间进行全双工通讯的网络技术Websocket。从Websocket草案得知,Websocket是一个全新的、独立的协议,基于TCP协议,与http协议兼容、却不会融入http协议,仅仅作为html5的一部分。于是乎脚本又被赋予了另一种能力:发起websocket请求。这种方式我们应该很熟悉,因为Ajax就是这么做的,所不同的是,Ajax发起的是http请求而已。 

与http协议不同的请求/响应模式不同,Websocket在建立连接之前有一个Handshake(Opening Handshake)过程,在关闭连接前也有一个Handshake(Closing Handshake)过程,建立连接之后,双方即可双向通信。

Opening Handshake

    客户端发起连接Handshake请求

   GET /chat HTTP/1.1

        Host: server.example.com

        Upgrade: websocket

        Connection: Upgrade

        Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

        Origin: http://example.com

        Sec-WebSocket-Protocol: chat, superchat

        Sec-WebSocket-Version: 13

         服务器端响应:

        HTTP/1.1 101 Switching Protocols

        Upgrade: websocket

        Connection: Upgrade

        Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

        Sec-WebSocket-Protocol: chat

“Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求,请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。

“Sec-WebSocket-Key”是一段浏览器base64加密的密钥

“Sec-WebSocket-Accept”服务器端在接收到的Sec-WebSocket-Key密钥后追加一段神奇字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”,并将结果进行sha-1哈希,然后再进行base64加密返回给客户端。

“Sec-WebSocket-Protocol”表示客户端请求提供的可供选择的子协议,及服务器端选中的支持的子协议,“Origin”服务器端用于区分未授权的websocket浏览器

“HTTP/1.1 101 Switching Protocols”中101为服务器返回的状态码,所有非101的状态码都表示handshake并未完成。

 

Data Framing

Websocket协议通过序列化的数据包传输数据。数据封包协议中定义了opcode、payload length、Payload data等字段。具体封包格式如下图所示:

FIN: 标识是否为此消息的最后一个数据包,占 1 bit

RSV1, RSV2, RSV3:  用于扩展协议,一般为0,各占1bit

Opcode:数据包类型(frame type),占4bits

         0x0:标识一个中间数据包

         0x1:标识一个text类型数据包

         0x2:标识一个binary类型数据包

         0x3-7:保留

         0x8:标识一个断开连接类型数据包

         0x9:标识一个ping类型数据包

         0xA:表示一个pong类型数据包

         0xB-F:保留

Payload length:Payload data的长度,占7bits,如果这个值等于126,则此后16bits用于表示Payload length,如果这个值等于127,则此后64bits用于表示Payload length

Payload data:应用层数据

Closing Handshake

相对于Opening Handshake,Closing Handshake则简单得多,主动关闭的一方向另一方发送一个关闭类型的数据包,对方收到此数据包之后,再回复一个相同类型的数据包,关闭完成。

关闭类型数据包遵守封包协议,Opcode为0x8,Payload data可以用于携带关闭原因或消息。 

虽然现阶段websocket协议还处于草案阶段,不过浏览器早就开始开始支持了,以下是不同浏览器兼容列表:

 


Feature


Chrome


Firefox (Gecko)


Internet Explorer


Opera


Safari


Version -76 support Obsolete


6


4.0 (2.0)


Not supported


11.00 (disabled)


5.0.1


Protocol version 7 support Obsolete


Not supported


6.0 (6.0)
Moz


Not supported


Not supported


Not supported


Protocol version 10 support Obsolete


14


7.0 (7.0)
Moz


HTML5 Labs


?


?


Standard - RFC 6455 Support


16


11.0 (11.0)


10


12.10


6.0

从浏览器支持角度来看,websocket还有很长的路要走,特别是在中国这个IE6依然盛行的国家,即便在websocket标准化之后,旧版本浏览器的消亡也需要很长一段时间,因此现阶段comet依然是最好的解决方案。

时间: 2024-08-26 06:56:48

[网页设计]Ajax、Comet与Websocket--转的相关文章

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

移动端网页设计经验与心得

原文:移动端网页设计经验与心得 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能

严谨而浪漫!20个来自德国网页设计

多样化并不足以拿来界定德国设计师的精髓.当你打开德国设计师的网页设计作品的时候,你会感受到更多:完备而充满现代质感的解决方案,拥抱主流文化而富有创意,最重要的是,一丝不苟的设计细节配合着高端的技术加持,使得网站充满力量和美感.此刻你会立刻明白,这就是德国制造. 您可能感兴趣的相关文章 30个立体动感的视差滚动效果网站作品 30个让人兴奋的精美视差滚动效果网站 视差滚动在网页设计中应用的优秀案例 35个立体动感的视差滚动效果网站作品 视差滚动技术在网页中应用的精美案例 Jeep Renegade

8大网页设计新趋势(转载)

网页设计属于设计的一种,而设计中最重要的就是要符合潮流,所以网页设计紧跟潮流是必须的,这样才能使你的网页设计有足够的新鲜度以及吸引眼球的能力.下面笔者总结了8点网页设计技巧的新潮流趋势. 一.使用平面设计 以前我们可能会觉得平面设计和网页设计以及UI设计有很大的区别,会平面设计的人可能未必能做好网页设计,但这样的观念是时候革新了.实际上好的平面设计师会将自己的平面设计功底融合到网页设计当中,如果我们在学网页设计的时候只是参照网站设计,那我们永远无法突破. 不论是用平面设计作为背景也好,或者是用平

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

css+div网页设计(三)--与多种技术的混合应用

本篇博客将介绍css与多种技术的混合应用,javascript可以为我们的页面更加方便的交互,xml使数据存储跟方便,ajax的异步更新可以加快我们网页的载入速度. 1.css与javascript 由于前面已经讲过javascript的基本知识这里就不多加介绍了http://blog.csdn.net/jinfulin/article/details/38406273 给大家举个实战例子,大家去仔细体味一下css与javascript的强大之处. <span style="font-si

网页设计中手风琴效果的20个最佳实践

在这篇文章中,分享一组网页设计中手风琴效果的20个最佳实践.当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTML5 & JavaScript 特效

网页设计经验谈:自以为是的网页设计者

(一)垃圾还是经典 网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已.不管是垃圾还是精品,都没有所谓的经典.经典只存在于是哪个首次成功创新性的应用.网页设计者不管自己的学识.技术和经验如何,都自以为自己吊的不得了,这可能是源与商业设计自我意识体现的强烈主观因素.一个闭门造车者做出的东西,是远远赶不上综合借鉴者的.网页设计不同于其他艺术,在模仿加创新的网页设计领域当中,即便是完全自己设计的,也是沿用了人们已经认同的大部分用户习惯,而且这种沿袭的痕迹时非常的明显!还有那个设计者敢腆着脸说,这

网页设计中11 款最好CSS框架

网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来.此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中. 网页设计员和研发者可用的最好工具之一便是 CSS 框架,它提供高端解决方案来适应高端网页研发需求.CSS 框架减化了编码结构.减少了编码时间,为研