SSE(server-Sent Events,服务器发送事件)是围绕只读Comet交互推出的API或者模式。

SSE API创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream,是浏览器中的JavascriptAPI能解析输出的格式。SSE支持短轮询、长轮询和HTTP流,能在断开连接时自动确定何时重新连接。

支持SSE的浏览器:Firefox6+、Safari5+、Opera11+、Chrome、iOS4+版Safari。

(1)SSE API

创建一个EventSource事件,传进一个入口点:

var source = new EventSource("myevents.php");

传入的URL必须与创建对象的页面同源(相同的URL模式、域及端口)。

EventSource的实例有一个readyState属性
0:表示正连接到服务器;
1:表示打开了连接;
2:表示关闭了连接。

三个事件
* open:在建立连接时触发。
* message:在从服务器接收到新事件时触发。
* error:在无法建立连接时触发。

onmessage事件处理程序:

1 source.onmessage = function(){
2 var data = event.data;
3 //处理数据
4 //数据是字符串格式
5 }

默认情况下,EventSource对象会保持与服务器的活动连接。如果连接断开,还会重新连接。这意味着SSE适合长轮询和HTTP流。如果想强制立即断开连接并且不再重新连接,可以调用close()方法。

source.close();

(2)事件流

所谓的服务器事件会通过一个持久的HTTP响应发送,这个响应的MIME类型为text/event-stream。响应的格式是纯文本,最简单的情况是每个数据项都带有前缀data:,如:

data: foo

data: bar

data: foo
data: bar

事件流中的第一个message事件返回的event.data值为“foo”,第二个message事件返回的event.data值为“bar”,第三个message事件返回的event.data值为“foo\nbar”。对于多个连续的以data:开头的数据行,将作为多段数据解析,每个值之间以一个换行符分隔。只有在包含data:的数据行后面有空行时,才会触发message事件,因此在服务器上生成事件流时不能忘了多添加这一行。

通过id:前缀可以给特定的事件指定一个关联的ID,这个ID行位于data:行前面或后面皆可:

data: foo
id: 1

设置ID后,EventSource对象会跟踪上一次触发的事件。如果连接断开,会向服务器发送一个包含名为Last-Event-ID的特殊HTTP头部的请求,以便服务器指定下一次该触发哪一个事件。在多次连接的事件流中,这种机制可以确保浏览器以正确的顺序收到连接的数据段。

Javascript Ajax总结——其他跨域技术之服务器发送事件SSE的更多相关文章

  1. javascript跨域传递消息 / 服务器实时推送总结

    参考文档,下面有转载[非常好的两篇文章]: http://www.cnblogs.com/loveis715/p/4592246.html [跨源的各种方法总结] http://kb.cnblogs. ...

  2. js-其他跨域技术(JSONP`Comet)

    ###1.  JSONP JSONP由两部分组成:回调函数和数据 JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL eg: function ha ...

  3. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

  4. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  5. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  6. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  7. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

  9. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  10. (转)jquery ajax使用及跨域访问解决办法

    原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...

随机推荐

  1. JSTL常用代码总结

    1. jstl判空: (1) 须先引人<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix=" ...

  2. Solution -「ARC 103B」Robot Arms

    Description Link. 给定 \(n\) 组坐标.构造长度为 \(m\) 的序列 \(\{c_n\}\) 和 \(n\) 组包含 LRUD 的路径,满足对于每一组坐标: \(c_i\) 表 ...

  3. Python 网页爬虫原理及代理 IP 使用

    一.Python 网页爬虫原理 Python 是一种高效的编程语言,在 Web 开发和数据分析领域广受欢迎.Python 的优秀模块使其更加适合大规模数据处理和 Web 服务的编程.网络爬虫是 Pyt ...

  4. HDU4841 AHOI1999 圆桌问题 题解

    朴素的约瑟夫问题,用vector处理即可 #include <iostream> #include <vector> using namespace std; //AHOI19 ...

  5. 产品代码都给你看了,可别再说不会DDD(八):应用服务与领域服务

    这是一个讲解DDD落地的文章系列,作者是<实现领域驱动设计>的译者滕云.本文章系列以一个真实的并已成功上线的软件项目--码如云(https://www.mryqr.com)为例,系统性地讲 ...

  6. Axure RP Pro 6.5如何创建Tab标签效果(转)

    http://jingyan.baidu.com/article/ce09321b3c665f2bff858f01.html  Axure RP Pro 能帮助网站需求设计者,快捷而简便的创建基于网站 ...

  7. HelloGitHub 社区动态,开启新的篇章!

    今天这篇文章是 HelloGitHub 社区动态的第一篇文章,所以我想多说两句,聊聊为啥开启这个系列. 我是 2016 年创建的 HelloGitHub,它从最初的一份分享开源项目的月刊,现如今已经成 ...

  8. 混合应用与Hybrid App开发上架流程透析

    Hybrid App(混合 App)已经成为大家接触最为广泛的 App 形式,不管是我们用到的微信.支付宝还是淘宝.京东等大大小小的应用都非常热衷于Hybrid App 带来的研发效率提升和灵活性. ...

  9. 反转字符串里的单词(leetcode 4.10每日打卡)

    给定一个字符串,逐个翻转字符串中的每个单词.   示例 1: 输入: "the sky is blue"输出: "blue is sky the" 示例 2: ...

  10. mac中删除本地maven库中下载失败的.lastUpdated文件

    在 macOS 中,要删除本地 Maven 仓库中所有的 .lastUpdated 文件,您可以使用 find 命令结合 rm 命令来执行这个操作.这可以在终端(Terminal)中完成. 打开您的终 ...