通信技术: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上的东西做测试,地址: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技术的基础概念,因为基础概念比较多,如果和第二版本一起搞上去,博文肯定很多很多,没有耐心看下去了,所以这个博文只是让大家对这个概念有所了解,知道这个东西是什么,能做什么,有啥新奇的玩意,能解决项目的什么问题。当然,我既然研究这个技术,当然为了保证将这个类库写好,至少可以到生产上使用这个类库,当然这个路不是那么好走的,还需要不停的去研究和改正。正如我正在走的开发的路,都要我们一步一个脚印的去走的,共勉。
夜已深,大家晚安,明天发表这个博客...
通信技术:SSE设计方案(一)--- 前端Server-Sent Events概念讲解和基础类库完善发布的更多相关文章
- 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)
距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...
- Play Framework, Server Sent Events and Internet Explorer
http://www.tuicool.com/articles/7jmE7r Next week I will be presenting at Scala Days . In my talk I w ...
- server sent events
server sent events server push https://html5doctor.com/server-sent-events/ https://developer.mozilla ...
- SQL Server 2008 数据库同步的两种方式 (发布、订阅)
参考转载: SQL Server 2008 数据库同步的两种方式 (发布.订阅) 使用Sqlserver事务发布实现数据同步
- AndroidAsync :异步Socket,http(client+server),websocket和socket.io的Android类库
AndroidAsync是一个用于Android应用的异步Socket,http(client+server),websocket和socket.io的类库.基于NIO,没有线程.它使用java.ni ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- SQL Server Extended Events 进阶 3:使用Extended Events UI
开始采用Extended Events 最大的阻碍之一是需要使用Xquery和XML知识用来分析数据.创建和运行会话可以用T-SQL完成,但是无论使用什么目标,数据都会被转换为XML.这个限制在SQL ...
- SQL Server Extended Events 进阶 2:使用UI创建基本的事件会话
第一阶中我们描述了如何在Profiler中自定义一个Trace,并且让它运行在服务器端来创建一个Trace文件.然后我们通过Jonathan Kehayias的 sp_SQLskills_Conver ...
随机推荐
- ps中如何让图层在画布内水平居中
下图每个小logo图案距离它们的上参考线的距离均为10px,而我们如何让图层在画布内水平居中??? 如上图中三个图层的图案是用来给Html/Css中的background属性使用的,虽然可以通过鼠标拖 ...
- 【Alpha阶段】第三次scrum meeting
每日任务: ·1.本次会议为第三次Meeting会议: ·2.本次会议于今日上午08:30第五社区五号楼下召开,会议时长15min. 二.每个人的工作: 三.工作中遇到的困难: 由于对编程语言的学习不 ...
- 201521123051《Java程序设计》第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123071 《JAVA程序设计》第六周学习总结
第6周-接口.内部类与Swing 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多 ...
- 201521123112《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点 1.2 可选:使用常规方法总结其他上课内容 课上讲了一些Markdown的用法,包括分割线.参考链接.代码引入等等. 2. 书面 ...
- 201521123050《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123098 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 1. Input Stream -- 数据提供者可从其中读数据输出流:Output Stream -- 数据接 ...
- JAVA课程设计-猜数游戏 201521123017
1.团队课程设计博客链接 http://www.cnblogs.com/m1ng123/p/7056740.html 2.个人负责模块或任务说明 (1)文件读取和文件的存储 (2)提示板块的窗口设计 ...
- 201521123045 《Java程序设计》 第10周学习总结
---恢复内容开始--- 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.finally 题目4-21.1 截图你的提交结果(出现学号) ...
- 手写Maven的archetype项目脚手架
一.背景 maven是一个很好的代码构建工具,采用“约定优先于配置”的原则进行项目管理,相信很多的java开发者应该都了解maven并可能在工作当中都是通过maven来管理项目的,在创建的项目的时候, ...