web服务器 消息推送技术,Web 实时推送技术如何弥补 HTTP 协议的缺陷?| 技术头条...

71e1b48eaa8b2191427d27f14274e263.png

作者 | 浪里行舟

责编 | 郭芮

随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控、Web 在线通讯、即时报价系统、在线游戏等,都需要将后台发生的变化主动地、实时地传送到浏览器端,而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。

纸上得来终觉浅,建议大家动手敲敲代码——本文完整的源代码请猛戳Github博客(https://github.com/ljianshu/Blog)。

双向通信

HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果,HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。

在WebSocket协议之前,有三种实现双向通信的方式:轮询(polling)、长轮询(long-polling)和iframe流(streaming)。

1.轮询(polling)

5e4b44c07226e1fd3fe012e5e097a535.png

轮询是客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。其缺点也很明显:连接数会很多,一个接受,一个发送。而且每次发送请求都会有Http的Header,会很耗流量,也会消耗CPU的利用率。

优点:实现简单,无需做过多的更改;缺点:轮询的间隔过长,会导致用户不能及时接收到更新的数据;轮询的间隔过短,会导致查询请求过多,增加服务器端的负担。// 1.html

let clockDiv = document.getElementById('clock'); setInterval(function(){let xhr = new XMLHttpRequest; xhr.open('GET','/clock',true); xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText); clockDiv.innerHTML = xhr.responseText; } } xhr.send(); },1000);