服务器发送事件SSE

xiaoxiao2021-02-28  91

服务器发送事件(Server-Sent Events,简称SSE)用于创建到服务器的单向连接,简单来说就是浏览器向服务器发送一个HTTP请求,然后服务器不断单向地向浏览器推送“信息”(message)。

首先要创建一个EventSourse对象

var source= new EventSource("myevents.php");注意:传入的URL必须与创建对象的页面同源。

EventSourse的实例有一个readyState属性,值0表示正在连接服务器,值1表示打开了连接,值2表示关闭了连接。

另外,还有三个事件,open:在建立连接时触发;error:在无法建立连接时触发;message:在从服务器接收到新事件时触发; 

event.data:服务器发回的数据以字符串形式保存在中。

event.origin: 服务器端URL的域名部分,即协议、域名和端口。

event.lastEventId:数据的编号,由服务器端发送。如果没有编号,这个属性为空。

source.close();可强制断开连接;

响应的MIME类型为text/event-stream,响应的格式为纯文本,每个数据前都带有前缀data:,例如:

data: foo data: bar data: foo data: bar 数据格式 服务器端发送的数据的HTTP头信息如下: Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive 后面的行都是如下格式: field: value\n field可以取四个值:“data”, “event”, “id”, or “retry”,也就是说有四类头信息。每次HTTP通信可以包含这四类头信息中的一类或多类。\n代表换行符。 以冒号开头的行,表示注释。通常,服务器每隔一段时间就会向浏览器发送一个注释,保持连接不中断。 : This is a comment data:数据栏 数据内容用data表示,可以占用一行或多行。如果数据只有一行,则像下面这样,以“\n\n”结尾。 data:  message\n\n 如果数据有多行,则最后一行用“\n\n”结尾,前面行都用“\n”结尾。 data: begin message\n data: continue message\n\n 总之,最后一行的data,结尾要用两个换行符号,表示数据结束。 以发送JSON格式的数据为例。 data: {\n data: "foo": "bar",\n data: "baz", 555\n data: }\n\n id:数据标识符 数据标识符用id表示,相当于每一条数据的编号。 id: msg1\n data: message\n\n 浏览器用lastEventId属性读取这个值。一旦连接断线,浏览器会发送一个HTTP头,里面包含一个特殊的“Last-Event-ID”头信息,将这个值发送回来,用来帮助服务器端重建连接。因此,这个头信息可以被视为一种同步机制。 event栏:自定义信息类型 event头信息表示自定义的数据类型,或者说数据的名字。 event: foo\n data: a foo event\n\n data: an unnamed event\n\n event: bar\n data: a bar event\n\n 上面的代码创造了三条信息。第一条是foo,触发浏览器端的foo事件;第二条未取名,表示默认类型,触发浏览器端的message事件;第三条是bar,触发浏览器端的bar事件。 retry:最大间隔时间 浏览器默认的是,如果服务器端三秒内没有发送任何信息,则开始重连。服务器端可以用retry头信息,指定通信的最大间隔时间。 retry: 10000\n

转载请注明原文地址: https://www.6miu.com/read-60771.html

最新回复(0)