Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

HTML SSE

Server-Sent Events (SSE) API serverdan veb-sahifaga HTTP ulanishi orqali xabarlar/yangilanishlarni yuborish (push) imkonini beradi.

ULASHISH

Server-Sent Events — bir tomonlama xabarlash

Server-sent event — bu veb-sahifaning serverdan xabarlarni/yangilanishlarni avtomatik olishi.

Odatda veb-sahifa serverdan ma’lumot so‘rashi kerak, lekin server-sent events yordamida yangilanishlar avtomatik yuboriladi.

Misollar: Facebook/Twitter yangilanishlari, birja yangilanishlari, yangiliklar lentasi, sport natijalari va h.k.

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi raqamlar Server-Sent Events API ni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini bildiradi.

API
SSE 6.0 79.0 6.0 5.0 11.5

Server-Sent Event bildirishnomalarini qabul qilish

EventSource obyekti server-sent event bildirishnomalarini qabul qilish uchun ishlatiladi:

Misol

<script>
const x = document.getElementById("result");
// Check browser support for SSE
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    x.innerHTML += event.data + "<br>";
  };
} else {
  x.innerHTML = "Sorry, no support for server-sent events.";
}
</script>
O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

  • Yangi EventSource obyektini yarating va yangilanishlarni yuborayotgan sahifa URL manzilini belgilang (bu misolda "demo_sse.php")
  • Har safar yangilanish qabul qilinganda onmessage hodisasi sodir bo‘ladi
  • onmessage hodisasi sodir bo‘lganda, qabul qilingan ma’lumotni id="result" bo‘lgan elementga joylashtiring

Brauzer qo‘llab-quvvatlashini tekshirish

Yuqoridagi sinab ko‘rish (tryit) misolida server-sent events uchun brauzer qo‘llab-quvvatlashini tekshirish uchun ba’zi qo‘shimcha kod satrlari bor edi:

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

Server tomondagi kod misoli

Yuqoridagi misol ishlashi uchun sizga ma’lumot yangilanishlarini yuborishga qodir server kerak (masalan PHP yoki ASP).

Server tomondagi event stream sintaksisi oddiy. "Content-Type" sarlavhasini "text/event-stream" ga sozlang. Endi siz event stream larni yuborishni boshlashingiz mumkin.

PHP dagi kod (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) dagi kod (demo_sse.asp):

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

Kod tushuntirilishi:

  • "Content-Type" sarlavhasini "text/event-stream" ga sozlang
  • Sahifa keshlanmasligini belgilang
  • Yuboriladigan ma’lumotni chiqaring (Har doim "data: " bilan boshlang)
  • Chiqarilgan ma’lumotni veb-sahifaga qayta yuboring (flush qiling)

EventSource obyekti

Yuqoridagi misollarda biz xabarlarni olish uchun onmessage hodisasidan foydalandik. Lekin boshqa hodisalar ham mavjud:

Events Tavsif
onopen Serverga ulanish ochilganda
onmessage Xabar qabul qilinganda
onerror Xatolik yuz berganda

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish