前端长连接有很多使用场景，例如在进行大数据列表异步请求时，中间层和客户端建立长连接，将先期到达的数据发送并显示到客户端，然后持续到任务完成，这样能获取更好的用户体验。

另外就是一些web im之类的场景也常常使用到长连接

本文介绍长连接的一些基本实现和优缺点，以供大家参考学习！

定义

长连接可以指 HTTP 持久连接 (persistent connection)，也可以指基于 TCP / UDP / QUIC / WebSocket 等一个或多个协议建立后可以持续收发消息的数据通路。

实现方式一、 短轮询1.1 定义

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

其实就是普通的轮询。指在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。

1.2 应用场景

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

1.3 优点

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

1.4 缺点请求中有大半是无用，难于维护，浪费带宽和服务器资源；响应的结果没有顺序（因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果，那么当前面的请求返回结果数据时已经是过时无效的数据了）。1.5 实例：适于小型应用。1.6 前端实现：

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

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

2.2 优点

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

2.3 缺点服务器hold连接会消耗资源返回数据顺序无保证，难于管理维护。浏览器端对统一服务器同时 http 连接有最大限制, 最好同一用户只存在一个长轮询;2.4 实例：WebQQ、Hi网页版、Facebook IM。2.5 前端实现：

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

相同点：

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

不同点

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

目前 http 协议普遍使用的是 1.1 版本, 之前有个 1.0 版本,两者之间的一个区别是 1.1 支持 http 长连接, 或者叫持久连接。

1.0 不支持 http 长连接, 每次一个 http请求响应后都关闭 tcp 连接, 下个 http 请求会重新建立 tcp 连接.

3.1定义

多个 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请求重用

3.2优点

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

3.3 缺点

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

3.4前端实现

msdn中关于使用服务器发送事件的文档：

阮一峰关于SSE的介绍：

代码示例

服务端：

'use strict';const http = require('http');http.createServer((req, res) => {  // 服务器声明接下来发送的是事件流  res.writeHead(200, {    'Content-Type': 'text/event-stream',    'Cache-Control': 'no-cache',    'Connection': 'keep-alive',    'Access-Control-Allow-Origin': '*',  });  // 发送消息  setInterval(() => {    res.write('event: slide\n'); // 事件类型    res.write(`id: ${+new Date()}\n`); // 消息 ID    res.write('data: 7\n'); // 消息数据    res.write('retry: 10000\n'); // 重连时间    res.write('\n\n'); // 消息结束  }, 3000);  // 发送注释保持长连接  setInterval(() => {    res.write(': \n\n');  }, 12000);}).listen(2000);

客户端：

'use strict';if (window.EventSource) {  // 创建 EventSource 对象连接服务器  const source = new EventSource(';);  // 连接成功后会触发 open 事件  source.addEventListener('open', () => {    console.log('Connected');  }, false);  // 服务器发送信息到客户端时，如果没有 event 字段，默认会触发 message 事件  source.addEventListener('message', e => {    console.log(`data: ${e.data}`);  }, false);  // 自定义 EventHandler，在收到 event 字段为 slide 的消息时触发  source.addEventListener('slide', e => {    console.log(`data: ${e.data}`); // => data: 7  }, false);  // 连接异常时会触发 error 事件并自动重连  source.addEventListener('error', e => {    if (e.target.readyState === EventSource.CLOSED) {      console.log('Disconnected');    } else if (e.target.readyState === EventSource.CONNECTING) {      console.log('Connecting...');    }  }, false);} else {  console.error('Your browser doesn\'t support SSE');}

四、 Web Socket4.1定义

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

4.2优点

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

4.3缺点：主流浏览器支持的Web Socket版本不一致；服务端没有标准的API。4.4实例：实现即时通讯:如股票交易行情分析、聊天室、在线游戏等，替代轮询和长轮询4.5 解决：解决了http协议的两个问题。1.服务端的被动性。http协议是只有客户端询问之后才回复。解决了同步有延迟的问题2.解决了服务器上消耗资源的问题4.6 实现：

//需要先npm install ws //服务器端var Server = require('ws').Server;var wss = new Server({    port:2000});wss.on('connection',function(ws){    ws.on('message',function(data){        ws.send('你好,客户端,我是服务器!');        console.log(data);    })}); //node客户端 var WebSocket = require('ws');var socket = new WebSocket('ws://localhost:2000/');socket.on('open',function(){    socket.send('你好，服务器,我是客户端');});socket.on('message',function(event){    console.log(event);}) //html客户端(注:浏览器客户端与node客户端只需要一种) <script>    var socket = new WebSocket('ws://localhost:2000/');    socket.onopen = function(){     };    socket.onmessage = function(event){        console.log(event.data)    }</script>