Page 9 - الاصدار الخامس IT مجلة طموح

‫التعليم‬

‫دعم المتصفحات (‪ )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‬‬