عميل HTML + JS لنظام مراقبة الخط

في Geektimes ، غالبًا ما ألتقي وأستمتع بقراءة المنشورات من سلسلة DIY. بعد أن قررت تقديم مساهمة صغيرة لخزينة الخبرة القيمة التي تم جمعها هنا ، سأصف بالتفصيل عملية إنشاء عميل للويب بناءً على خوادم Line.

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

هذه المقالة هي مثال حقيقي لكيفية كتابة ، أنا مستخدم لديه معرفة أولية بـ JS ، HTML ، تطبيقي الخاص الذي ينفذ المبادئ الأساسية للعمل مع خوادم Line من خلال خادم الويب المدمج.

بيانات الإدخال

المؤلف هو مبتدئ في تطوير عميل HTML ، ويشارك في تطوير نظام المراقبة بالفيديو Line.
مستوى المعرفة بـ JS و HTML - الأولي.
تتمثل المهمة في كتابة عميل HTML للعمل مع الأجهزة المستندة إلى برنامج Line باستخدام المواصفات من الموقع.

سأكشف عن المؤامرة الرئيسية على الفور - توصلت إلى استنتاجين:

1. المواصفات حقيقية ، تم وصفها بوضوح تام ، يمكنك كتابة عميل باستخدام C ++ ، PHP.
2. لا يمكنك كتابة عميل HTML كامل باستخدام JS فقط - فقط المراقبة عبر الإنترنت وفقًا للمواصفات قبل RPC.

الاستنتاج الأول منطقي تمامًا ، نظرًا للعدد الكبير من عمليات التكامل مع برامج الجهات الخارجية. كلهم موصوفون على الموقع: هناك أنظمة التحكم في الوصول والوزن وأنظمة نقاط البيع وبرامج لتحديد أرقام السيارات و 1 C.

الاستنتاج الثاني أكثر إثارة للاهتمام ، فكر فيه أدناه.

لماذا لا يمكنك إنشاء عميل كامل بتنسيق HTML + JS؟

الإجابة: الطلبات عبر النطاقات.

في الوقت الحالي ، يعد خادم الويب للخط محدودًا ، ولا يمكن الحصول على الدخول بمجرد نسخ الرمز إلى مجلد www. ومع ذلك ، يعد المطورون بأنه في الإصدار الجديد لنظام Linux وفي "Line 8.0" ، سيعمل خادم الويب كمعيار: في حالة الطلب ، إذا كان هناك ملف ، فسوف يعيده.

الآن قم بإنشاء مشروع جديد وابدأ الترميز. مثل جميع الوافدين الجدد على البرمجة للويب ، مع تحديد أن خادم "الخطوط" يجيب "*" في رأس Access-Control-Allow-Origin ، بدأت العمل بجد على الشفرة ، والتحقق من النتيجة على Firefox 57.0.4 (64 بت). تم إرسال الطلبات إلى الخادم بواسطة XMLHttpRequest.

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

في وقت كتابة هذه السطور ، لا تسمح المستعرضات الرئيسية الأربعة الرئيسية بقراءة الرؤوس المستلمة من الخادم. وفقًا للمواصفات ، من الضروري تنفيذ مصادقة Digest ، وهو أمر مستحيل بدون رؤوس.

بحلول نهاية اليوم الأول ، أدركت أنه بدون إضافة معالجة OPTIONS إلى خادم الويب للخط ، لن يعمل أي شيء ، نظرًا للطلبات التي تحتوي على طريقة "صعبة" أو رؤوس خاصة ، يقوم المتصفح بإجراء طلب مسبق OPTIONS ، مشيرًا إليها في Access-Control-Request-Method ورؤوس طلب التحكم في الوصول. لذلك بدأت في البحث عن خيارات تفويض أخرى ، لكن Basic أو Digest الحقيقيين لم ينطلقوا.

وقد تم بالفعل وصف طريقة بديلة في المواصفات ، وبقي لقضاء بعض الوقت في المراسلات مع قسم برنامج "الخطوط". نظرًا لأن مثل هذه الصعوبات لا تنشأ للمرة الأولى ، فهناك بالفعل عكاز للترخيص ، وقد تم ذكره حتى في المواصفات:

بالنسبة للعملاء الذين يستحيل اعتماد الطلب باستخدام الوسائل القياسية (HTTP Digest / Basic Authentication) ، يمكن إرسال رأس التفويض باستخدام أحد معلمات الطلب ، على سبيل المثال
/kfd3ado1sdrms/streaming/main.flv؟authorization=Basic٪20d2ViOg==

بعد كل التلاعبات ، بدأ تنفيذ الطلب القياسي عبر النطاقات بشكل صحيح! من الضروري أيضًا إضافة رأس قبول بالنوع الصحيح إلى الطلب - قررت استخدام JSON.

رمز الطلب:

function get_request_url(method,current_server_data, resource, additional){ var request = current_server_data.server_ip + ':' +current_server_data.port +resource+'?authorization=Basic '+ utf8_to_b64(current_server_data.user+':'+current_server_data.password); if (additional != '' && typeof additional != "undefined") { request += '&' + additional; } return request; } function http_request_of_resource (server_index , resource, auth_attempt) { var request = get_request_url('GET', servers_array[server_index], resource,''); var req_ = new XMLHttpRequest(); req_.open('GET', 'http://'+ request, true); //req_.timeout = 9000; //  ,    req_.onreadystatechange = function() { if (this.readyState == 2) { if (this.status == 401) { //console.log('---unauthorized'); hideModal(); update_nessecary_structure(resource, 'unauthorized', server_index); } } else if (this.readyState === 4) { if (this.status === 0) { hideModal(); update_nessecary_structure(resource, 'server_down',server_index) } if (this.status == 200) { if (auth_attempt) hideModal(); else resource =(resource =='/cameras') ? resource+'_update_info': resource; //console.log('200' + this.responseText); update_nessecary_structure(resource, this.responseText, server_index); } else if (this.status == 404) { //console.log('404'); update_nessecary_structure(resource, '404', server_index); } } }; //   req_.setRequestHeader('Content-type', 'text/plain; charset=utf-8'); req_.setRequestHeader('Accept', 'application/json'); req_.send(); } 

نغير المورد إلى المورد الذي نحتاجه وفقًا للمواصفات ونحصل على هذه البيانات أو تلك. يحتوي المتغير الإضافي على معلمات إضافية للطلب ، إذا لزم الأمر. في هذا الصدد ، يمكن اعتبار تطوير النصف الأول من المواصفات ، أي استلام / إرسال البيانات النصية عبر طلبات GET ، مغلقًا.

علاوة على ذلك ، صادفت حقيقة أن علامة IMG في IE لا تلعب تيار MJPEG ، وتحتاج إلى تنفيذ تحديث الصور من الكاميرات بشكل مستقل. الرمز مفتوح ، ويمكن عرضه وتغييره إذا رغبت في ذلك. في التنفيذ الحالي ، يتوفر التشغيل المتزامن لما يصل إلى ستة تدفقات MJPEG ، لذلك سيكون عليك القيام بالعمل مع طريقة عرض تعرض المزيد من الكاميرات. كل هذا في المثال ، إذا كنت ترغب ، يمكنك أن تجد وتفهم ، ولكن إذا كانت لديك أسئلة ، فتأكد من طرحها في التعليقات.

مواصفات RPC

نحن مدعوون لإرسال واستقبال البيانات إما في JSON (إصدار الخادم "Lines 7.1.1" وأعلى) أو MessagePack (الإصدار "Line 7.0" وأعلى). يشار إلى أن MessagePack يزن أقل ويعمل بشكل أسرع ، ولكن لنكون صادقين ، سأختار JSON (وهو مدمج بالفعل في JS) ، إن لم يكن لشيء واحد ولكن في المواصفات: استلام الإطارات من الأرشيف ممكن فقط في MessagePack. اضطررت للذهاب إلى موقع الويب الرسمي الخاص بهم وتنزيل ملف JS ، الذي يحتوي على طرق التشفير وفك التشفير على متن الطائرة.

وظيفة إرسال الطلب جاهزة! ولكن من السابق لأوانه الاحتفال بالنصر: عندما تحاول تغيير رأس طلب نوع المحتوى ، يقسم المتصفح ولا يرسل البيانات إلى الخادم. والحقيقة هي أن خادم الخطوط يحلل هذا الحقل ويحلله حسب النوع. لم أستطع القيام بذلك بمفردي.

لقد أرسلت طلبًا إلى قسم البرنامج ، وبعد المناقشة ، أضافوا لي عكازًا ، كما هو الحال في حالة التفويض ، - سيتم إرسال نوع المحتوى في طلب عنوان url:

 function rpc_request_of_resource (current_server_data , rpc_method, rpc_request) { var request = get_request_url('POST', current_server_data, '/rpc',''); //console.log("i'm here request = " + request + ' '+ current_server_data.user); request += "&content-type='application/x-msgpack'"; var req_ = new XMLHttpRequest(); req_.open('POST', 'http://'+ request, true); //  ,    req_.responseType = 'arraybuffer'; req_.onreadystatechange = function() { if (this.readyState == 2) { if (this.status == 401) { //console.log('401' + this.getAllResponseHeaders()); console.log('unauthorized'); } } else if (this.readyState == 4) { if (this.status == 200) { //if (auth_attempt) hideModal(); //console.log('200' + this.responseText); rpc_update_nessecary_method(rpc_method, this.response); } else if (this.status == 404) { console.log('404'); } else if (this.status == 500) { //console.log('500'); rpc_update_nessecary_method(rpc_method, '500'); } } }; //   //req_.setRequestHeader('Content-type', 'text/plain; charset=utf-8'); //req_.setRequestHeader('Content-type', 'application/x-msgpack'); req_.setRequestHeader('Accept', 'application/x-msgpack'); req_.send(rpc_request); } 

سيعمل هذا التغيير مع الإصدار "Line 7.4.1" وأعلى. بالنسبة لكافة الخوادم الموجودة أسفل هذا الإصدار ، لن يكون العمل مع المورد / rpc متاحًا.

في النهاية ، أود أن أشكر جميع العملاء الذين أرسلوا إلينا أسئلة / رغبات تتعلق بتنفيذ التطبيقات على أساس API لدينا. شكرا لك ، تم إجراء دراسة تم في إطارها تحديد بعض أوجه القصور وتصحيحها.

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