最近在考虑把项目中的通知模块单独提取出来,做一些即时提醒,快速响应。由于访问量大了之后,Ajax轮询的方式发送的请求数太过庞大,所以考虑使用WebSocket来缓解压力,当然了,WebSocket可以做的事情可不止这些,今天首先来在各个技术之间做个对比,看看它牛掰的地方,有个大体的认识

比如这样的需求:

使用WEB,来构建实时的展示页面来展示股票信息、火车票余票、医疗设备读取的信息,或是即时聊天等等

其实这些都是属于即时交互的需求,而WebSocket就是为了即时交互而设计的!

什么Polling、Long-Polling、FlashSocket。。。。在WebSocket真正到来之后都将成为过眼云烟~(此处是夸张的修辞手法~)

好,下面准备开始~~

WEB开发人员看到这个图总是会感觉很亲切,接下来我们就看看在这种请求响应模型中如何做到即时交互

Constantly Refresh

简述

HTTP协议原本是设计用于传输简单的文档和文件,而非实时的交互。根据HTTP协议,一个客户端如浏览器,向服务器打开一个连接,发出请求,等待回应,之后关闭连接。如果客户端需要更多数据,则需要打开一个新连接,以此循环往复。如果服务器有了新的信息,它必须等待客户端发出请求而不是立即发送消息。

举个例子:我(客户端)要从你(服务器)那运货,先修条路,然后派个使者去通知你要什么货,然后你把货给我送过来,最后把修好的路作废,再想运送别的货物,对不起,请重新修路那么要看到页面中要展示信息的最新情况,应该怎么办?不断刷新!是的,以前就是这么做的

评价

这种方式现在已经被完全淘汰,发送了很多不必要的请求,浪费大量带宽,页面不断刷新,用户体验差,而且做不到真正的实时,服务端有了新数据也不能立马推送给客户端,使得秒级的实时信息交互难以实现

Polling

简介

这可以算是第一种风格的comet

每隔一固定时间发送一个Ajax请求拉取数据,根据服务端返回的数据通过DOM操作做一些展现

评价

比不断刷新好一些,浏览器不用一闪一闪的重新加载了,而且只传送感兴趣的那一小部分数据,占用带宽变小。但是,客户端并不知道服务端什么时候准备好了自己感兴趣的数据,无法很好的设置轮询时间,只能根据经验设置一个固定的时间,这样就会发送很多不必要的请求

Long-Polling

简介

这可以算作第二种风格的comet

客户端发送一个request给服务端,服务端会在一个设定的时间段内保持这个request为打开状态,如果在这段时间内, 服务端程序收到一个notification,就会把携带了最新消息的response回送给客户端,如果在这个设定的时间内一直没有收到新消息,没有收到notification,服务端程序在时间到的时候同样会发送一个response给客户端

评价

长轮询相对于一般轮询的优点在于,数据一旦可用,便立即从服务器发送到客户机。请求可能等待较长的时间,期间没有任何数据返回,但是一旦有了新的数据,它将立即被发送到客户机。因此没有延时这种情况在服务端消息比较少的情况下表现还不错,但是服务端有大量消息要推送的时候,Long-Polling与Polling相比,实际并没有什么本质的提高,它还是需要等待客户端的请求,然后才能发消息,而不是自动推送!

Streaming

简介

这是第三种风格的comet按照这种风格,服务器将数据推回客户机,但是不关闭连接。连接将一直保持开启,直到过期,并导致重新发出请求。XMLHttpRequest 规范表明,可以检查 readyState 的值是否为 3 或 Receiving(而不是 4 或 Loaded),并获取正从服务器 “流出” 的数据

评价

和长轮询一样,这种方式也没有延时。当服务器上的数据就绪时,该数据被发送到客户机。这种方式的另一个优点是可以大大减少发送到服务器的请求,从而避免了与设置服务器连接相关的开销和延时。但是,Streaming也是在HTTP的基础上做了包装,介入的防火墙和代理服务器会对response做缓存,增加了消息传输的延迟。所以,当遇到代理服务器做了缓存的情况,很多流式解决方案就会回退到Long-Polling方式。当然,TLS(SSL)连接可以用来逃避response被缓存,但是建立和销毁每个连接的代价实在太高了。另外不幸的是,XMLHttpRequest 在不同的浏览器中有很多不同的实现。这项技术只能在较新版本的 Mozilla Firefox 中可靠地使用。对于Internet Explorer 或 Safari,仍需使用长轮询

小结

上面提到的所有的实时交互方式都会用到HTTP的请求头和响应头,它们包含有很多不必要的额外的信息以至于增加了延迟。

其实全双工通信方式不仅是从服务端到客户端的下行数据流就可以解决的。在这半双工的HTTP基础上来模仿全双工通信,现在的一些解决方案是使用了两个连接:一个是下行数据流,一个是上行数据流。但是要维持这两个连接并且使之协同工作,不但非常复杂,而且需要消耗大量资源。简单说来,HTTP就不是为了实时和全双工通信而设计的。

下图展示了创建一个WEB应用的复杂性,它是在HTTP之上,使用发布/订阅模型,从后端往前端传输实时数据

FlashSocket

简介

Socket 套接字连接允许Flash播放器通过指定的端口与服务器通信,socket连接与其他通信技术最大的不同是socket连接在数据传输完成后不会自动关闭。这个特点决定了它可以作为即时通信

评价

FlashSocket透明地提供了WebSocket的功能,即使是在不支持HTML5 WebSocket的浏览器上也是如此

FlashSocket有着下面的这些缺点:

1). 其需要安装Flash插件(通常情况下,所有浏览器都会有该插件)。但是某些客户端,比如iPhone/iPad,不支持flash

2). 其要求防火墙的843端口是打开的,这样Flash组件才能发出HTTP请求来检索包含了域授权的策略文件。如果843端口是不可到达的话,则库应该有回退动作或是给出一个错误,所有的这些处理都需要一些时间(最多3秒,这取决于库),而这会降低网站的速度。

3). 如果客户端处在某个代理服务器的后面的话,到端口843的连接可能会被拒绝

WebSocket

简介

这是WEB通信方式的革新,基于浏览器原生socket,实现了全双工通信,使WEB上的真正的实时通信成为可能。WebSocket标准正由W3C制定,目前正处于草稿阶段,但是相信在不久的将来,它将会改变WEB实时通信方式

评价

与Ajax相比,Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。个人认为,WebSocket的缺点主要是目前客户端浏览器的支持还不够好,服务端也没有个统一标准,版本比较混乱。不过这都是处于草案期的标准必经的。相信在不久的将来情况会有改善

今天先到这里,下次给出一个demo,揭开WebSocket的神秘面纱

本文首发于【百度运维空间】http://hi.baidu.com/ops_bd/blog/item/633b1c3eeb10d0ec3b87ce44.html

【关注百度技术沙龙】

转载于:https://blog.51cto.com/baidutech/826759

WEB交互的划时代革新--HTML5中WebSocket应用【1】相关推荐

  1. 拾人牙慧篇之——基于HTML5中websocket来实现消息推送功能

    一.写在前面 要求做一个,后台发布信息,前台能即时得到通知的消息推送功能.网上搜了也有很多方式,ajax的定时询问,Comet方式,Server-Sent方式,以及websocket.表示除了定时询问 ...

  2. 弥补Web开发缺陷实战 HTML5 中存储API

    COOKIES的限制和缺陷 首先,让我们来回顾下 cookies.Cookies 的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷.Cookies 的优点在于,它可以允许我们在登陆网站时, ...

  3. 弥补Web开发缺陷 实战HTML 5中存储API

    COOKIES的限制和缺陷 首先,让我们来回顾下cookies.Cookies的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷.Cookies的优点在于,它可以允许我们在登陆网站时,记住我 ...

  4. HTML5中的websocket图片直播

    HTML5中的websocket实现直播 1. videojs-contrib-hls 直播功能         github:https://github.com/videojs/videojs-c ...

  5. js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...

    好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局 左边20% 中间自适应 右边200px 不能用定位 答案:圣杯布局/双飞翼布局或者 ...

  6. html5中的css特性,浅谈HTML5 CSS3的新交互特性

    本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...

  7. html直播源码,HTML5中的websocket实现直播功能

    做视频直播这一块,前期研究了很多方案,包括websocket,因为各种原因最后没有采取这个方案,但还是想记录一下学习的心得. WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双 ...

  8. HTML5中Web Worker技术的使用实例

    web worker是html5中新特性中非常吸引人的技术亮点之一,我们可以把它理解为javascript中的多线程技术,我们知道javascript语言的执行环境是单线程的,浏览器执行某段程序的时候 ...

  9. 在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示

    在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示 接触前端时间不长,费了一些时间 img{display:block;max-width:100%;margin:auto ...

最新文章

  1. 欲从事服务端工作不懂seata?一篇小demo零基础带你快速掌握分布式事务框架seata的基本使用!
  2. es6 includes(), startsWith(), endsWith()
  3. android+录像中截图软件下载,录屏截图大师app
  4. SWT多线程注意事项
  5. 终端母体服务器是心识,自我意识的觉醒与重返母体的归属.doc
  6. vue-router传参的坑(query和params)
  7. 常量表达式不允许函数调用_SQLite特殊索引之表达式索引
  8. SqlServer中截取(获取)字符串中特定字符分割的每个元素
  9. [下载]Windows 10测试版的新版雅黑字体及切换工具
  10. 试凑法整定PID参数
  11. w8系统服务器垃圾清理,win8系统盘太大怎么办?来给TA瘦身吧! | SDT技术网
  12. [读史思考]为何此大神可以同时进入文庙和武庙?
  13. 二项分布 (Binomial Distribution)
  14. 窗体泄漏错误has leaked window android.widget
  15. JPK Data Processing AFM数据处理
  16. 上位机软件开发项目案例(一)_C#开发
  17. Linux操作系统(笔记)
  18. 有苦有乐的算法 --- 获取二叉树的最大宽度
  19. 劝大家别去国企制造业干IT,软件多数据乱,报表开发完全没法做
  20. 软件测试新手误区-追求最新版本的测试工具

热门文章

  1. 使用javah生成.h文件, 出现无法访问android.app,Activity的错误的解决
  2. JAVA 向文本文件中换行插入字符
  3. erlang 程序设计书中的错误
  4. VUE自学日志02-应用与组件实例
  5. SSM项目使用Idea打war包
  6. JavaScript——面向对象之继承(原型对象)与多态(重载、重写)
  7. Linux中变量 #, @, 0, 1, 2, *,$$,$?的含义
  8. html5中矩形条怎么写,html5中往矩形中贴图片
  9. import qs from qs 安装_Python 导包难道你只会个 import 吗?
  10. java long常量池_Java提高篇之常量池