文档章节

(翻译)H5数据流消息推送机制Event Source

一点灵犀
 一点灵犀
发布于 2015/04/13 14:52
字数 624
阅读 240
收藏 2
点赞 0
评论 0

关于数据推送,传统方法是前端(不)定时发送HTTP请求进行轮询。但这种方式非常的损耗服务器资源,不适合访问量高的情况。

目前H5提供两种方式:Server-Sent EventsWebSockets。 前者只是服务器单向推送数据,易于使用,且浏览器会自动重连;后者支持交互,但实现较复杂。 本文只介绍前一种方案。

###JavaScript API###

var source = new EventSource(URL); // 注意跨域问题
source.addEventListener('message', function(e) {
  console.log(e.data);
}, false);
source.addEventListener('open', function(e) {
  // Connection was opened.
}, false);
source.addEventListener('error', function(e) {
  if (e.readyState == EventSource.CLOSED) {
    // Connection was closed.
  }
}, false);

连接成功后,浏览器每隔3秒会自动重连,收到的数据通过message事件响应。

###Event Stream数据格式###

服务器正常情况下返回一个Content-Type类型为text/event-stream的纯文本内容。

最简单形如:data:str\n\n,即以data:起头,两个换行符结尾。这样e.data就是str

如果要返回多行文本,依样增加,但要注意前面只添加一个换行符,最后一个则是两个:

data: first line\n
data: second line\n\n

如果要返回JSON格式的内容呢?依法炮制:

data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n

为了标记响应数据,可以增加一段id: 12345\n,id值可以通过message响应事件的e.lastEventId属性读取。同时,浏览器发送请求时,其消息头会自动带上这个数值(参数名为Last-Event-ID)。

有时候数据更新比较缓慢,因此设置WEB延迟一段事件再发送请求,方法是增加一个retry属性:

retry: 10000\n
data: hello world\n\n

这样下一次请求会延长到10秒。仅一次有效。

甚至,你还可以自定义添加事件名称(默认是message):

// 服务器端
data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n
// WEB端
source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.msg);
}, false);

source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('User login:' + data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.username + ' is now ' + data.emotion);
}, false);

###取消或中断连接###

在WEB端,通过source.close()关闭连接。

在服务器端,返回一个Content-Type非text/event-stream或HTTP status不为200的应答即可。

参考:

© 著作权归作者所有

共有 人打赏支持
一点灵犀

一点灵犀

粉丝 10
博文 51
码字总数 15202
作品 1
深圳
程序员
分布式日志收集系统Flume

Flume简介 Flume是一个分布式的、高可用的海量日志采集系统。它支持对日志数据的发送方、接收方进行定义,可将多种来源的日志数据写到指定的接收方,如:文本、HDFS、Hbase等。 我认为Flume...

林中漫步 ⋅ 2016/05/31 ⋅ 0

flume的基本概念,数据流模型

1.flume的基本概念 本文中所有与flume相关术语都采用斜体英文表示,这些术语的含义如下所示。 flume 一个可靠的,分布式的,用于采集,聚合,传输海量日志数据的系统。 Web Server 一个产生 ...

张欢19933 ⋅ 2016/01/20 ⋅ 0

Jeewx捷微 , 免费微信公众账号管家系统发布,采用JAVA语言

JeeWx, 微信管家平台,简称“捷微”. 捷微是一款免费开源的JAVA微信公众账号开发平台. 当前最新版本: 2.3(发布日期:20160323) 一、捷微Jeewx简介 Jeewx是一个开源、高效、敏捷的微信开发...

Jeecg ⋅ 2016/03/24 ⋅ 0

flume-ng安装与使用

1 前言 Flume开始由Cloudera公司开发,2011年Cloudera公司将Flume贡献给开源社区,现在Apache Flume是Apache Software Foundation的一个顶级项目。 目前Flume有两个可用的Release版本:0.9x和...

Small-Liu ⋅ 2016/05/23 ⋅ 0

大数据flume日志采集系统详解

一.flume介绍 flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统。Flume支持日志系统中定制各类数据发送方,用于收集数据。同时flume提供对数据进行简单处理,并写...

ChinaUnicom110 ⋅ 2017/09/19 ⋅ 0

webpack热更新原理WebSocket与EventSource

开发环境页面热更新早已是主流,常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等,都需要借助热更新功能,才能达到实时的端对端的极致体验。 ...

筱飞 ⋅ 04/16 ⋅ 0

从消息机制谈到观察者模式

从简单的例子开始 同样,我们还是先看一个简单例子:创建一个窗口实现加法的计算功能。其效果如下: 图1: 加法计算 Calculator.java: import javax.swing.;import javax.swing.border.Bevel...

Sheamus ⋅ 2016/03/14 ⋅ 0

Server-Sent Events 教程

服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE)。本文介绍它的用法。 一、SSE 的本质 严格地说,HTTP 协议无法做到服务器主动推送信息。但是,...

阮一峰 ⋅ 2017/05/27 ⋅ 0

Apache Flink:详细入门

Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时(Flink Runtime),提供支持流处理和批处理两种类型应用的功能。现有的开源计算方案,会...

Zero零_度 ⋅ 2016/06/27 ⋅ 0

HTTP2.0简明笔记

版权声明:本文由史燕飞原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/82 来源:腾云阁 https://www.qcloud.com/community RFC2616发布以来,一直是互...

偶素浅小浅 ⋅ 2016/11/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

看东方明珠新媒体如何基于阿里视频云,构建完整的视频OTT平台SaaS服务

摘要: 东方明珠新媒体如何基于阿里云,搭建了面向第三方的视频SaaS服务?6月8日,上海云栖大会视频专场中,东方明珠新媒体股份有限公司云计算中心的副总周少毅带来了《东方明珠视频云》为题...

阿里云云栖社区 ⋅ 23分钟前 ⋅ 0

C#调用WebService实例和开发 VS2013

简单的理解就是:webservice就是放在服务器上的函数,所有人都可以调用,然后返回信息。 Web Service的主要目标是跨平台的可互操作性。为了实现这一目标,Web Service 完全基于XML(可扩展标...

布衣大侠 ⋅ 26分钟前 ⋅ 0

基于FlumeNG+Kafka+ElasticSearch+Kibana的日志系统

环境准备 1.服务器概览 hostname ip 操作系统 说明 安装内容 node1.fek 192.168.2.161 centos 7 node1节点 nginx,jdk1.8, flumeNG, elasticsearch slave1 node2.fek 192.168.2.162 centos ......

张shieppp ⋅ 26分钟前 ⋅ 0

问答网站已成过去,深度问答社区才是当下

曾几何时,各类问答网站数不胜数,从百度知道这类综合型问答网站到各种垂直细分的问答网站,都有不少,但到了移动互联网时代,很明显的一大趋势是,网站整体的流量都在下滑,随着移动智能设备...

ThinkSNS账号 ⋅ 29分钟前 ⋅ 0

Android平台架构(ART)

Android平台架构(ART) 本文目的:准确表述Android平台架构 本文转载自[Android官网] 本文定位:学习笔记 学习过程记录,加深理解。也希望能给学习的同学一些灵感 本文更新时间:2018.06.22(...

lichuangnk ⋅ 31分钟前 ⋅ 0

看东方明珠新媒体如何基于阿里视频云,构建完整的视频OTT平台SaaS服务

摘要: 东方明珠新媒体如何基于阿里云,搭建了面向第三方的视频SaaS服务?6月8日,上海云栖大会视频专场中,东方明珠新媒体股份有限公司云计算中心的副总周少毅带来了《东方明珠视频云》为题...

猫耳m ⋅ 32分钟前 ⋅ 0

Java 动态代理 原理解析

概要 AOP的拦截功能是由java中的动态代理来实现的。说白了,就是在目标类的基础上增加切面逻辑,生成增强的目标类(该切面逻辑或者在目标类函数执行之前,或者目标类函数执行之后,或者在目标...

轨迹_ ⋅ 35分钟前 ⋅ 0

js 获取当前时间

var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate...

夜醒者 ⋅ 41分钟前 ⋅ 0

windows删除或修改本地Git保存的账号密码

在win10或者win7都是一样的步骤: (一)进入控制面板(二)选择用户账户(三)选择管理你的凭据(四)选择Windows凭据(五)选择git保存的用户信息(六)选择编辑或者进...

果树啊 ⋅ 41分钟前 ⋅ 0

8个基本的Docker容器管理命令

前言: 在这篇文章中,我们将带你学习 8 个基本的 Docker 容器命令,它们操控着 Docker 容器的基本活动,例如 运行run、 列举list、 停止stop、 查看历史纪录logs、 删除delete 等等。文末福...

java高级架构牛人 ⋅ 43分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部