实现Web端即时通讯的方法：轮询(短轮询)、长轮询(comet)、长连接(SSE)、WebSocket

Web端即时通讯技术

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

实现Web端即时通讯的方法

轮询(短轮询)、长轮询(comet)、长连接(SSE)、WebSocket。

分类

它们大体可以分为两类，一种是在HTTP基础上实现的，包括短轮询、comet和SSE；

另一种不是在HTTP基础上实现是，即WebSocket。

一、轮询(短轮询)

　　短轮询的基本思路就是浏览器每隔一段时间向服务器发送http请求，服务器端在收到请求后，不论是否有数据更新，都直接进行响应。在服务端响应完成，就会关闭这个Tcp连接，这种方式实现的即时通信，本质上还是浏览器发送请求，服务器接受请求的一个过程，通过让客户端不断的进行请求，使得客户端能够模拟实时地收到服务器端的数据的变化。

　　这种方式的优点是比较简单，易于理解，实现起来也没有什么技术难点，它的兼容性也比较好的只要支持http协议就可以用这种方式实现。缺点是显而易见的，这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。（因为建立Tcp连接是非常消耗资源的，服务端响应完成就会关闭这个Tcp连接，下一次请求再次建立Tcp连接。）尤其是在客户端，距离来说，如果有数量级想对比较大的人同时位于基于短轮询的应用中，那么每一个用户的客户端都会疯狂的向服务器端发送http请求，而且不会间断。人数越多，服务器端压力越大，这是很不合理的。

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

　　并且浏览器定时向服务器发送请求，获取最新数据，由于定时发送请求，两次请求之间的数据更新并不能及时响应，可能会有实时数据更新不及时的情况。

JS 实现

// 请求数据方法
const request = () => {}
// 每隔5秒发送一次请求
setInterval(request(), 5000)

二、长轮询（comet）

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

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

　　客户端发送请求后服务器端不会立即返回数据，服务器端会阻塞请求连接不会立即断开，直到服务器端有数据更新或者是连接超时才返回，客户端才再次发出请求新建连接、如此反复从而获取最新数据。大致效果如下：

js实现

// 请求数据方法
const request = () => {}
// 当数据请求返回结果后发起下一次请求
request().then(res => {
  request();
})

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

短轮询和长轮询的区别 　

长、短轮询是指客户端请求服务端时，服务端给予应答的方式。

短轮询

• 短轮询是服务器收到请求不管是否有数据都直接响应请求

• 受到响应隔一段时间在发送同样的请求查询是否有数据;

缺点:

• 实时性低

长轮询

• 长轮询是服务器收到请求后如果有数据, 立刻响应请求;

• 如果没有数据就会 hold 一段时间,这段时间内如果有数据立刻响应请求;

• 如果时间到了还没有数据, 则响应 http 请求;浏览器受到 http 响应后立在发送一个同样http 请求查询是否有数据;

缺点:

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

• 服务器端没有数据 hold 住连接时会造成浪费, 容易产生服务器瓶颈;

三、长连接（SSE）

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

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

四、WebSocket

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

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

四种Web即时通信技术比较

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

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