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

‫التعليم‬

‫‪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‬‬