Server-Sent Events (SSE) في HTML
سابقاً شغّلت Web Workers JavaScript في خيط خلفي وتحدثت مع الصفحة بـ postMessage — عمل CPU محلي بلا تدفق خادم. هذا الدرس يترك الحساب خارج الخيط ويقدّم SSE: الخادم يدفع تدفق تحديثات نصية عبر HTTP. النطاق عملي — فتح واستماع ودفع أحادي — لا خوادم تدفق Node.
لماذا SSE في دورة HTML
المبتدئ يحتاج نقاطاً حية أو سجلات بلا بروتوكول مقبس مخصص. SSE أول واجهة شائعة لدفع النص عبر HTTP. بعد العمال يختلف التقسيم: الخادم يملك التدفق؛ سكربت الصفحة يملك EventSource وDOM.
إجابة مباشرة
1) new EventSource("/events"). 2) onmessage واقرأ e.data. 3) حدّث DOM في الصفحة. 4) onerror للقطع. 5) أحادي الاتجاه. 6) WebSockets للاتجاهين؛ polling للنادر؛ Workers للـ CPU المحلي.
📊 SSE vs WebSocket vs Worker
| Topic | SSE (this lesson) | WebSocket | Web Worker (prev) |
|---|---|---|---|
| Typical role | Server→browser text stream | Full duplex messages | Local off-thread compute |
| Browser entry | EventSource(url) | new WebSocket(url) | new Worker(url or Blob) |
| Direction | One-way (server push) | Two-way | Page ↔ worker (no server required) |
| Transport idea | HTTP text/event-stream | WS protocol | postMessage / onmessage |
| DOM updates | On the page script | On the page script | On the page script only |
| This course depth | Required (browser pattern) | Contrast only | Previous lesson |
| Not this lesson | Full backend stream servers | Chat product design | SharedWorker fleets |
نمط صغير لاستماع EventSource
المقتطف يعرض جانب المتصفح فقط. /events يجب أن يكون نقطة SSE حقيقية؛ بلا خادم يظهر خطأ — ويعلّم شكل الواجهة.
<pre id="out">Waiting for stream…</pre>
<script>
const out = document.getElementById("out");
const es = new EventSource("/events");
es.onmessage = function (e) {
out.textContent = "Last update: " + e.data;
};
es.onerror = function () {
out.textContent = "SSE error or closed (need a real /events stream)";
};
</script>
قراءة استدعاءات الاستماع
- EventSource يفتح تدفقاً طويلاً
- onmessage عند حدث message
- e.data الحمولة النصية
- الصفحة تكتب في pre
- بخلاف Workers: لا postMessage لخيط خلفي
- onerror متوقع بلا خادم
- أبقِ المقدمة صغيرة
إلحاق أسطر التدفق بسجل
الواجهات الحية غالباً تضيف كل حدث. هذا العرض يحتفظ بآخر أسطر في قائمة.
<ul id="log"></ul>
<script>
const log = document.getElementById("log");
const es = new EventSource("/events");
es.onmessage = function (e) {
const li = document.createElement("li");
li.textContent = e.data;
log.appendChild(li);
while (log.children.length > 5) {
log.removeChild(log.firstChild);
}
};
es.onerror = function () {
if (!log.dataset.noted) {
log.dataset.noted = "1";
const li = document.createElement("li");
li.textContent = "Stream not available — wire a text/event-stream URL";
log.appendChild(li);
}
};
</script>
قراءة فكرة السجل
- كل onmessage ينشئ li
- حدّ القائمة
- ما زال أحادي الاتجاه
- ليس Web Worker
- أحداث مسماة موجودة؛ message يكفي
- es.close() عند الانتهاء
- التالي: XHTML
اختيار SSE أو polling أو مقبس أو worker
- دفع متكرر للحالة عبر HTTP: مناسب لـ SSE
- تحديث نادر: قد يكفي polling
- دردشة باتجاهين: WebSockets
- حلقة محلية ثقيلة: كان Workers
- سحب بطاقة: كان DnD
- بناء نقطة تدفق الخلفية: خارج المقدمة
تمرين — افتح واستمع وقارن
- اقرأ مقتطف الاستماع.
- اطّلع على text/event-stream.
- اقرأ سجل الإلحاق.
- جملة: Workers محلياً؛ SSE من الخادم.
- جملة: SSE أحادي؛ WebSockets اتجاهان.
- اختياري: URL حقيقي.
- التالي XHTML.
أخطاء سهلة
- توقع إرسال متصفح→خادم عبر EventSource
- الخلط مع Web Workers
- نسيان نوع محتوى event-stream
- SSE لتحديثات نادرة جداً
- تجاهل onerror
- اعتبار المقدمة دورة خلفية كاملة
- خلط EventSource مع Worker أو WebSocket
ملخص
- SSE يبث تحديثات خادم→متصفح عبر HTTP
- EventSource وonmessage/onerror؛ ارسم DOM في الصفحة
- دفع أحادي؛ WebSockets للاتجاهين
- Workers كان حساباً محلياً؛ هنا دفع خادم
- العرض الحقيقي يحتاج text/event-stream
- التالي: XHTML
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى