半个诗人
通信技术: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种方案
- 在其他浏览器上使用原生 EventSource 对象,而在 IE 上则使用简易轮询或 COMET 技术来实现;
- 使用 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 上的东西做测试,地址:github.com/GerryIsWarr… ,不要忘记点颗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 仲强 阅读(225) 评论(0) 编辑 收藏
刷新评论刷新页面返回顶部 注册用户登录后才能发表评论,请 登录 或 注册, 访问网站首页。 【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018!【腾讯云】小程序普惠节精美模板1元起
最新IT新闻:
· 乐视网复牌第二日再跌停 逾800万手卖单排队出逃
· 知名80后创业者茅侃侃离世 家中开煤气自杀
· 支付宝今年香港上市?马云终于发话了!
· 马云达沃斯论坛谈全球贸易:贸易不是武器,而是解决方案
· 两家机构数据显示:小米超三星 成印度手机老大
» 更多新闻... 最新知识库文章:
· 领域驱动设计在互联网业务开发中的实践
· 步入云计算
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
» 更多知识库文章...
导航
公告
昵称:仲强园龄:2年5个月
粉丝:73
关注: 0 +加关注
|
||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
统计
- 随笔 - 58
- 文章 - 0
- 评论 - 209
- 引用 - 0
搜索
常用链接
我的标签
随笔分类
- C#(1)
- CSS(13)
- github使用节奏(1)
- HTML(2)
- Javascript(27)
- Jquery(1)
- sql(1)
- 前端架构(14)
- 设计师(2)
- 实用插件(3)
- 移动web开发(3)
随笔档案
- 2018年1月 (1)
- 2017年10月 (2)
- 2017年9月 (1)
- 2017年6月 (1)
- 2017年2月 (2)
- 2017年1月 (2)
- 2016年12月 (3)
- 2016年11月 (2)
- 2016年10月 (2)
- 2016年9月 (1)
- 2016年7月 (1)
- 2016年6月 (1)
- 2016年5月 (1)
- 2016年3月 (2)
- 2016年2月 (36)
积分与排名
- 积分 - 32332
- 排名 - 11378
最新评论
- 1. Re:前端性能优化:客户端从输入到展示讲解
- @Cyclone77github排版已完成,也增加了一些内容。完善了...
- --仲强
- 2. Re:前端性能优化:客户端从输入到展示讲解
- @好想睡觉想做成一个大纲,作为一个指导性文档...
- --仲强
- 3. Re:前端性能优化:客户端从输入到展示讲解
- 好文
- --好想睡觉
- 4. Re:前端性能优化:客户端从输入到展示讲解
- @Cyclone77嗯嗯 md文件当时没仔细看直接上传了,过会儿更新一下,3q...
- --仲强
- 5. Re:前端性能优化:客户端从输入到展示讲解
- 支持。内容很不错,markdown格式有点问题
- --Cyclone77
阅读排行榜
- 1. 记一次阿里资深前端/专家面试的经历(3656)
- 2. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组(2889)
- 3. 前端通信:ajax设计方案(一)---集成核心请求(2807)
- 4. 面向UI编程框架:ui.js框架思路详细设计(2498)
- 5. 前端js的书写规范和高效维护的方案_自我总结使用的方案(2344)
评论排行榜
- 1. 以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题(25)
- 2. 前端通信:ajax设计方案(一)---集成核心请求(25)
- 3. 面向UI编程框架:ui.js框架思路详细设计(19)
- 4. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组(18)
- 5. 前端js的书写规范和高效维护的方案_自我总结使用的方案(18)
推荐排行榜
- 1. 前端js的书写规范和高效维护的方案_自我总结使用的方案(24)
- 2. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组(18)
- 3. 前端通信:ajax设计方案(一)---集成核心请求(16)
- 4. 前端通信:ajax设计方案(二)---集成轮询技术(8)
- 5. 前端性能优化:客户端从输入到展示讲解(7)
博客园
Copyright © 仲强