通讯技术：SSE设计方案（一）--- 前端Server-Sent Events概念讲解和基础类库完善发布

好了，开篇仍是要扯扯的，不然感受这个技术讲的么有那么冻人，嗯，这个晚上是有点冷了，秋衣秋裤你们都该加起来了，反正我不帮你买，妹子除外，嘻嘻。

以前几篇博客，研究前端通讯技术的第一层ajax技术，从最基础的东西开始开发兼容，而后到最近的1.6版本吧，前先后后几乎将ajax的全部能用的技术都研究过一遍了，在github上也获得了120+的star，在这里我要感谢你们的支持。主要这里为何会这样说呢，由于以前获得你们的承认和鼓励，因此此次将进行前端通讯技术的第二个阶段的研究了，也就是前端的服务器推送 --- Server-Sent Events技术的研究。夜深了，不扯太多废话了，咱们直接进入主题。

概念讲解：

　　Server-Sent Events：简称SSE技术，也是前端es5支持的一种基于http协议的服务器推送技术。

　　EventSource：js中承载SSE技术的主要核心方案和方法

　　单工通道：只能一方面的数据导向，例如，在咱们前端，咱们经过浏览器向服务器请求数据，可是服务器不会主动推送数据给咱们，这就是单通道

　　双工通道：相似webSocket这样的技术，客户端能够推数据给服务器，服务器也能够推数据给客户端（下个版本实现）

　　定点推送：服务器能够将数据针对单个客户端推送（下个版本实现）

　　多人推送：服务器能够将数据一次性推送给全部人（下个版本实现）

 

兼容性（看下图）：

　　

　在全部IE系列中都不支持，其余浏览器几乎均可以实现，因此为了实现万恶的IE，会有以下2种方案

1.  在其余浏览器上使用原生 EventSource 对象，而在 IE 上则使用简易轮询或 COMET 技术来实现；
2.  使用 polyfill 技术，即便用第三方提供的 JavaScript 库来屏蔽浏览器的不一样。本文使用的是 polyfill 技术，只须要在页面中加载第三方 JavaScript 库便可。应用自己的浏览器端代码并不须要进行改动。

　　因此，这个方案，我会在最后一个版本和博客专门作兼容，暂时咱们就忽略这个兼容性问题

　　

对于其余通讯技术的比较（也就是何时作这样的技术选型）

• sse是基于http协议的，对于现有项目的改造和支持是成本最低的方案。webSocket须要先后端全都换上新的协议支持
• 对于推送的频率来讲，针对小于1次/1的推送，sse的使用最合适。大于1次的使用不划算，建议webSocket（考虑成本）
• WebSocket 技术也比较复杂，包括服务器端和浏览器端的实现都不一样于通常的 Web 应用。
• 对于轮询来讲的话，每次的http协议的建立和销毁对性能有点要求，何况对这个轮询的时间点也不是能特别好的把握

　　so，sse只是针对在适合他的地方才是最好的，这些点为你们作技术选型作些参考。

 

客户端（浏览器）技术讲解：

　　在客户端，也就是浏览器中，承载这个技术的就是EventSource了，下面直接上代码吧

// 通用方案
create:function (options) {         // option为可配置参数
    var param = tool.initParam(options),sendData = '';          // 将用户参数和默认参数合并

    if (param.data){        // 判断是否传递参数给服务器，作参数处理
        tool.each(param.data, function (item, index) { sendData += (index + "=" + item + "&") }); sendData = sendData.slice(0, -1); } var es = new EventSource(param.url+'?'+sendData);  //建立EventSource连接
 es.addEventListener('open',function (e) {   // 注册默认open事件
 param.openEvent(e) }); es.addEventListener('message',function (e) {    // 注册默认message事件，若是服务器不指定回掉，则走这个
 param.messageEvent(e) }); es.addEventListener('error',function (e) {      // 注册默认error事件
 param.errorEvent(e) }); // 建立用户自定义事件
    if (param.customEvent.length > 0){ tool.each(param.customEvent,function (item) { es.addEventListener(item.name,item.callback); }) } }

　　固然客户端还有表明连接状态的参数es.readyState：

• • 至关于常量EventSource.CONNECTING，表示链接还未创建，或者链接断线。
  • 至关于常量EventSource.OPEN，表示链接已经创建，能够接受数据。
  • 至关于常量EventSource.CLOSED，表示链接已断，且不会重连。

　　message回调的返回值（可本身debugger看）：

　　　　data：服务器端传回的数据（文本格式）。
　　　　origin： 服务器端URL的域名部分，即协议、域名和端口。
　　　　lastEventId：数据的编号，由服务器端发送。若是没有编号，这个属性为空。

　　

　　简单解释下：经过先new EventSource对象，创建链接，而后注册一些默认事件和自定义事件，就结束了，客户端就这么简单。主要在服务端。

 

默认参数以下（有些参数预先定义下个版本使用）：

var initParam = { url :'',                                //所连接的服务器地址
    data:'',                                //所发送的客户端数据
    customEvent:[],                         //自定义事件 格式：[{name:'事件名称',callback:function(res){}}]
    withCredentials:false,                 //是否发送跨域凭证
    serverTimeout:60000,                    //服务器http默认超时时间 待考虑：客户端配置服务器时间，不安全
    clientConnection:3000,                  //设置浏览器重连时间，浏览器默认3s重连，
    openEvent:function () {},              //客户端开始连接的事件
    messageEvent:function () {},           //客户端接受到消息的事件（如不自定义系统默认）
    errorEvent:function () {}              //客户端错误事件
}

 

服务器讲解：

　　对于创建链接的服务器，针对连接的客户端有以下返回参数：

　　　　：这是注释　　　　    单独一个冒号，表明服务器推送的一个注释。（这个可解决http中的324，发送心跳包）

　　　　id：11　　　　　　　 表明数据标识符，表明当前数据的惟一标识（若是断线，客户端会在下次http head中发送这个标识，可作数据传输标记）

　　　　data：我是谁　　　　这个数据就是客户端所接受到的数据（可推送格式化过的json数据）

　　　　event：myEvent　　  服务器返回客户端所执行事件（如不定义默认执行message事件）　　

　　　　retry：3000　　　　  客户端在http超时断开后多长时间从新链接

 

　　对于服务器的这些参数的互相组合，是否是忽然有种脑洞大开的感受，下个版本将在这些参数中作文章，实现开头所说的各类花样技术

 

对于作测试中发现的许多问题抛出，可能你也会想到，这些问题都将在下几个版本作完善

• 客户端兼容性问题（这个后面作）
• 客户端重连时间中，是否会丢失数据
• 服务器的http协议超时时间的设置
• 对于连接中出现的服务器返回超时
• 如何作到单点推送，群推送
• 服务器如何丢弃已断开的连接
• .......

 

测试以下（跳过ie系列）

　　chrome：

　　　

　　火狐：

　　

　　opera：

　　

　　safair：暂时没有mac支持，淡定

 

全部都上传github了，可直接拉去github上的东西作测试，地址：https://github.com/GerryIsWarrior/SSE，不要忘记点颗star支持我，至少获得了你的承认，我会继续研究下去。

　　js-ommon：为通常开发使用，直接引入js文件的

　　js-node：为node代码，作简易服务器用的

　　js-npm：发的npm打包代码，可npm i sse-js / yarn add sse-js 安装

　　index.html：为测试html页面

 

总结：

这篇博客主要讲解sse技术的基础概念，由于基础概念比较多，若是和第二版本一块儿搞上去，博文确定不少不少，没有耐心看下去了，因此这个博文只是让你们对这个概念有所了解，知道这个东西是什么，能作什么，有啥新奇的玩意，能解决项目的什么问题。固然，我既然研究这个技术，固然为了保证将这个类库写好，至少能够到生产上使用这个类库，固然这个路不是那么好走的，还须要不停的去研究和改正。正如我正在走的开发的路，都要咱们一步一个脚印的去走的，共勉。

夜已深，你们晚安，明天发表这个博客...