التعريف بمآخذ الويب - توفير المقابس على الويب

إيجي كيتامورا
Malte Ubl

المشكلة: اتصالات خادم العميل وعميل الخادم بوقت الاستجابة السريع

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

يشير هذا المصطلح إلى التكنولوجيا التي تمكّن الخادم من إرسال البيانات إلى العميل في اللحظة التي يعلم فيها بتوفّر بيانات جديدة، وهي متوفرة منذ فترة طويلة. وتُطلق أسماء مثل "دفع" أو "مذنّب". تُسمى إحدى أكثر الاختراقات شيوعًا للوهم بالاتصال الذي بدأه الخادم باسم "الاستطلاع الطويل". باستخدام الاستطلاعات الطويلة، يفتح العميل اتصال HTTP بالخادم، ما يبقيه مفتوحًا حتى إرسال الاستجابة. عندما يحتوي الخادم على بيانات جديدة، يرسل الاستجابة (تتضمن تقنيات أخرى فلاش وطلبات XHR متعددة الأجزاء وما يُعرف باسم htmlfiles). تُحقّق الاستطلاعات الطويلة والتقنيات الأخرى أداءً جيدًا للغاية. فأنت تستخدمها يوميًا في تطبيقات مثل دردشة GMail.

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

التعريف بـ WebSocket: توفير المقابس على الويب

تحدد مواصفات WebSocket واجهة برمجة التطبيقات التي تنشئ اتصالات "socket" بين متصفح ويب وخادم. بتعبير بسيط، هناك اتصال مستمر بين العميل والخادم ويمكن لكلا الطرفين بدء إرسال البيانات في أي وقت.

البدء

يمكنك فتح اتصال WebSocket من خلال استدعاء الدالة الإنشائية WebSocket:

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

لاحِظ ws:. هذا هو مخطط عنوان URL الجديد لاتصالات WebSocket. هناك أيضًا wss: لاتصال WebSocket الآمن بالطريقة نفسها التي يتم بها استخدام https: لاتصالات HTTP الآمنة.

يتيح لك إرفاق بعض معالِجات الأحداث فورًا بالاتصال معرفة وقت فتح الاتصال أو تلقّي الرسائل الواردة أو حدوث خطأ.

وتقبل الوسيطة الثانية بروتوكولات فرعية اختيارية. يمكن أن يكون سلسلة أو صفيفًا من السلاسل. يجب أن تمثل كل سلسلة اسم بروتوكول فرعي ويقبل الخادم واحدًا فقط من البروتوكولات الفرعية التي تم تمريرها في الصفيف. يمكن تحديد البروتوكول الفرعي المقبول من خلال الوصول إلى السمة protocol في عنصر WebSocket.

يجب أن تكون أسماء البروتوكولات الفرعية أحد أسماء البروتوكولات الفرعية المسجلة في سجل IANA. يوجد حاليًا اسم بروتوكول فرعي واحد فقط (صابون) تم تسجيله اعتبارًا من فبراير 2012.

// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};

الاتصال بالخادم

بعد الاتصال بالخادم (عند تنشيط حدث open)، يمكننا البدء في إرسال البيانات إلى الخادم باستخدام الطريقة send('your message') على عنصر الاتصال. كانت تُستخدم لدعم السلاسل فقط، لكن في أحدث المواصفات، يمكنها الآن إرسال رسائل ثنائية أيضًا. لإرسال البيانات الثنائية، يمكنك استخدام عنصر Blob أو ArrayBuffer.

// Sending String
connection.send('your message');

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
connection.send(binary.buffer);

// Sending file as Blob
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

وبالمثل، يمكن أن يرسل الخادم رسائل إلينا في أي وقت. عندما يحدث ذلك، يتم تنشيط معاودة الاتصال بـ onmessage. تتلقى معاودة الاتصال كائن حدث ويمكن الوصول إلى الرسالة الفعلية من خلال السمة data.

يمكن أن يتلقى WebSocket أيضًا رسائل ثنائية بأحدث المواصفات. ويمكن تلقي الإطارات الثنائية بتنسيق Blob أو ArrayBuffer. لتحديد تنسيق البرنامج الثنائي الذي تم استلامه، اضبط سمةidType لكائن WebSocket على "blob" أو "arraybuffer". ويكون التنسيق التلقائي هو "blob". (لا تحتاج إلى محاذاة معلمة ثنائيةType عند الإرسال).

// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
console.log(e.data.byteLength); // ArrayBuffer object if binary
};

ميزة أخرى تمت إضافتها حديثًا في WebSocket هي الإضافات. باستخدام الإضافات، يمكن إرسال الإطارات مضغطة أو متعددة الإرسال وما إلى ذلك. ويمكنك العثور على الإضافات المقبولة للخادم من خلال فحص خاصية الإضافات لكائن WebSocket بعد الحدث المفتوح. ليست هناك مواصفات إضافات منشورة رسميًا حتى الآن منذ شباط (فبراير) 2012.

// Determining accepted extensions
console.log(connection.extensions);

التواصل بين المصادر المختلفة

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

الخوادم الوكيلة

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

استخدام WebSockets اليوم

لا يزال WebSocket تكنولوجيا حديثة ولم يتم تنفيذها بشكل كامل في جميع المتصفحات. ومع ذلك، يمكنك استخدام WebSocket حاليًا مع المكتبات التي تستخدم أحد العناصر الاحتياطية المذكورة أعلاه كلما كان WebSocket غير متاح. المكتبة هي التي أصبحت شائعة للغاية في هذا النطاق، وهي socket.io والتي تأتي مرفقة ببرنامج وخادم لتنفيذ البروتوكول وتتضمّن عناصر احتياطية (لا يدعم socket.io المراسلة الثنائية بعد اعتبارًا من شباط (فبراير) 2012). هناك أيضًا حلول تجارية، مثل PusherApp، يمكن دمجها بسهولة في أي بيئة ويب من خلال توفير واجهة برمجة تطبيقات HTTP لإرسال رسائل WebSocket إلى العملاء. بسبب طلب HTTP الإضافي، سيكون هناك دائمًا أعباء إضافية مقارنةً بـ WebSocket البحت.

جانب الخادم

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

عمليات التنفيذ من جهة الخادم

إصدارات البروتوكول

أصبح بروتوكول السلكي (تأكيد الاتصال ونقل البيانات بين العميل والخادم) لتطبيق WebSocket الآن RFC6455. يتوافق أحدث إصدار من Chrome وChrome لنظام التشغيل Android بشكل تام مع RFC6455، بما في ذلك المراسلة الثنائية. سيكون متصفّح Firefox متوافقًا أيضًا مع الإصدار 11، وInternet Explorer في الإصدار 10. لا يزال بإمكانك استخدام إصدارات البروتوكول القديمة ولكن لا يوصى بها لأنها معروفة بأنها معرضة للاختراق. إذا كانت لديك عمليات تنفيذ للخادم للإصدارات الأقدم من بروتوكول WebSocket، ننصحك بترقيته إلى أحدث إصدار.

حالات الاستخدام

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

  • الألعاب المتعددة اللاعبين على الإنترنت
  • تطبيقات الدردشة
  • شريط أخبار الفعاليات الرياضية المباشرة
  • تحديث ساحات المشاركات على وسائل التواصل الاجتماعي في الوقت الفعلي

إصدارات تجريبية

المراجع