码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript Ajax总结——其他跨域技术之服务器发送事件SSE

时间:2019-07-07 22:43:37      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:mime类型   一个   ref   code   color   ast   mime   php   style   

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

标签:mime类型   一个   ref   code   color   ast   mime   php   style   

原文地址:https://www.cnblogs.com/wuxxblog/p/11148334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!