短轮询和长轮询

场景

使用到这些主要是在常用的http协议下，前端需要实时从服务器同步最新的数据，例如：实时票房、推送消息等功能。阅读需要先了解http协议相关内容。可以先阅读【从输入网址回车到显示都发生了什么】

短轮询

短轮询主要是针对前端，原理很简单，即前端定时重复向服务器发送一次请求，服务器收到后马上处理并返回数据。好处是简单，不需要后端的参与，只是单纯前端的 setInterval()；缺点是每请求一次都要经历一次http连接的建立到传输到销毁的全过程，当使用系统的用户量大了之后会导致服务器压力增大。

短轮询更适合用户量小的系统，如果要注重性能则该方法不可取。

长轮询

长轮询主要是针对服务器，原理是服务器接收到一个http请求后不要马上处理，而是挂起并监测这个请求需要的数据是否更新了，前端这时候的状态是 pending，在指定的时间后有两种可能：

在一段时候后服务器发现请求需要的数据更新了，则马上把这个数据处理然后返回这个请求到前端。
服务器发现请求需要的数据一直不变，则在到达配置的时间后处理这个数据并返回这个请求到前端。

最终在前端收到返回并进行处理后，马上继续发起一个新的请求。

长连接（SSE）

平时我们发送的http请求其实都是短连接，经过双方握手->传输->关闭。长连接则是在返回头中加入 Connection:keep-alive，浏览器收到之后就不会关闭这次连接，后续请求沿用这个已经建立的连接，服务器也可以主动推动信息到前端了，这个长连接不是永久的一般有一个规定时间后会关闭。长连接同样基于http协议

WebSocket

短轮询和长轮询都有局限性就是每次请求都需要携带出主体数据外的额外信息如认证信息、头部信息，而且服务器也无法主动推送信息，本质上还是单向请求的概念。

WebSocket不同于http协议，是双向的，在客户端-服务器通信的场景中使用的全双工协议。允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。它以ws://或wss://开头。它是一个有状态协议，客户端和服务器之间的连接将保持活动状态，直到被任何一方（客户端或服务器）终止。在通过客户端和服务器中的任何一方关闭连接之后，连接将从两端终止。

// 创建一个WebSocket连接
var ws = new WebSocket("ws://localhost:8080/msg");

// 打开连接并发送消息
ws.onopen = function(evt) {
    console.log("连接打开");
    ws.send("Hello WebSockets!");
};

// 接收消息并关闭
ws.onmessage = function(evt) {
    console.log("接收消息: " + evt.data);
    ws.close();
};

// 关闭事件
ws.onclose = function(evt) {
    console.log("连接关闭");
};