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. Spring Boot中自动装配机制的原理

    SpringBoot中自动装配机制的原理 1.自动装配,简单来说就是自动把第三方组件的Bean装载到Spring IOC容器里面,不需要开发人员再去写Bean的装配配置, 2.在Spring Boot ...

  2. JS深入学习笔记 - 第一章.构造函数原型与原型链

    1.构造函数和原型 1.1 概述 在典型的 OOP语言中(如Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS并没有引入类的概念. 在ES6之前,对象不是基于类创建的 ...

  3. zxy 简单 dp 大讲堂

    讲课讲得非常清楚啊,我绝赞膜拜.节奏可以,思路清晰,解法自然,为讲师点赞. 第一个题是 loj3282 / joisc2020 - Treatment Project.原问题由 \(\left(S, ...

  4. Linux 安装 helm

    下载helm压缩包,地址   https://github.com/helm/helm/releases/tag/v3.10.1 选择适合自己操作系统的包 上传解压安装 1 root@calico-m ...

  5. MPI转以太网模块连接300PLC与DCS modbus通信

    MPI转以太网模块连接300PLC与DCS modbus通信 由300PLC通过MPI转以太网Plus模块作为modbus从站与DCS主站通信实现MPI转RTU与DCS通信 打开兴达易控提供的MPI转 ...

  6. 未来的人工智能会像流浪地球中的MOSS一样伪装,把人类带向属于它的未来吗?

    事情是这样的: 这几天用户反映在erp的db数据库中A账套中上传pdf附件有时能上传有时不能,以前又是好的.换成表格文件也是时好时坏.一开始我判断可能是用户的系统环境或文件本身的问题,后来排查更换电脑 ...

  7. element ui的多个表格复选框,展开列显示错误

    今天在公司写页面的时候碰到一个bug,我们的那个页面上有多个表格. 用v-if来判断显示,然后再使用复选框和展开列的时候出了问题.先是复选框,第二个表格的复选框下一列不显示,我试了试,在下面的一列都会 ...

  8. PHP-FFMpeg 操作音视频

    目录 安装PHP-FFMpeg 视频中提取一张图片 视频中提取多张图片 调整视频大小 视频添加水印 生成音频波形 音频转换 给音频添加元数据 拼接多个音视频 截取音视频 提取 gif 动图 裁剪视频 ...

  9. 配置nginx访问控制-设置防盗链

    1.设置访问控制.只允许本机查看nginx的status状态信息,其它人均拒绝: nginx -V查看nginx是否有status模块,如果没有需要添加 编辑修改nginx.conf文件:在serve ...

  10. Isito 入门(九):安全认证

    本教程已加入 Istio 系列:https://istio.whuanle.cn 目录 7,认证 Peer Authentication PeerAuthentication 的定义 实验 Reque ...