server-Sent Events (SSE) нь вэб хуудсыг серверээс шинэчлэлт авах боломжийг олгодог.
Серверээс илгээсэн үйл явдлууд – Нэг талын мессеж #
Серверээс илгээсэн үйл явдал бол вэб хуудас серверээс автоматаар шинэчлэлт авч байх явдал юм.
Энэ нь өмнө нь бас боломжтой байсан боловч вэб хуудсанд шинэчлэлт байгаа эсэхийг асуух шаардлагатай болно. Серверээс илгээсэн үйл явдлуудын дагуу шинэчлэлтүүд автоматаар ирдэг.
Жишээ нь: Facebook / Twitter-ийн шинэчлэлт, хувьцааны үнийн шинэчлэлт, мэдээний суваг, спортын үр дүн гэх мэт.
Хөтөчийн дэмжлэг #
| API | chrome | internet explorer | mozila firefox | safari | opera |
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Серверээс илгээсэн үйл явдлын мэдэгдэл хүлээн авах #
EventSource объектыг серверээс илгээсэн үйл явдлын мэдэгдэл хүлээн авахад ашигладаг.
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
}; Жишээ тайлбарласан:
- Шинэ EventSource объект үүсгээд шинэчлэлтийг илгээж буй хуудасны URL-г зааж өгнө үү (энэ жишээнд “demo_sse.php”)
- Шинэчлэлт хүлээн авах бүрт onmessage үйл явдал болдог
- Onmessage үйл явдал тохиолдоход хүлээн авсан өгөгдлийг id = “result” элементтэй оруулна уу
Серверээс илгээсэн үйл явдлын дэмжлэгийг шалгана уу #
Дээрх tryit жишээнд серверээс илгээсэн үйл явдлын хөтөчийн дэмжлэгийг шалгах зарим нэмэлт кодын мөрүүд байсан:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
} Сервер талын кодын жишээ #
Дээрх жишээг ажиллуулахын тулд танд мэдээллийн шинэчлэлт (PHP эсвэл ASP гэх мэт) илгээх чадвартай сервер хэрэгтэй.
Серверийн үйл явдлын урсгалын синтакс нь энгийн. “Агуулга-төрөл” толгой хэсгийг “текст / үйл явдал-урсгал” болгож тохируулна уу. Одоо та үйл явдлын дамжуулалтыг эхлүүлж болно.
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()
%> кодыг тайлбарлав:
- “Агуулгын төрөл” толгой хэсгийг “текст / үйл явдал-урсгал” болгож тохируулах
- Хуудсыг кэшлэх ёсгүй гэдгийг зааж өгнө үү
- Илгээх өгөгдлийг гаргана уу (Үргэлж “өгөгдөл:” гэж эхлээрэй)
- Гаралтын өгөгдлийг вэб хуудсанд буцааж оруулна уу
EventSource объект #
Дээрх жишээн дээр бид мессеж авахын тулд onmessage үйл явдлыг ашигласан болно. Гэхдээ бусад арга хэмжээнүүд бас боломжтой:
| Үйл явдал | Тайлбар |
|---|---|
| onopen | Сервертэй холболт нээгдэх үед |
| onmessage | Зурвас хүлээн авах үед |
| onerror | Алдаа гарвал |
