开发者社区> 仲强> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

通信技术:SSE设计方案(一)--- 前端Server-Sent Events概念讲解和基础类库完善发布

简介: 好了,开篇还是要扯扯的,否则感觉这个技术讲的么有那么冻人,嗯,这个晚上是有点冷了,秋衣秋裤大家都该加起来了,反正我不帮你买,妹子除外,嘻嘻。 之前几篇博客,研究前端通信技术的第一层ajax技术,从最基础的东西开始开发兼容,然后到最近的1.6版本吧,前前后后几乎将ajax的所有能用的技术都研究过一遍了,在github上也得到了120+的star,在这里我要感谢大家的支持。
+关注继续查看

好了,开篇还是要扯扯的,否则感觉这个技术讲的么有那么冻人,嗯,这个晚上是有点冷了,秋衣秋裤大家都该加起来了,反正我不帮你买,妹子除外,嘻嘻。

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Fluentd/FluentBit K8s日志采集方案介绍
Fluent Bit 是一个开源的多平台日志采集器,旨在打造日志采集处理和分发的通用利器。2014 年,Fluentd 团队预测对于嵌入式 Linux 和 Gateways 等受约束的环境,需要更轻量级的日志处理器,于是便开发了Fluent Bit,并把该项目建设成为Fluentd 生态系统的一部分。
199 0
JSP的数据从数据库中获取导入type=date的input标签中
JSP的数据从数据库中获取导入type=date的input标签中
49 0
JavaEE的RESTful标准技术JAX-RS,jersey-client客户端使用介绍【享学Java】(下)
JavaEE的RESTful标准技术JAX-RS,jersey-client客户端使用介绍【享学Java】(下)
95 0
Java Review (十九、基础类库----系统相关类)
Java Review (十九、基础类库----系统相关类)
62 0
CDN百科10 | 担心纸质病例被洪水淹没?ECS+CDN+OSS如何助力医疗上云
近日,一则洪水中医护紧急转移病例的新闻在网络上引起热议。由于病区被洪水淹没,医护与后勤、安保一起站在齐大腿深的洪水中,转移患者病例。网友纷纷表示:向所有医护人员致敬,你们辛苦了!看了这则新闻,相信你一定十分敬佩医护人员的善良和担当,同时也为他们泡在洪水中的双腿而感到心疼。剖析事件的背后,纸质病例确实存在储存难、转移难的痛点,如何解决这一问题呢?实际上,拥抱“云”正在成为医疗机构最受欢迎的选择。
758 0
从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载。
921 0
使用Identity Server 4建立Authorization Server (5)
预备知识: http://www.cnblogs.com/cgzl/p/7746496.html 第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第二部分: http://www.
1144 0
ASP.NET 5系列教程 (三):view components介绍
在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大。 VCs兼顾了视图和控制器的优点,你可以把VCs 看作一个Mini 控制器。它负责控制应用中的某一功能模块,例如: 动态导航菜单 标签云 登录面板 购物车 最近文章 博客侧边栏 假如使用VC 创建了登录面板,可以在很多场景中调用,例如: 用户没有登录 用户已登录,需要退出使用其他帐号登录或者管理其他帐号。
945 0
ASP.NET 中使用WebServer进行调试时,自定义的Identity出现 SerializationException的解决方法
今天遇到一个奇怪的问题,虽然已经解决了,但是原因仍然不是很清楚。 在新建的一个ASP.NET MVC中使用了自定义的Identity,在使用VS自带的WebServer调试时,发生了类似如下错误: Type is not resolved for member'XAssembly, Version=1.
821 0
+关注
仲强
一个不撞南墙不回头的傻孩子
文章
问答
文章排行榜
最热
最新
相关电子书
更多
去哪儿网qp热更新技术的架构与实践
立即下载
UI2CODE智能生成flutter代码--整体架构 【上叶】
立即下载
如何创建一个成功的(在业务和开发中)开源项目
立即下载