HTML5 Server Push_motic Node Java College

بالنسبة لتطبيقات الويب العامة ، فإن معظم المطورين ليسوا غريبين. في تطبيقات الويب ، يتم استخدام الوضع التفاعلي للطلب/ الاستجابة بين المتصفح والخادم. يصدر المتصفح طلبًا ، ويقوم الخادم بإنشاء الاستجابة المقابلة وفقًا للطلب. تتم معالجة المتصفح للاستجابة المستقبلة للمستخدمين. قد يكون تنسيق الاستجابة HTML أو XML أو JSON. مع نمط بنية الراحة وشعبية AJAX ، يستخدم الخادم JSON كتنسيق بيانات استجابة أكثر. يستخدم تطبيق الويب كائن XMLHTTPrequest لإرسال الطلب وتحديث محتوى الصفحة بشكل ديناميكي وفقًا للبيانات التي يتم إرجاعها بواسطة الخادم. بشكل عام ، ستؤدي عمليات المستخدمين على الصفحة ، مثل النقر فوق أو نقل الماوس ، إلى تشغيل الأحداث المقابلة. يتم إصدار طلب من كائن XMLHTTPrequest ، ولها الصفحة تحديث محلي بعد استجابة الخادم. أوجه القصور في هذه الطريقة هي أنه لا يمكن إخطار البيانات التي تم إنشاؤها بواسطة الخادم بالمتصفح في الوقت المناسب ، ولكن يجب الحصول عليها من قبل المتصفح حتى يتم إرسال الطلب التالي. بالنسبة لبعض التطبيقات ذات متطلبات بيانات الوقت العالي ، فإن هذا التأخير غير مقبول. من أجل تلبية احتياجات هذه التطبيقات ، هناك حاجة لبعض الطرق لدفع البيانات من الخادم إلى المتصفح للتأكد من أنه يمكن إخطار المستخدمين على جانب الخادم للمستخدمين في المرة الأولى. هناك العديد من الحلول الشائعة ، والتي يمكن تقسيمها إلى فئتين. الفرق بين هاتين الطريقتين هو ما إذا كان يعتمد على بروتوكول HTTP. تتمثل ممارسة عدم استخدام بروتوكول HTTP في استخدام مواصفات WebSocket الجديدة لـ HTML 5 ، وتشمل طريقة استخدام بروتوكول HTTP دوران بسيط ، وتقنية المذنب ، وحدث Push Server HTML 5 الموضح في هذه المقالة. سيتم تقديم هذه التقنيات أدناه.

قبل تقديم حدث Push Server HTML 5 ، قدم أولاً بعضًا من عدد تقنية دفع بيانات الخادم المذكورة أعلاه. الأول هو WebSocket. تعد مواصفات WebSocket جزءًا مهمًا من HTML 5. وقد تم دعمها من قبل العديد من المتصفحات الرئيسية ، والعديد من التطبيقات التي تم تطويرها على أساس WebSocket. مثلما يتم التعبير عن الاسم ، يستخدم WebSocket اتصال سترة ، استنادًا إلى بروتوكول TCP. بعد استخدام WebSocket ، يقوم بالفعل بإنشاء مجموعة من اتصالات الكلمات بين الخادم والمتصفح ، والتي يمكن إرسالها في بيانات طريقين. وظيفة WebSocket قوية للغاية ، وهي مرنة للاستخدام ، والتي يمكن أن تكون مناسبة لسيناريوهات مختلفة. ومع ذلك ، فإن تقنية WebSocket معقدة نسبيًا ، بما في ذلك تنفيذ الخادم وجانب المتصفح يختلف عن تطبيقات الويب العادية.

باستثناء WebSocket ، تعتمد طرق التنفيذ الأخرى على بروتوكول HTTP لتحقيق تأثير الدفع الحقيقي. الطريقة الأولى هي دوران بسيط ، أي أن المتصفح يرسل طلبًا إلى الخادم من وقت لآخر للاستعلام عما إذا كان هناك تحديث للبيانات. هذا النهج بسيط نسبيًا ويمكنه حل المشكلة إلى حد ما. ومع ذلك ، النظر بعناية الفاصل الزمني للدوران. إذا كان الفاصل الزمني بين الدوران طويلًا جدًا ، فسيؤدي ذلك إلى عدم تلقي المستخدمين البيانات المحدثة في الوقت المناسب ؛

حسنت تقنية المذنب أوجه القصور في الدوران البسيط ، وذلك باستخدام استفسارات طويلة العجلات. كل طلب لتدوير طويل ، سيحتفظ الخادم بالاتصال في فترة الفتح لفترة من الوقت ، بدلاً من إغلاقه فور اكتمال الاستجابة. ميزة ذلك هي أنه خلال الفترة الزمنية التي يتم فيها فتح الاتصال ، يمكن إرجاع تحديث البيانات الذي تم إنشاؤه بواسطة الخادم إلى المتصفح في الوقت المناسب. عند إغلاق اتصال طويل ، سيفتح المتصفح على الفور اتصالًا طويلًا جديدًا لمواصلة الطلب. ومع ذلك ، يتطلب تنفيذ تقنية المذنب دعم مكتبة ثالثة على الخادم وجانب المتصفح. في المقارنة الملخص ، لا ينصح بالتقنيات الأربعة المختلفة المذكورة أعلاه للاستخدام بسبب عيوبها. تقنية المذنب ليست جزءًا من معيار HTML 5. تعد مواصفات WebSocket وتكنولوجيا الدفع جزءًا من معيار HTML 5. ومع ذلك ، فإن مواصفات WebSocket أكثر تعقيدًا وهي مناسبة للمشاهد التي يجب أن تكون معقدة واتصال بيانات اثنين. لسيناريوهات دفع بيانات الخادم البسيطة ، يكفي استخدام أحداث دفع الخادم.

فيما يتعلق بدعم المتصفح ، تم دعم أحداث دفع الخادم على معظم أجهزة الكمبيوتر المكتبية ومتصفحات الهاتف المحمول باستثناء أي. تشمل المتصفحات والإصدارات من حدث دفع خادم الدعم: Firefox 6.0+ ، Chrome 6.0+ ، Safari 5.0+ ، Opera 11.0+ ، IOS Safari 4.0+ ، Opera Mobile 11.1+ ، Chrome for Android 25.0+ ، Firefox for Andr Andr Oid 19.0 + و BlackBerry Browser 7.0+ وآخرون. دعم IE لديه مقدمة مفصلة في الفصول التالية.

يتم تحديد المواصفات التالية لمواصفات حدث دفع الخادم.

تعد مواصفات أحداث Server-Sent جزءًا لا يتجزأ من مواصفات HTML 5. هذه المواصفات بسيطة نسبيًا ، وتتألف بشكل أساسي من جزأين: الجزء الأول هو بروتوكول الاتصال بين الخادم وجانب المتصفح ، والجزء الثاني هو كائن Seventsource الذي يستخدمه المتصفح لاستخدام JavaScript. بروتوكول الاتصال هو بروتوكول بسيط يعتمد على نص نقي. محتوى الاستجابة على الخادم هو نص/حدث. يمكن اعتبار محتوى نص الاستجابة بمثابة تدفق للحدث ، والذي يتكون من أحداث مختلفة. يتكون كل حدث من جزأين: الكتابة والبيانات ، ويمكن أن يكون لكل حدث معرف اختياري. يتم فصل محتوى الأحداث المختلفة بالخطوط الفارغة (/r/n) التي تتضمن فقط إدخال السيارة والرمز الملكي. قد تتكون بيانات كل حدث من خطوط متعددة. تعطي قائمة الكود 1 مثالًا على استجابة الخادم.

 البيانات: First eventdata: Second EventId: 100esent: myeventdata: Third EventId: 101: هذا CommentData: fouteh eventdata: Fours event event

كما هو موضح في القائمة 1 ، يتم فصل كل حدث بخط فارغ. لكل سطر ، القولون (:) هو نوع الخط من قبل ، والقيمة المقابلة وراء القولون. تشمل الأنواع الممكنة:

1. النوع فارغ ، يشير إلى أن الخط هو تعليق وسيتم تجاهله أثناء المعالجة.
2. النوع هو بيانات ، مما يعني أن الخط يحتوي على بيانات. يمكن أن يظهر عدة مرات في بداية البيانات. كل هذه الخطوط هي بيانات الحادث.
3. النوع هو حدث ، يشير إلى أن البنك يستخدم لإعلان نوع الحدث. عند استلام البيانات ، سينتج المتصفح نوعًا مقابلًا من الحدث.
4. النوع هو معرف ، يشير إلى أن الخط يستخدم لإعلان معرف الحدث.
5. النوع هو إعادة المحاولة ، مما يشير إلى أن الخط يستخدم لإعلان وقت الانتظار قبل توصيل المتصفح بعد فصل الاتصال.

في الكود أعلاه ، يحتوي الحدث الأول على الحدث الأول ، والذي سيؤدي إلى إنشاء أحداث افتراضية ؛ الحدث هو الحدث أربع/NFOUNTH EOVENT يستمر. عندما يكون هناك عدة خطوط من البيانات ، يتم توصيل البيانات الفعلية بواسطة البيانات لتغيير السطر.

إذا كانت البيانات التي يتم إرجاعها بواسطة الخادم تحتوي على معرف الحدث ، فسيقوم المتصفح بتسجيل معرف الحدث الذي تم استلامه مؤخرًا. إذا تمت مقاطعة الاتصال بالخادم ، عند توصيل نهاية المتصفح مرة أخرى ، يتم الحصول على شعار آخر مرة يتم فيها الحصول على الحدث بواسطة معرف HTTP. يمكن تحديد الخادم بواسطة معرف الحدث الذي أرسله جانب المتصفح لتحديد الحدث الذي يبدأ في متابعة الاتصال.

للاستجابة التي يتم إرجاعها بواسطة جانب الخادم ، يحتاج جانب المتصفح إلى استخدام كائن Eventsource في JavaScript للمعالجة. يستخدم Evensource طريقة مراقبة الأحداث القياسية ، والتي تحتاج فقط إلى إضافة طريقة معالجة الأحداث المقابلة إلى الكائن. يوفر Eventsource ثلاثة أحداث قياسية ، كما هو موضح في الجدول 1.

كما ذكرنا سابقًا ، يمكن للخادم إرجاع حدث نوع مخصص. بالنسبة لهذه الأحداث ، يمكنك استخدام طريقة AddEventListener لإضافة طريقة معالجة الأحداث المقابلة. تعطي قائمة الكود 2 مثالًا على كائن eventsource.

 var es = eventsource new ('events') ؛ بيانات)؛})؛

كما هو موضح أعلاه ، بعد إنشاء كائن eventsource على وجه التحديد ، يمكن إضافة طريقة معالجة الأحداث من خلال أساليب onMessage و AddEventListener. عندما يكون للخادم أحداث جديدة ، سيتم استدعاء طريقة معالجة الأحداث المقابلة. يشبه دور خاصية onMessage لكائن eventsource دور AddEventListener ('message') ، لكن سمة onMessage تدعم طريقة معالجة الأحداث فقط. بعد تقديم محتوى المواصفات لحدث دفع الخادم ، يتم تقديم تنفيذ الخادم أدناه.

يمكن رؤيته من وصف بروتوكول الاتصال في القسم السابق أن حدث دفع الخادم هو بروتوكول أبسط. تطبيق جانب الخادم بسيط نسبيًا. يمكن العثور على مجموعة متنوعة من تقنية جانب الخادم المختلفة في مجتمع المصدر المفتوح. ليس من الصعب تطوير نفسها. تستخدم هذه المقالة Java كلغة تنفيذ للخادم. في المقابل ، قم بتنفيذ مشروع Eventsource-Servlet مفتوح المصدر ، انظر الموارد المرجعية. فيما يلي مثال محدد لتوضيح كيفية استخدام مشروع Servlet-Eventsource-Servlet. يتم استخدام المثال لمحاكاة الحركة العشوائية للكائن في مساحة محدودة. يبدأ الكائن من موضع عشوائي ، ثم يختار بشكل عشوائي اتجاه واحد من الاتجاهات العلوية والأسفل واليسار واليمين ، ويحرك مسافة عشوائية في هذا الاتجاه. يقوم الخادم بتغيير موضع الكائن باستمرار ودفع معلومات الموقع إلى المتصفح ، والذي يتم عرضه بواسطة المتصفح.

： ： 一部分是用来产生数据的 org.eclipse.jetty.servlets.eventsource 接口的实现 另一部分是作为浏览器访问端点的继承自 org.eclipse.jetty.servlets.eventsourceServlet 类的تنفيذ servlet. يعطي الرمز التالي فئة تنفيذ لواجهة EventSource.

EventSource واجهة التنفيذ Movementeventsource

 MovementSource Public Eventsource {private int logger. getClass (). getName () ؛ .nextint (العرض) ؛ (LastEventId) ؛ .split (،) ؛ POS [1] ، 10) ؛} catch (numberFormatexception e) {} if (isValidMove (xpos ، ypos)) {x = xpos ؛ المعلومات.) .DATA (معرف) وفقًا للموقع ؛ ، هـ) ؛ Move = GetMove () ؛ الحكم على ما إذا كان موضع الحركة الحالي قانونيًا. XDIR = new int} ؛ )} ؛}}

يحتاج Movementeventsource إلى تنفيذ طريقة Onresume و OnClose لواجهة Eventsource. تحتوي كل من أساليب OnoPen و Onresume على معلمة من واجهة eventsource.emitter ، والتي يمكن استخدامها لإرسال البيانات. تتضمن الطرق الواردة في eventsource.emitter بيانات البيانات والحدث والتعليق والمعرف والإغلاق ، والتي تتوافق مع أنواع مختلفة من الأحداث في بروتوكول الاتصال ، على التوالي. تحتوي طريقة OnResume أيضًا على معلمة إضافية LastEventId ، مما يشير إلى معرف أحدث حدث أرسله رأس المعرف الأخير.

المنطق الرئيسي للأحداث التي تم إنشاؤها في الحدث في فئة MovementEventsource في طريقة الاستعلام. تحتوي هذه الطريقة على دورة غير محدودة تغير الموضع كل ثانيتين ، وفي الوقت نفسه ، أرسل الموضع المحدث إلى نهاية المتصفح من خلال طريقة بيانات موضع التحديث من خلال طريقة البيانات الخاصة بواجهة eventsource.emitter. كل حدث له معرف مقابل ، وقيمة المعرف هي الموضع نفسه. إذا تم إعادة ربط المتصفح بعد فصل الاتصال ، فيمكن نقل الكائن من الموضع الأخير.

من السهل تنفيذ خدمة الخدمة -المقابلة لفئة Movementeventsource. في تنفيذ طريقة Neweventsource ، يجب إرجاع فئة MovementEventsource ، كما هو موضح أدناه. كلما تم إنشاء المتصفح ، تنشئ الخدمة كائنًا لفئة MovementEventsource جديدة للتعامل مع الطلب.

 تحركات الطبقة العامة seventervlet extendsorceservlet {Override المحمية eventsource newssource (httpservletrequest ، string clientId) إرجاع حركة جديدة (800 ، 600 ، 20) ؛}}

في تطبيق الخادم ، تجدر الإشارة إلى أنه ينبغي إضافة دعم مرشح الخادم المقابل. هذا هو متطلبات إطار التواصل الرصيف الذي يعتمد عليه مشروع Servent-Servlet الرصيف ، وإلا فستكون هناك أخطاء في الحالة. تتمثل طريقة إضافة مرشح في إضافة محتوى التكوين كما هو موضح أدناه في ملف web.xml.

 <Ivilter> <ilter-name> استمرار </filter-name> <lipter-class> org.eclipse.jetty.continuation.continuationFilter </filter-class> </filter> <filter-ma pping> <filter-name> استمرار </filter-name> <url-pattern>/sse/*</url-pattern> </filter-mapping>

إن تنفيذ جانب المتصفح بسيط نسبيًا. الرمز التالي يعطي التنفيذ المقابل. استخدم مربعًا على الصفحة لتمثيل كائن. عند استلام حدث جديد ، يكون موضع الكتلة على الصفحة وفقًا لمعلومات الإحداثيات الواردة في بيانات الحدث.

 var es = new eventsource ('sse/movement') ؛ [1] ؛

بعد تقديم جانب الخادم الأساسي وإنهاء المتصفح ، يتم تقديم دعم IE الأكثر أهمية أدناه.

مشكلة كبيرة باستخدام كائن الأحداث الأصلي للمتصفح هي أن IE لا توفر الدعم. من أجل تقديم نفس الدعم على IE ، هناك عمومًا طريقتين. الطريقة الأولى هي استخدام كائن Eventsource الأصلي على متصفحات أخرى ، مع استخدام تقنية التناوب البسيطة أو المذنب على IE ؛ . تستخدم هذه المقالة تقنية polyfill ، فقط تحميل مكتبة JavaScript ثالثة على الصفحة. لا يلزم تغيير رمز الجانبية للمتصفح. يوصى عمومًا باستخدام طريقة ثانية ، لأنه بهذه الطريقة ، هناك حاجة إلى تقنية تنفيذ واحدة فقط على جانب الخادم.

ليس من السهل توفير كائن أحداث أولي مماثل على IE. من الناحية النظرية ، هناك حاجة فقط إلى كائن XMLHTTPrequest للحصول على محتوى الاستجابة لجانب الخادم ، ومن خلال تحليل النص ، يمكن استخراج الأحداث المقابلة ويمكن تشغيل طريقة معالجة الأحداث المقابلة. المشكلة هي أن كائن XMLHTTPrequest على IE لا يدعم محتوى الاستجابة للجزء الحصول على. فقط بعد اكتمال الاستجابة يمكن الحصول عليها. لأن حدث دفع الخادم يستخدم اتصالًا طويلًا. عندما يكون الاتصال دائمًا مفتوحًا ، لا يمكن تشغيل الحدث المقابل من خلال كائن XMLHTTPrequest ، ولا يمكن تشغيل الحدث المقابل. وبشكل أكثر تحديدًا ، عندما تكون readystate لكائن xmlhttprequest 3 (ReadyState_Interactive) ، لا يمكن الحصول على سمة BesponseText.

من أجل حل مشكلة كائنات xmlhttprequest على IE ، تحتاج إلى استخدام كائن XdomainRequest الذي تم تقديمه في IE 8. يتمثل دور كائن XdomainRequest في إرسال طلب Ajax متقاطع. يوفر كائن XdomainRequest حدث OnProgress. عند حدوث حدث OnProgress ، يمكن الحصول على بعض محتوى الاستجابة من خلال خاصية BesponseText. هذا هو الفرق الأكبر بين كائن XdomainRequest وكائن XMLHTTPrequest. بعد استخدام كائن XDOMAINREQUEST لفتح الاتصال بجانب الخادم ، عندما يتم إنشاء البيانات الجديدة على الخادم ، يمكن معالجتها بواسطة حدث OnProgress لكائن XDOMAINREQUEST.

ومع ذلك ، نظرًا للغرض الأصلي من كائن XdomainRequest هو إصدار طلبات Ajax المتقاطعة. ستؤثر هذه القيود على تنفيذها ككائن أحداث. وترد أدناه القيود والحلول المحددة:

1. تحتاج استجابة الخادم إلى احتواء رأس Access-Control-Oppin-Arigin ، والذي يتم استخدامه لإعلان ما هو عنوان URL المسموح به من المجالات للسماح بها. *يعني السماح بالوصول من أي مجال ، ولا ينصح بهذه القيمة. استخدم بشكل عام نفس المجال مثل التطبيق الحالي ، حيث تقيد الوصول فقط من المجال الأمامي.
2. لا يمكن أن يحتوي الطلب من كائن XdomainRequest على رأس HTTP مخصص ، والذي يحد من معرف المتصفح الذي تم استلامه مؤخرًا بواسطة المتصفح. لا يمكن تمرير هذا المعرف إلا من خلال طرق أخرى لطلبات HTTP ، مثل المعلمات المطلوبة عن طريق GET أو محتوى محتوى طلب البريد.
3. لا يمكن أن يكون نوع المحتوى (نوع المحتوى) لكائن XdomainRequest فقط نصًا/عاديًا. هذا يعني أنه عند استخدام طلب النشر ، فإن الإطار الذي يستخدمه الخادم ، مثل الخدمة ، لن يحلل تلقائيًا محتوى الطلب. لا يمكن تحليل محتوى الطلب الأصلي إلا على الخادم للحصول على قيم المعلمات.
4. لا يتضمن الطلب الصادر عن كائن XdomainRequest أي معلومات تتعلق بمصادقة المستخدم ، بما في ذلك ملفات تعريف الارتباط. هذا يعني أنه إذا احتاج الخادم إلى المصادقة ، فإن طرقًا أخرى من HTTP تطلب تمرير معلومات مصادقة المستخدم ، مثل معرف الجلسة.

نظرًا لهذه القيود على كائن XdomainRequest ، يحتاج تنفيذ الخادم أيضًا إلى إجراء تغييرات مماثلة. تتضمن هذه التغييرات إرجاع رأس الوصول إلى الأصل ؛

مكتبة Polyfill المستخدمة في هذه المقالة هي مشروع Eventsource الذي تم تطويره بواسطة Yaffle على Github. بعد استخدام مكتبة Polyfill وتعديل تنفيذ جانب الخادم ، يمكنك استخدام الخادم لدفع الحدث في المتصفح IE 8 وما فوق. إذا كنت بحاجة إلى دعم IE 7 ، فيمكنك فقط استخدام استفسار بسيط أو تقنية المذنب. راجع الموارد المرجعية في رمز المثال لهذه المقالة.

إذا كنت بحاجة إلى دفع البيانات من الخادم إلى المتصفح ، فإن التقنيات التي يمكن استخدامها بناءً على معايير مواصفات HTML 5 تتضمن أحداث WebSocket و Server. يمكن للمطورين اختيار التكنولوجيا المناسبة وفقًا للاحتياجات المحددة للتطبيق. إذا كنت بحاجة فقط إلى دفع البيانات من الخادم ، فإن معيار حدث دفع الخادم هو أبسط وأسهل تحقيقه. قدمت هذه المقالة المحتوى القياسي لحدث دفع الخادم ، وتنفيذ الخادم وجانب المتصفح بالتفصيل ، وكذلك تحليل كيفية دعم متصفح IE.