IT5-8-9

‫التعليم‬

‫‪Server Sent Event-HTML5‬‬

‫مقدمة تعريفية‬

‫نعيش في وقتنا الحاضر في ظ ّل ثورة علم ّية ومعلومات ّية تجعل من عالم الويب الحديث عالم مليء بالتحديات‪ .‬حيث تبرز الكثير من‬
‫المتطلبات ومن ضمنها ان يكون تحميل صفحات الويب سريعا ويجب ان يكون المحتوى مفيد ومشوق ومحدث تلقائيا‪.‬‬
‫من المعروفانه في عالم الويب تستخدم لغة الـ ‪ HTML‬في أنشاء هيكلية صفحات الويب‪ ,‬وتستخدم الـ ‪ CSS‬لانشاء ثيم لهذه الصفحات‬
‫(حيث يشمل تحديد الخلفية‪ ,‬نوع النص‪ ,‬حجم النص والالوان‪ ,‬غيرها)‪.‬‬
‫أما لغة الـ (‪ )Java Script‬فهي المسؤولة عن جعل صفحات الويب تفاعلية (على سبيل المثال‪ :‬وجود رسوم متحركة معقدة او أزرار قابلة‬
‫للنقر وقوائم منبثقة وغيرها من الامور المشابهة)‪.‬‬
‫لدينا شيئان هما‪:‬‬
‫مثــال ‪ :‬لنفــرض انــه كل حزمــة مــن‬ ‫‪Data Pull . 2‬‬
‫البيانــات تحتــاج الــى ‪ 100ms‬لكــي تنتقــل‬ ‫‪ .١‬هيكلية الصفحة‬
‫بيــن ال ‪ server‬وال ‪. client‬‬ ‫هــي تقنيــة تقليديــة متوفــرة قبــل ال ‪SSE‬‬ ‫‪ .٢‬البيانات نفسها‬
‫حيـث تقـوم الصفحـة بعمـل طلـب بصـورة‬
‫‪ -‬فــي حالــة الــ ‪ data push‬ســوف يحصــل‬ ‫متكـررة ( كل عـدد معيـن مـن الثوانـي) الـى‬
‫‪ client‬علــى البيانــات بعــد ‪ 100ms‬مــن‬ ‫‪ server‬فيمـا اذا كان هنالـك بيانـات جديـدة‬ ‫بصورةعامـة عندمـا تكـون البيانـات محدثـة‬
‫ام لا‪ .‬ومثــال علــى ذلــك أســتخدام تقنيــات‬ ‫فالهيكليــة لاتحتــاج الــى تحيــث ومــن هنــا‬
‫حصــول ‪ server‬عليهــا ‪.‬‬ ‫ال ‪ AJAX HTTP Request‬لعمــل طلــب علــى‬ ‫جائــت الرغبــة الــى التفكيــر بأســتخدام‬
‫‪ -‬فـي حالـة الــ ‪ :data pull‬لنفـرض انـه ‪client‬‬ ‫بيانـات جديـدة و ُتعـرف هـذه الطريقـة بأنهـا‬ ‫تقنيــات تعمــل علــى تحديــث محتــوى‬
‫يقــوم بعمــل طلــب الــى ‪ server‬كل ‪,10s‬‬ ‫(‪ )Two-Way-Messaging‬حيــث يقــوم ‪client‬‬ ‫الصفحـة باسـرع وقـت وبصـورة اتوماتيكيـة‬
‫فبالتال ـي ســوف يحص ـل علــى البيان ـات بعــد‬ ‫بعمــل (‪ )request‬الــى ‪ server‬فــي الخطــوة‬ ‫بـدون الحاجـة الـى عمـل (‪ )reload‬للصفحـه‬
‫الاولـى‪ ,‬ومـن ثـم يرسـل ‪ server‬الاسـتجابة‬
‫(‪ ,)10s + 100ms‬أي بعــد (‪!)ms 10100‬‬ ‫لــه فــي الخطــوة الثانيــة وعــادة الاســتجابة‬ ‫مــن قبــل المســتخدم‪.‬‬
‫وبهــذا يمكــن الاســتنتاج بــأن قيمــة ال‬ ‫تكــون أمــا (‪ )New Data‬او فارغــة (‪empty‬‬ ‫ســوف نتحــدث فــي هــذا المقــال عــن‬
‫‪ latency‬فـي حالـة الــ ‪ data push‬تكـون أقـل‬ ‫‪ )Response‬فــي حالــة عــدم وجــود بيانــات‬ ‫أشــهر التقنيــات التــي تضمــن التأكــد مــن‬
‫• لايوجــد هــدر فــي أســتخدام المــوارد (‪CPU‬‬ ‫جديــدة‪ .‬الصــورة التاليــة توضــح عمــل ال‬ ‫أن الاشــخاص الذيــن يســتخدمون الموقــع‬
‫‪ .)cycle , Network Bandwidth‬بخــاف ال‬ ‫الالكترونــي علــى شــبكة الويــب يحصلــون‬
‫‪ ,data pull‬فلنفــرض فــي حالــة قيــام ال‬ ‫‪.data pull‬‬ ‫علــى محتــوى محــدث بصــورة تلقائيــة‬
‫‪ client‬بعمــل طلــب متكــرر للبيانــات‬ ‫وهـذه التقنيـات هـي علـى نوعيـن‪data push :‬‬
‫(كل عــدد معيــن مــن الثوانــي)‪ ,‬وفــي الواقــع‬ ‫او ماتعــرف بالــ (‪ )Server-sent-Event‬و الــ‬

‫‪.data pull‬‬

‫ال ‪ server‬لايملــك بيانــات جديــدة‪ ,‬ســوف‬ ‫‪Data Push . 1‬‬
‫يـؤدي ذلـك الـى هـدر فـي أسـتخدام المـوارد‬
‫وعمــل مزيــد مــن الطلبــات بــدون جــدوى‪.‬‬
‫• (‪ )automatic reconnection‬تقــوم الــ‬ ‫الــ ‪ data push‬او ‪)Server sent Event) SSE‬‬
‫‪ SSE‬باعــادة الاتصــال مــع ‪ server‬فــي حالــة‬ ‫و ُتعــرف علــى انهــا احــد تقنيــات ال ‪HTML5‬‬
‫والتــي تســمح لــل (‪ )server‬بأرســال بيانــات‬
‫انقطاعــه ‪.‬‬ ‫جديــدة (‪ )New Data‬مباشــرة الــى (‪,)client‬‬

‫أمثلة عن تطبيقات الكترونية تستخدم‬ ‫الصورة ‪Data pull :2‬‬ ‫وال ـذي يقص ـد ب ـه هن ـا صفح ـة الوي ـب‪ ,‬فف ـي‬
‫تقنية ال ‪ SSE‬‬ ‫هــذه التقنيــة يكــون أتجــاه نقــل البيانــات‬
‫‪Facebook / twitter updates‬‬ ‫‪ .1‬‬ ‫مميزات ‪Data Push/SSE‬‬ ‫مــن ‪ server‬الــى ‪ client‬كمــا موضــح فــي‬
‫مــن الملاحــظ انــه نتيجــة تطبيــق ِكلتــا‬ ‫الصــورة التاليــة بــدون الحاجــة الــى انتظــار‬
‫‪Chat Application‬‬ ‫‪ .2‬‬ ‫التقنيتيــن تــؤدي فــي النهايــة الــى حصــول‬ ‫طلـب (‪ )request‬مـن (‪ .)client‬وعـادة يطلـق‬

‫‪Online Game‬‬ ‫‪. 3‬‬ ‫عليهــا (‪)One-Way Messaging‬‬

‫‪News feed‬‬ ‫‪. 4‬‬

‫‪Sport results‬‬ ‫‪. 5‬‬

‫‪ client‬علـى بيانـات جديـدة ‪ New Data‬وبـدون‬
‫عمــل ‪ reload‬للصفحــة‪.‬‬
‫‪.‬ولكــن الجديــر بالذكــر أن ال ‪data push‬‬
‫تمتلــك بعــض المميــزات وهــي‪:‬‬
‫• ســرعة حصــول ال ‪ client‬علــى البيانــات‬
‫الجديــدة ‪,‬حيــث تكــون ال ‪ latency‬قليلــة‬
‫جــدا‪.‬‬

‫الصورة ‪Data push :1‬‬

‫زينب سالم علوان‬ ‫‪8‬‬

‫التعليم‬

‫دعم المتصفحات (‪ )browsers‬لتقنية ال ‪SSE‬‬

‫اسم المتصفح‬ ‫‪chrome‬‬ ‫‪Firefox‬‬ ‫‪Opera‬‬ ‫‪Internet Explorer‬‬ ‫‪Safari‬‬
‫رقم النسخة‬ ‫‪6.0‬‬ ‫‪6.0‬‬ ‫‪11.5‬‬ ‫‪x‬‬ ‫‪5.0‬‬

‫ملاحظة‪ :‬رقم النسخة في الجدول اعلاه يمثل رقم اول نسخة من اصدار المتصفح التي تدعم بصورة كاملة الـ ‪.SSE‬‬

‫قليلــة كان مــن الافضــل أســتخدام الــ‬ ‫مثال برمجي‪:‬‬
‫‪.S SE‬‬ ‫كمــا ذكرنــا ســابقا انــه عنــد أســتخدام تقنيــة ال ‪ SSE‬ســوف يحصــل الــ ‪ client‬بصــورة‬
‫اوتوماكيـة علـى البيانـات الجديـدة مـن قبـل الــ ‪ server‬بـدون ارسـال (‪ )request‬لـل ‪server‬‬
‫• كــم مــرة يتطلــب ارســال بيانــات جديــدة‬
‫للمســتخدم؟ فكلمــا كان الرقــم كبيــر‬ ‫ولكـي يتحق ـق ذل ـك يج ـب تتبـع الخط ـوات التالي ـة‪:‬‬

‫كلمــا كان الافضــل أســتخدام ال ‪.SSE‬‬ ‫• وبهــذا يتــم اســتقبال البيانــات الجديــدة‬ ‫‪:Server-side code .1‬‬
‫• هـل توفـر بيانـات جديـدة علـى ال (‪)server‬‬ ‫وعرضهــا علــى الصفحــة‪ ,‬فــي العنصــر الــذي‬
‫بصــورة ﻟﯾﺳت ﺎﻧدرة إﻟﯽ ﺣد ﺎﻣ وﻟﮐﻧﮭﺎ ﺣﺗدث‬ ‫يمتلــك ‪ id‬مســاويا الــى «‪ »result‬فــي جهــة‬ ‫لكــي يرســل الــ ‪ server‬البيانــات الجديــدة‬
‫أﯾﺎ ًﺿ ﻲﻓ أوﺎﻗت ﺗﻣوﺔﻌﻗ؟ (مثــا هنالــك‬ ‫يجــب ان توجــد صفحــة ولتكــن صفحــة‬
‫رســالة او تنبيــه فــي وقــت معيــن ونريــد‬ ‫ال ‪client‬‬ ‫‪ PHP,ASP‬تك ـون مهمته ـا أرسـال البيان ـات‬
‫ان يتــم اســتلامه مــن جميــع المشــتركين‬ ‫كماموضح في الصورة التالية‪:‬‬ ‫الجديــدة حــال توفرهــا الــى ‪ ,client‬ففــي هــذا‬
‫فــي الموقــع الاكترونــي فــي ذلــك الوقــت)‪,‬‬ ‫المثــال لنفــرض رابــط هــذه الصفحــة هــو‬
‫فالافضــل فــي هــذه الحالــة أســتخدام الــ‬ ‫>‪<script‬‬ ‫« ‪.»demo_sse.php‬‬
‫‪ AJAX‬لعمــل طلــب (‪ )request‬قبــل البــدء‬ ‫_‪var source = new EventSource(«demo‬‬
‫بنشــر البيــان بثوانــي‪ ,‬وبعــد اســتلامه يتــم‬ ‫;)»‪sse.php‬‬ ‫ويجب تحديد مايلي في كود هذه الصفحة‪:‬‬
‫غلــق الاتصــال مــع الــ ‪ .server‬اذا لايوجــد‬ ‫{ )‪source.onmessage = function(event‬‬ ‫يجــب ان تكــون ال ‪content-Type‬‬ ‫ •‬
‫داعـي لجعـل الاتصـال مفتـوح طيلـة الوقـت‬
‫بأنتظــار الــ ‪ server‬لانــه ســوف يــؤدي الــى‬ ‫‪document.getElementById(«result»).‬‬ ‫‪Text/event-stream‬‬ ‫هــي‬
‫هــدر فــي أســتخدام المصــادر (‪Machine‬‬ ‫;»>‪innerHTML += event.data + «<br‬‬
‫;}‬ ‫يجــب تحديــد ال ‪cache-control‬‬ ‫ •‬
‫‪. )R e s o u r c e‬‬ ‫>‪</script‬‬
‫عزيــزي القــار ْى فــي نهايــة هــذا المقــال أود‬ ‫لتكــون « ‪.»no-cache‬‬
‫ان ألفــت أنتباهــك الــى انــه هنالــك الكثيــر‬ ‫البيانــات المرســلة يجــب ان تبــدأ‬ ‫ •‬
‫مــن الامــور تخــص التقنيتيــن (‪data push‬‬
‫و ‪ )data pull‬ويجــب التفكيــر جيــدا قبــل‬ ‫بعبــارة «‪.»:data‬‬
‫اختيــار الطريقــة المناســبة لتطبيقــك ‪.‬‬ ‫أسـتخدام ‪ )(flush‬لارسـال البيانـات‬ ‫• ‬
‫وكمــا أشــرت فــي البدايــة عالــم الويــب‬
‫ملـيء بالتحديـات وهـذه التحديـات كثيـرا مـا‬ ‫الــى ‪.client‬‬
‫يواجههــا المبرمــج أثنــاء برمجــة المواقــع‬
‫الالكترونيـة‪ ,‬فلـذا أنصحـك بأعتمـاد الكتـاب‬ ‫أما نتيجة تنفيذ هذا المثال تكون بالشكل‬ ‫‪<?php‬‬
‫التالــي كمرجــع ق ًيــم ومفيــد لمواجهــة اي‬ ‫التالي‪:‬‬ ‫‪header(‹Content-Type: text/event-‬‬
‫تحـدي أثنـاء أسـتخدام ‪ SSE‬حيـث أعتمدتـه‬ ‫;)›‪stream‬‬
‫أنــا خــال كتابتــي لهــذا المقــال‪ ,‬وعنــوان‬ ‫;)›‪header(‹Cache-Control: no-cache‬‬

‫هــذا الكتــاب هــو‪:‬‬ ‫‪The server time is: Mon, 09 Jul 2018‬‬ ‫;)›‪$time = date(‹r‬‬
‫«‪»SSE Data Push App with HTML5‬‬ ‫‪0400- 18:29:57‬‬ ‫\}‪echo «data: The server time is: {$time‬‬
‫‪The server time is: Mon, 09 Jul 2018‬‬ ‫;»‪n\n‬‬
‫‪0400- 18:30:00‬‬ ‫;)(‪flush‬‬
‫‪The server time is: Mon, 09 Jul 2018‬‬ ‫>?‬
‫‪0400- 18:30:04‬‬
‫‪The server time is: Mon, 09 Jul 2018‬‬
‫‪0400- 18:30:07‬‬

‫وبصورة مستمرة‬ ‫‪Client- side code . 2‬‬
‫عزيــزي القــار ْى بعــد ان أســتعرضنا تعاريــف‬ ‫أمــا عنــد الصفحــة فــي جهــة ال ‪client‬‬
‫ِكلتــا التقنيتيــن وعرفنــا ماهــي مميــزات‬
‫‪ ,SSE‬هنالــك أمــور يجــب ان ُتأخــذ بنظــر‬ ‫فيجــب تعريــف مايلــي ‪:‬‬
‫الاعتبـار قبـل ان تقـرر فيمـا اذا كانـت الـ ‪SSE‬‬ ‫• نقــوم بتعريــف متغيــر مــن نــوع ‪Event‬‬
‫هــي الخيــار الانســب والاصــح لتطبيقــك‪,‬‬ ‫‪ Source Objects‬داخــل كــود ال ‪java script‬‬
‫وطبعــا هــذا كلــه يعتمــد علــى طبيعــة‬ ‫ومهمـة هـذا المتغيـر هـو اسـتلام الاشـعار‬

‫التطبيــق فمثــا‪:‬‬ ‫مــن الــ ‪server‬‬
‫• هــل مســألة وقــت اســتلام البيانــات مــن‬ ‫• نقــوم بتحديــد الرابــط الخــاص بالصفحــة‬
‫قبــل المســتخدم ضروريــة ام لا؟ اي يجــب‬ ‫‪,‬وهــي صفحــة («‪ ,)»demo_sse.php‬التــي‬
‫التفكيــر فــي (‪ )latency‬فكلمــا كانــت‬ ‫ســوف تقــوم بأرســال البيانــات الجديــدة‪.‬‬
‫• كلمـا يتـم اسـتلام تحديـث مـن ال ‪server‬‬

‫سـوف يتـم تفعيـل ال ‪onmessage event‬‬

‫زينب سالم علوان ‪9‬‬