web通讯的四种方式

web通讯的四种方式


一 短轮询

定义

http端轮询是服务器收到请求不管是否有数据都直接响应 http 请求;其实就是普通的轮询。指在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器。

应用场景

传统的web通信模式。后台处理数据,需要一定时间,前端想要知道后端的处理结果,就要不定时的向后端发出请求以获得最新情况。

优点

前后端程序编写比较容易。

缺点

请求中有大半是无用,难于维护,浪费带宽和服务器资源;响应的结果没有顺序(因为是异步请求,当发送的请求没有返回结果的时候,后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果,那么当前面的请求返回结果数据时已经是过时无效的数据了)。

实现

var xhr = new XMLHttpRequest(); setInterval(function(){ xhr.open('GET','/user'); xhr.onreadystatechange = function(){ }; xhr.send(); },1000)


二 长轮询

定义

客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

优点

在无消息的情况下不会频繁的请求,耗费资源小。

缺点

  • 服务器hold连接会消耗资源

  • 返回数据顺序无保证,难于管理维护。

  • 浏览器端对统一服务器同时 http 连接有最大限制, 最好同一用户只存在一个长轮询;

实现

 function ajax(){        var xhr = new XMLHttpRequest();        xhr.open('GET','/user');        xhr.onreadystatechange = function(){              ajax();        };        xhr.send();    }``

长轮询与短轮询之间的关系

相同点:

  • 可以看出 http 长轮询和 http 短轮询的都会 hold 一段时间;

不同点:

  • 间隔发生在服务端还是浏览器端: http 长轮询在服务端会 hold 一段时间, http 短轮询在浏览器端 “hold”一段时间;


三 http 长连接

定义

多个 http 请求共用一个 tcp 连接; 这样可以减少多次临近 http 请求导致 tcp建立关闭所产生的时间消耗,http 1.1 中在请求头和相应头中用 connection字段标识是否是 http长连接, connection: keep-alive, 表明是 http 长连接; connection:closed, 表明服务器关闭 tcp 连接,与 connection 对应的一个字段是 keep-live, http 响应头中出现, 他的格式是 timeout=30,max=5, timeout 是两次 http 请求保持的时间(s), max 是这个 tcp 连接最多为几个 http请求重用。

优点

消息即时到达,不发无用请求;管理起来也相对方便。

缺点

服务器维护一个长连接会增加开销。

四 Web Socket

定义

Websocket是基于HTTP协议的,在和服务端建立了链接后,服务端有数据有了变化后会主动推送给前端。

优点

请求响应快,不浪费资源。(传统的http请求,其并发能力都是依赖同时发起多个TCP连接访问服务器实现的(因此并发数受限于浏览器允许的并发连接数),而websocket则允许我们在一条websocket连接上同时并发多个请求,即在A请求发出后A响应还未到达,就可以继续发出B请求。由于TCP的慢启动特性(新连接速度上来是需要时间的),以及连接本身的握手损耗,都使得websocket协议的这一特性有很大的效率提升;http协议的头部太大,且每个请求携带的几百上千字节的头部大部分是重复的,websocket则因为复用长连接而没有这一问题。)

缺点

  • 主流浏览器支持的Web Socket版本不一致;

  • 服务端没有标准的API。

LICENSED UNDER CC BY-NC-SA 4.0