轮询、长轮询、长连接、websocket

亦凉 2023-01-02 14:22 325阅读 0赞

Web端即时通讯技术：即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时地将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。但是在Web中，由于浏览器的限制，实现即时通讯需要借助一些方法。这种限制出现的主要原因是，一般的Web通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的现实更新。

实现Web端即时通讯的方法：实现即时通讯主要有四种方式，它们分别是轮询、长轮询(comet)、长连接(SSE)、WebSocket。它们大体可以分为两类，一种是在HTTP基础上实现的，包括短轮询、comet和SSE；另一种不是在HTTP基础上实现是，即WebSocket。下面分别介绍一下这四种轮询方式，以及它们各自的优缺点。

# 1、轮询 #

这种方式的优点是比较简单，易于理解，实现起来也没有什么技术难点。缺点是显而易见的，这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。尤其是在客户端，距离来说，如果有数量级想对比较大的人同时位于基于短轮询的应用中，那么每一个用户的客户端都会疯狂的向服务器端发送http请求，而且不会间断。人数越多，服务器端压力越大，这是很不合理的。

因此短轮询不适用于那些同时在线用户数量比较大，并且很注重性能的Web应用。

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

# 2、长轮询（comet） #

ajax实现:

当服务器收到客户端发来的请求后,服务器端不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新。如果有更新，则进行响应，如果一直没有数据，则到达一定的时间限制(服务器端设置)才返回。 。 客户端JavaScript响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。

长轮询和短轮询比起来，明显减少了很多不必要的http请求次数，相比之下节约了资源。长轮询的缺点在于，连接挂起也会导致资源的浪费。

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

轮询与长轮询都是基于HTTP的，两者本身存在着缺陷:轮询需要更快的处理速度；长轮询则更要求处理并发的能力;两者都是“被动型服务器”的体现:服务器不会主动推送信息，而是在客户端发送ajax请求后进行返回的响应。而理想的模型是"在服务器端数据有了变化后，可以主动推送给客户端",这种"主动型"服务器是解决这类问题的很好的方案。Web Sockets就是这样的方案。

# 3、长连接（SSE） #

SSE是HTML5新增的功能，全称为Server-Sent Events。它可以允许服务推送数据到客户端。SSE在本质上就与之前的长轮询、短轮询不同，虽然都是基于http协议的，但是轮询需要客户端先发送请求。而SSE最大的特点就是不需要客户端发送请求，可以实现只要服务器端数据有更新，就可以马上发送到客户端。

SSE的优势很明显，它不需要建立或保持大量的客户端发往服务器端的请求，节约了很多资源，提升应用性能。并且后面会介绍道，SSE的实现非常简单，并且不需要依赖其他插件。

# 4、WebSocket #

WebSocket是Html5定义的一个新协议，与传统的http协议不同，该协议可以实现服务器与客户端之间全双工通信。简单来说，首先需要在客户端和服务器端建立起一个连接，这部分需要http。连接一旦建立，客户端和服务器端就处于平等的地位，可以相互发送数据，不存在请求和响应的区别。

WebSocket的优点是实现了双向通信，缺点是服务器端的逻辑非常复杂。现在针对不同的后台语言有不同的插件可以使用。

# 5、四种Web即时通信技术比较 #

## 5.1 性能、兼容性对比 ##

从兼容性角度考虑，短轮询>长轮询>长连接SSE>WebSocket；

从性能方面考虑，WebSocket>长连接SSE>长轮询>短轮询。

## 5.2 实现对比 ##

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:137px;">&nbsp;</td> 
 <td style="vertical-align:middle;width:214px;">短轮询</td> 
 <td style="vertical-align:middle;width:146px;">长轮询</td> 
 <td style="vertical-align:middle;width:138px;">Websocket</td> 
 <td style="vertical-align:middle;width:217px;">sse</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:137px;">通讯方式</td> 
 <td style="vertical-align:middle;width:214px;">http</td> 
 <td style="vertical-align:middle;width:146px;">http</td> 
 <td style="vertical-align:middle;width:138px;">基于TCP长连接通讯</td> 
 <td style="vertical-align:middle;width:217px;">http</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:137px;">触发方式</td> 
 <td style="vertical-align:middle;width:214px;">轮询</td> 
 <td style="vertical-align:middle;width:146px;">轮询 &nbsp;</td> 
 <td style="vertical-align:middle;width:138px;">事件</td> 
 <td style="vertical-align:middle;width:217px;">事件</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:137px;">优点</td> 
 <td style="vertical-align:middle;width:214px;">兼容性好容错性强，实现简单</td> 
 <td style="vertical-align:top;width:146px;">&nbsp;</td> 
 <td style="vertical-align:middle;width:138px;">全双工通讯协议，性能开销小、安全性高，有一定可扩展性</td> 
 <td style="vertical-align:middle;width:217px;">实现简便，开发成本低</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:137px;">缺点</td> 
 <td style="vertical-align:middle;width:214px;">安全性差，占较多的内存资源与请求数</td> 
 <td style="vertical-align:middle;width:146px;">安全性差，占较多的内存资源与请求数</td> 
 <td style="vertical-align:middle;width:138px;">传输数据需要进行二次解析，增加开发成本及难度</td> 
 <td style="vertical-align:middle;width:217px;">只适用高级浏览器</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:137px;">适用范围</td> 
 <td style="vertical-align:middle;width:214px;">b/s服务</td> 
 <td style="vertical-align:middle;width:146px;">b/s服务</td> 
 <td style="vertical-align:middle;width:138px;">网络游戏、银行交互和支付</td> 
 <td style="vertical-align:middle;width:217px;">服务端到客户端单向推送</td> 
 </tr> 
 </tbody> 
</table>

短轮询、长轮询、sse实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpeGluZ3poZTI_size_16_color_FFFFFF_t_70][]

# 6、websocket demo #

[https://gitee.com/xixingzhe2/websocket-demo.git][https_gitee.com_xixingzhe2_websocket-demo.git]

参考文章：

[https://www.cnblogs.com/huchong/p/8595644.html][https_www.cnblogs.com_huchong_p_8595644.html]

[http://www.mydlq.club/article/86/][http_www.mydlq.club_article_86]

[https://juejin.cn/post/6844903503505293320][https_juejin.cn_post_6844903503505293320]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpeGluZ3poZTI_size_16_color_FFFFFF_t_70]: /images/20221119/7d2ee1c07ba241728ce67734354adb0c.png
[https_gitee.com_xixingzhe2_websocket-demo.git]: https://gitee.com/xixingzhe2/websocket-demo.git
[https_www.cnblogs.com_huchong_p_8595644.html]: https://www.cnblogs.com/huchong/p/8595644.html
[http_www.mydlq.club_article_86]: http://www.mydlq.club/article/86/
[https_juejin.cn_post_6844903503505293320]: https://juejin.cn/post/6844903503505293320