English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يُمكن لإشعارات الحدث في HTML5 لخدمة الحدث الحصول على أحدث البيانات من الخادم دون تحديث الصفحة، مما يتيح الحصول على أحدث البيانات بشكلديناميكي.
تمثل إشعارات الحدث المرسلة من الخادم حصول الصفحة على تحديثات بيانات من الخادم.
تمثل الطريقة التقليدية للحصول على أحدث بيانات الخادم من خلال تحديث الصفحة أو استخدام جهاز تقسيم الوقت للحصول على أحدث البيانات.
مثال: تحديثات فيسبوك/تويتر، أسعار الأسهم، تغريدات، نتائج الرياضة، رسائل حية، تعليقات، إلخ.
يدعم جميع المتصفحات الرئيسية إشعارات الحدث المرسلة من الخادم باستثناء متصفح إنترنت إكسبلورر.
يستخدم جسم EventSource لاستقبال إشعارات الحدث التي يرسلها الخادم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>موقع تعليمي أساسي (oldtoolbag.com)</title>
</head>
<body>
<h1>الحصول على أحدث بيانات من الجانب السيرفرية</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo-sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="آسف، متصفحك لا يدعم أحداث server-sent...";
}
</script>
</body>
</html>اختبر هذا لـ ‹/›تفسير المثال:
أنشئ جسمًا جديدًا من EventSource، ثم قم بتحديد عنوان URL للصفحة التي يتم فيها إرسال التحديثات (في هذا المثال هو "demo_sse.php")
عند استقبال تحديث جديد، يحدث أحداث onmessage
عند حدوث أحداث onmessage، قم بإرسال البيانات التي تم استقبالها إلى العنصر الذي يحمل الـ id "result"
في هذا المثال، كتبنا كودًا إضافيًا للتحقق من دعم المتصفح لتسلسل الحدثات المرسلة من السيرفر:
if(typeof(EventSource)!=="undefined")
{
// يدعم المتصفح Server-Sent
// بعض الكود.....
}
else
{
// لا يدعم المتصفح Server-Sent..
}للحصول على مثال أعلاه يعمل، تحتاج أيضًا إلى إمكانية إرسال تحديثات البيانات من السيرفر (مثل PHP وASP).
قواعد اللغة السيرفرية لمسارات الحدث بسيطة جدًا. قم بتعيين رأس "Content-Type" إلى "text/event-stream". الآن، يمكنك البدء في إرسال مسارات الحدث.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server current time: {$time}\n\n";
flush();
?>كود ASP (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>توضيح الكود:
ضبط عنوان الرأس "Content-Type" إلى "text/event-stream"
تحديد عدم حفظ الصفحة في المخزن المؤقت
إخراج تاريخ الإرسال (يبدأ دائمًا بـ "data: ")
إخراج بيانات تحديث الصفحة
في المثال أعلاه، نستخدم حدث onmessage للحصول على الرسائل. ولكن يمكن استخدام أحداث أخرى:
| حدث | وصف |
| onopen | عند فتح الاتصال بالخادم |
| onmessage | عند استقبال رسالة |
| onerror | عند حدوث خطأ |