HTML Server-Sent Event

Ang Server-Sent event ay nagbibigay ng kapangyarihan sa web page na makakuha ng mga update mula sa server.

Server-Sent Event - One Way Messaging

Ang Server-Sent event ay tumutukoy sa awtomatikong pagkakaroon ng mga update ng web page mula sa server.

Maaari din itong gawin dati, pero ang web page ay kailangang tanungin kung mayroong mga magagamit na update. Sa pamamagitan ng Server-Sent event, ang mga update ay maaaring dumating ng awtomatiko.

Halimbawa: mga update ng Facebook/Twitter, pagtaas ng presyo ng bahagi, bagong blog post, resulta ng laban, at iba pa.

Suporta ng Browser

Ang mga numero sa talahanayan ay ipinakita ang unang browser na ganap na sumusuporta sa server-sent event.

API
SSE 6.0 Hindi suportado 6.0 5.0 11.5

Tanggapin ang notipikasyon ng Server-Sent Event

Ang EventSource object ay ginagamit upang tanggapin ang mga notipikasyon ng pagpadala ng event ng server:

Eksemplo

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Subukan ang iyong sarili!

Halimbawa ng paliwanag:

  • Lumikha ng isang bagong EventSource object, at tukoy ang URL ng pahina na magpadala ng update (sa halimbawa, "demo_sse.php").
  • Bukas sa bawat pagtanggap ng isang pag-update, mangyayari ang event ng onmessage.
  • Pagkatapos nang mangyari ang event ng onmessage, ilagay ang natanggap na datos sa elemento na may id na "result".

Suriin ang Suporta ng Server-Sent Event

Sa TIY eksemplo, isinulat namin ang isang dagdag na kodigo upang suriin ang suporta ng browser sa pagpadala ng event ng server:

kung typeof(EventSource) !== "undefined" {
    // Oo! Suportado ang pagpadala ng event ng server!
    // Mga kodigo...
}
    // Paumanhin! Hindi suportado ang pagpadala ng event ng server!
}

Mga halimbawa ng kodigo sa server

Para maipagpatuloy ang halimbawa sa ibang eksemplo, kailangan mong magpadala ng mga pinagkukunan ng pag-update ng server (halimbawa, PHP o ASP).

服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

PHP 中的代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 中的代码 (VB) (demo_sse.asp)：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代码解释：

  • 把报头 "Content-Type" 设置为 "text/event-stream"
  • 规定不对页面进行缓存
  • 输出要发送的日期（始终以 "data: " 开头）
  • 向网页刷新输出数据

EventSource 对象

在上例中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误