随着 互联网的开展，web前端技术也开展的特别好。用户关于 Web 的实时推送请求也越来越高 ，比方，工业运转监控、Web 在线通讯、即时报价系统、在线游戏等，都需求将后台发作的变化主动地、实时地传送到阅读器端，而不需求用户手动地刷新页面。本文对过去和如今盛行的 Web 实时推送技术停止了比拟与总结。
一、双向通讯
HTTP 协议有一个缺陷：通讯只能由客户端发起。举例来说，我们想理解今天的天气，只能是客户端向效劳器发出恳求，效劳器返回查询结果。HTTP 协议做不到效劳器主意向客户端推送信息。这种单向恳求的特性，必定了假如效劳器有连续的状态变化，客户端要获知就十分费事。在WebSocket协议之前，有三种完成双向通讯的方式：轮询（polling）、长轮询（long-polling）和iframe流（streaming）。
1.轮询（polling）
轮询是客户端和效劳器之间会不断停止衔接，每隔一段时间就讯问一次。其缺陷也很明显：衔接数会很多，一个承受，一个发送。而且每次发送恳求都会有Http的Header，会很耗流量，也会耗费CPU的应用率。
- 优点：完成简单，无需做过多的更改
- 缺陷：轮询的距离过长，会招致用户不能及时接纳到更新的数据；轮询的距离过短，会招致查询恳求过多，增加效劳器端的担负
启动本地服务，打开http://localhost:8080/1.html,得到如下结果：
2.长轮询（long-polling）
长轮询是对轮询的改良版，客户端发送HTTP给效劳器之后，看有没有新音讯，假如没有新音讯，就不断等候。当有新音讯的时分，才会返回给客户端。在某种水平上减小了网络带宽和CPU应用率等问题。由于http数据包的头部数据量常常很大（通常有400多个字节），但是真正被效劳器需求的数据却很少（有时只要10个字节左右），这样的数据包在网络上周期性的传输，难免对网络带宽是一种糜费。
- 优点：比 Polling 做了优化，有较好的时效性
- 缺陷：坚持衔接会耗费资源; 效劳器没有返回有效数据，程序超时。
3.iframe流（streaming）
iframe流方式是在页面中插入一个躲藏的iframe，应用其src属性在效劳器和客户端之间创立一条长衔接，效劳器向iframe传输数据（通常是HTML，内有担任插入信息的javascript），来实时更新页面。
- 优点：音讯可以实时抵达；阅读器兼容好
- 缺陷：效劳器维护一个长衔接会增加开支；IE、chrome、Firefox会显现加载没有完成，图标会不停旋转。
启动本地服务，打开http://localhost:8080/3.html,得到如下结果：
上述代码中，客户端只恳求一次，但是效劳端却是源源不时向客户端发送数据，这样效劳器维护一个长衔接会增加开支。
以上我们引见了三种实时推送技术，但是各自的缺陷很明显，运用起来并不理想，接下来我们着重引见另一种技术--websocket,它是比拟理想的双向通讯技术。
二、WebSocket
1.什么是websocket
WebSocket是一种全新的协议，随着HTML5草案的不时完善，越来越多的现代阅读器开端全面支持WebSocket技术了，它将TCP的Socket（套接字）应用在了webpage上，从而使通讯双方树立起一个坚持在活动状态衔接通道。
一旦Web效劳器与客户端之间树立起WebSocket协议的通讯衔接，之后一切的通讯都依托这个专用协议停止。通讯过程中可相互发送JSON、XML、HTML或图片等恣意格式的数据。由于是树立在HTTP根底上的协议，因而衔接的发起方仍是客户端，而一旦确立WebSocket通讯衔接，不管效劳器还是客户端，恣意一方都可直接向对方发送报文。
初次接触 WebSocket 的人，都会问同样的问题：我们曾经有了 HTTP 协议，为什么还需求另一个协议？
2.HTTP的局限性
- HTTP是半双工协议，也就是说，在同一时辰数据只能单向活动，客户端向效劳器发送恳求(单向的)，然后效劳器响应恳求(单向的)。
- 效劳器不能主动推送数据给阅读器。这就会招致一些高级功用难以完成，诸如聊天室场景就没法完成。
3.WebSocket的特性
- 支持双向通讯，实时性更强
- 能够发送文本，也能够发送二进制数据
- 减少通讯量：只需树立起WebSocket衔接，就希望不断坚持衔接状态。和HTTP相比，不但每次衔接时的总开支减少，而且由于WebSocket的首部信息很小，通讯量也相应减少了
相关于传统的HTTP每次恳求-应对都需求客户端与效劳端树立衔接的形式，WebSocket是相似Socket的TCP长衔接的通讯形式，一旦WebSocket衔接树立后，后续数据都以帧序列的方式传输。在客户端断开WebSocket衔接或Server端断掉衔接前，不需求客户端和效劳端重新发起衔接恳求。在海量并发和客户端与效劳器交互负载流量大的状况下，极大的俭省了网络带宽资源的耗费，有明显的性能优势，且客户端发送和承受音讯是在同一个耐久衔接上发起，实时性优势明显。
接下来我看下websocket如何完成客户端与效劳端双向通讯：
启动本地服务，打开http://localhost:3000/websocket.html,得到如下结果：
三、Web 实时推送技术的比较
综上所述：Websocket协议不只处理了HTTP协议中效劳端的被动性，即通讯只能由客户端发起，也处理了数据同步有延迟的问题，同时还带来了明显的性能优势，所以websocket 是Web 实时推送技术的比拟理想的计划，但假如要兼容低版本阅读器，能够思索用轮询来完成。
閱讀更多 指尖上的代碼 的文章
