HTML Server-Sent Event

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

Server-Sent Event - One Way Messaging

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

Maaari rin itong gawin dati, sa tingin ng web page ay dapat magtanong kung mayroong magiging update. Sa pamamagitan ng Server-Sent event, ang mga update ay maaring dumating nang awtomatiko.

Halimbawa: mga update ng Facebook/Twitter, mga update ng halaga ng bahagi, bagong mga blog post, mga resulta ng laro, at iba pa.

Suporta ng Browser

Ang mga numero sa talahanayan ay nagtutukoy sa 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 na ipinadala ng server:

Halimbawa

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

Subukan mo ito sa sarili mo

Halimbawa ng paliwanag:

  • Lumikha ng bagong EventSource object, at tukuyin ang URL ng pahina na magpadala ng update (sa halimbawa, "demo_sse.php").
  • Kada pagtanggap ng isang update, nangyayari ang event na onmessage.
  • Kapag nangyayari ang event na onmessage, ilalagay ang natanggap na data sa elemento na may id na "result".

Suriin ang Suporta ng Server-Sent Event

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

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

Eskwelang kodigo sa server

Para maisa magsimula ang halimbawa, kailangan mo magpadala ng mga update sa 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 当发生错误