通信技术: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技术的基础概念,因为基础概念比较多,如果和第二版本一起搞上去,博文肯定很多很多,没有耐心看下去了,所以这个博文只是让大家对这个概念有所了解,知道这个东西是什么,能做什么,有啥新奇的玩意,能解决项目的什么问题。当然,我既然研究这个技术,当然为了保证将这个类库写好,至少可以到生产上使用这个类库,当然这个路不是那么好走的,还需要不停的去研究和改正。正如我正在走的开发的路,都要我们一步一个脚印的去走的,共勉。

夜已深,大家晚安,明天发表这个博客...

posted on 2017-10-16 09:47 仲强 阅读(...) 评论(...) 编辑 收藏

导航

统计