http长短连接和长短轮询、webSocket

本文主要介绍长连接、短连接、长轮询、短轮询 和 webSocket。
长连接、短连接、长轮询、短轮询是基于http的，是由客户端主动发起通信请求；
webSocket是H5新增的基于单个 TCP 连接的通信方式，主要实现一次握手持久性连接，并能进行双向数据传递的通信方式。

一、长短连接

http的长连接和短连接（史上最通俗！）
HTTP协议是基于请求/响应模式的，因此只要服务端给了响应，本次HTTP连接就结束了，或者更准确的说，是本次HTTP请求就结束了，根本没有长连接这一说，那么自然也就没有短连接这一说了；网上所说的长连接、短连接，本质其实说的是TCP连接。TCP连接是一个双向通道，它是可以保持一段时间不关闭，因此TCP才有正真的长连接、短连接。

1.1 短连接

概念：客户端发送请求，服务器接收请求，双方建立连接，服务器响应资源，请求结束。

特性：

  • HTTP1.0协议中使用的是短连接；
  • 客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接；当请求网页中的css、js等静态文件时，如果使用短连接，每次都需要重新建立TCP连接，很浪费资源；

缺点：

  • 浪费资源
1.2 长连接

概念：客户端发出请求，服务端接收请求，双方建立连接，在服务端没有返回之前保持连接，当客户端再发送请求时，它会使用同一个连接。这一直继续到客户端或服务器端认为会话已经结束，其中一方中断连接。

特性：

  • 从HTTP1.1协议以后，连接默认都是长连接；现如今的HTTP协议，大部分都是1.1的，因此我们平时用的基本上都是长连接；
  • 长连接实际指TCP长连接；
  • 长连接是为了复用TCP连接，多个HTTP请求可以复用同一个TCP连接，这就节省了很多TCP连接建立和断开的消耗（节约时间、节省流量）；
  • 客户端和服务器都需要设置Connection: keep-alive；
图1-1 keep-alive

优点：

  • 减少了连接请求；
  • 降低TCP阻塞；
  • 减少了延迟；
  • 实时性较好；

缺点：

  • 影响性能，因为它在文件被请求之后还保持了不必要的连接很长时间；
1.3 长连接SSE

SSE(Server Sent Events) HTTP服务端推送详解
Html5服务器发送事件(sse)在nodejs中的应用
SSE（Sever-Sent Event）服务器发送事件，是HTML5新增的特性，主要用于服务器向客户端发送数据即单双工通信。

单双工通信：数据只能单向传递；
半双工通信：数据能双向传递，但是不能同时双向传递；
全双工通信：数据能够同时双向传递；

所谓的SSE，就是浏览器向服务器发送了一个HTTP请求，保持长连接，服务器不断单向地向浏览器推送“信息”，这么做是为了节省网络资源，不用一直发请求，建立新连接。
支持默认3种事件，连接一旦建立就会触发open事件，客户端收到服务器发来的数据，就会触发message事件，如果发生通讯错误（如断开连接）就会触发error事件。

优点：

  • SSE和WebSocket相比，最大的优势是便利，服务端不需要第三方组件，开发难度低；
  • SSE和轮询相比不需要建立或保持大量客户端发往服务器端的请求，节约了很多资源，提升应用性能。

缺点：

  • 如果客户端有很多需要保持很多长连接，会占用大量内存和连接数；
  • 受同源策略的影响，不能跨域；
  • 有兼容问题，IE上不支持。

实现：
前端：

/**
  * SSE受同源策略的影响，不能跨域，此代码在vue中是可以实现的。/apis是代理地址 、 /sse是接口地址
  * 支持默认3种事件，连接一旦建立就会触发open事件，客户端收到服务器发来的数据，就会触发message事件，如果发生通讯错误（如断开连接）就会触发error事件。
*/
// 判断是否支持EventSource
if (typeof EventSource !== 'undefined') {
  // 为http://localhost:8080/apis/sse
  var source = new EventSource('/apis/sse');

  // 接受服务器发来的数据
  source.addEventListener('message', function (e) {
    console.log(e);
  });

  source.addEventListener('open', function (e) {
    console.log('连接sse');
  });

  source.addEventListener('error', function (e) {
    console.log('连接报错了');
  });
}

nodejs：

const http = require('http');
const SSE = require('sse');

var sseClients = [];
 
var server = http.createServer(function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('okay');
});
server.listen(8080, '127.0.0.1', function() {
  var sse = new SSE(server, { path: '/sse', verifyRequest: (req) => {
    return true;
  }});
  sse.on('connection', function(client) {
    client.on('close', function() {
      let index = sseClients.indexOf(client);
      if (index > -1) {
        sseClients.splice(index, 1);
      }
    });
    sseClients.push(client);
    client.send('Hello world');
    client.count = 1;
    setInterval(() => {
      sseClients.forEach(function (item, index) {
        item.send(`[${sseClients.length}]服务端推送给客户端${index} : ${item.count}`);
        item.count++;
      });
    }, 1000);
  });
});

结果：


图1-2 SSE请求头

图1-3 SSE运行截图
二、长短轮询
2.1 短轮询

概念：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接；即在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器（可以理解为TCP连接不复用）。

优点：

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

缺点：

  • 请求中有大半是无用，难于维护，浪费带宽和服务器资源；如果客户请求频繁/请求头很大，将在TCP的建立和关闭操作上浪费较多时间和带宽；
  • 响应的结果没有顺序（因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果，那么当前面的请求返回结果数据时已经是过时无效的数据了）。

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

实例：
适于小型应用。

实现：

function requestApi(url, methed) {
  let ajax = new XMLHttpRequest();
  ajax.open(methed.toUpperCase(), url);
  ajax.setRequestHeader('Authorization', 'token');
  ajax.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      console.log('接口数据', this.response);
    }
  }
  ajax.send();
}

// 响应的结果没有顺序（因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果，那么当前面的请求返回结果数据时已经是过时无效的数据了）。
setInterval(() => {
  requestApi(`http://localhost:13666/polling?_date=${+new Date()}`, 'get');
}, 3000);
2.2 长轮询（comet）

概念：当服务器收到客户端发来的请求后,服务器端不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新；如果有更新，则进行响应，如果一直没有数据，则到达一定的时间限制(服务器端设置，比如nginx需要设置proxy_read_timeout 或者写个心跳检测的代码)才返回， 客户端在处理完服务器返回的信息后，再次发出请求，重新建立连接。

优点：

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

缺点：

  • 请求挂起同样会导致资源的浪费。

应用场景：
数据实时更新。

实例：
WebQQ、Hi网页版、Facebook IM。

实现：

function requestApi(url, methed) {
  let ajax = new XMLHttpRequest();
  ajax.open(methed.toUpperCase(), url);
  ajax.setRequestHeader('Authorization', 'token');
  ajax.onreadystatechange = function () {
    requestApi(`http://localhost:13666/polling?_date=${+new Date()}`, 'get');
  }
  ajax.send();
}

requestApi(`http://localhost:13666/polling?_date=${+new Date()}`, 'get');
三、webSocket

webSocket是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

3.1 为什么需要websocket

websocket深入浅出

  • 因为 HTTP 协议有一个缺陷：通信只能由客户端发起；

  • 我们都知道轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）, 因此websocket应运而生。


    图3-1 websocket简介
3.2 实现

前端：

const webSocket = new WebSocket('ws://localhost:13666/test1/1');
webSocket.onopen = () => {
  alert('open:连接成功');
  webSocket.send('hello world');
};
webSocket.onmessage = (e) => {
  console.log('后端推送', e);
};
webSocket.onclose = (e) => {
  console.log('关闭连接', e);
};
webSocket.onerror = (e) => {
  console.log('连接失败', e);
};

后端（nodejs）:
app.js文件：

const express = require("express");
const app = express();
const PORT = 13666;

const webSocket = require('./routes/polling/webSocket');

// 将指定目录下的文件对外开放  http://localhost:13666/test.jpg就可以访问到public下的文件了
app.use(express.static('public'));


// app.all() 用于在所有HTTP 请求方法的路径上加载中间件函数, 所有的路由都会走这
app.all('*', (req, res, next) => {
  // 设置跨域访问
  res.header("Access-Control-Allow-Origin", "*");
  /**
   * 解决跨域
   * 包含自定义header字段的跨域请求，浏览器会先向服务器发送OPTIONS请求，探测该服务器是否允许自定义的跨域字段。如果允许，则继续实际的POST／GET正常请求，否则，返回标题所示错误。
   * 若报跨域:...by CORS policy: Request header field range is not allowed by Access-Control-Allow-Headers in preflight response，只需在响应头中包含该字段即可(加入range)
  */
  res.header("Access-Control-Allow-Headers", "content-type,x-requested-with,Authorization,x-ui-request,lang,accept,access-control-allow-origin,range");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1');
  res.header("Content-Type", "application/json;charset=utf-8");

  // 所有接口都会走这，所以可以添加全局处理方法，比如过滤器
  console.log('哈哈哈哈这里可以添加过滤器哦~');
  next();
});

/**
 * 基本路由，也可以使用router -- https://www.expressjs.com.cn/guide/routing.html
 * app.method(url, cbList)
 * method - 方法：get、post、put、delete
 * cbList - 回调函数，可以是个数组/函数，使用next就会调用下一个回调；参数req、res、next
*/

const httpServe = app.listen(PORT, () => {
  console.log('\033[;32m expressService listening at http://localhost:' + PORT + '\033[0m');
});

webSocket(httpServe);

webSocket.js文件：

/*********************************************************************
 * express 实现 webSocket
 * 注意点：
 * 1、send只能发送 字符串/buffer，由于接收到的是Buffer，所以如果需要传对象，需要先将buffer转字符串，再使用JSON.stringify；
 * 2、使用nodejs-websocket包，webSocket和http不能使用一个端口，会报“Error: listen EADDRINUSE: address already in use :::13666”，所以改用ws；
 * 3、使用ws共用一个端口是根据请求头中 Connection:Upgrade 和 Upgrade:websocket 这两个字段确认是否是webSocket；
 *    webSocket和http共用一个端口: https://blog.csdn.net/qq_44856695/article/details/120250286
 *********************************************************************/

const WS = require('ws');

// 不区分地址 - 即ws://localhost:13666 和 ws://localhost:13666/test都能访问到
const bindWs = (httpServer) => {
  const ws = new WS.Server({server: httpServer});
  ws.on('connection', (connect) => wsConnect(connect, '不区分地址'))
}

// ws连接 - 发送消息/关闭连接
const wsConnect = (connect, type) => {
  connect.on('message', (str) => {
    // send只能发送字符串/buffer，接收到的str是buffer类型，使用toString转成字符串
    connect.send(JSON.stringify({type, data: str.toString()}));
    setTimeout(() => {
      // 服务端主动关闭连接
      connect.close();
    }, 3000);
  });
  connect.on('close', (code, reason) => {
    console.log('关闭连接了', code, reason);
  })
}

// 区分地址 - 即只有 ws://localhost:13666/test/:id  和 ws://localhost:13666/test1/:id 能访问，获取id：req.url.match(/\/\d/g)[0].slice(1)
const bindWss = (httpServer) => {
  // ws://localhost:13666/test/:id 使用的ws
  const ws = new WS.Server({noServer: true});
  ws.on('connection', (connect) => wsConnect(connect, 'first'));

  // ws://localhost:13666/test1/:id 使用的ws
  const ws1 = new WS.Server({noServer: true});
  ws1.on('connection', (connect) => wsConnect(connect, 'second'));

  httpServer.on('upgrade', (req, socket, head) => {
    if (req.url.startsWith('/test/')) {
      ws.handleUpgrade(req, socket, head, (connect) => {
        ws.emit('connection', connect, req);
      });
    } else if (req.url.startsWith('/test1/')) {
      ws1.handleUpgrade(req, socket, head, (connect) => {
        ws1.emit('connection', connect, req);
      });
    } else {
      console.log('ws接口不存在');
      socket.destroy();
    }
  })
}
module.exports = function(httpServer) {
  bindWss(httpServer);
}
3.3 SSE和webSocket区别
    1. WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向客户端发送；
    1. WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在 HTTP协议之上的，现有的服务器软件都支持；
    1. SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂；
    1. SSE默认支持断线重连，WebSocket则需要额外部署；
    1. SSE支持自定义发送的数据类型，webSocket只能发送字符串/buffer；
    1. SSE不支持CORS，参数url就是服务器网址，必须与当前网页的网址在同一个网域（domain），而且协议和端口都必须相同；WebSocket支持跨域。
3.4 webSocket优点
图3-2 webSocket优点
四、通信技术比较

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

参考文章

http的长连接和短连接（史上最通俗！）
长连接、短连接、长轮询和WebSocket
SSE(Server Sent Events) HTTP服务端推送详解
Html5服务器发送事件(sse)在nodejs中的应用

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335