استخدام WebTransport

واجهة برمجة التطبيقات WebTransport هي واجهة برمجة تطبيقات توفّر إمكانية المراسلة من خادم العميل في وقت الاستجابة المنخفض وثنائي الاتجاه. اطّلِع على مزيد من المعلومات حول حالات الاستخدام وكيفية تقديم ملاحظات حول مستقبل التنفيذ.

Jeff Posnick

الخلفية

ما هو WebTransport؟

WebTransport هي واجهة برمجة تطبيقات على الويب تستخدم بروتوكول HTTP/3 كنقل ثنائي الاتجاه. إنه مخصص للاتصالات ثنائية الاتجاه بين برنامج الويب وخادم HTTP/3. تتيح هذه الخدمة إرسال البيانات بشكل غير موثوق به من خلال واجهات برمجة تطبيقات مخطط البيانات وبشكلٍ موثوق من خلال واجهات برمجة تطبيقات البث.

تعتبر مخططات البيانات مثالية لإرسال البيانات واستلامها التي لا تحتاج إلى ضمانات تسليم قوية. ويكون حجم حِزم البيانات الفردية محدودة بسبب الحد الأقصى لوحدة النقل (MTU) للاتصال الأساسي، ومن الممكن أن يتم إرسالها بنجاح أو لا يتم نقلها. وإذا تم نقلها، قد تصل بترتيب عشوائي. وهذه الخصائص تجعل واجهات برمجة التطبيقات لمخطط البيانات مثالية لنقل البيانات في وقت استجابة سريع وأفضل جهد. يمكنك اعتبار مخططات البيانات رسائل بروتوكول مخطط بيانات المستخدم (UDP)، ولكنها مشفرة ويتم التحكم في تكدس البيانات.

في المقابل، توفّر واجهات برمجة التطبيقات لمصادر البيانات عملية نقل بيانات موثوقة ومنظّمة. إنّها مناسبة تمامًا للسيناريوهات التي تحتاج فيها إلى إرسال مصدر واحد أو أكثر من البيانات المرتبة أو تلقّيها. يشبه استخدام مجموعات بث WebTransport المتعددة إنشاء اتصالات TCP متعددة، ولكن نظرًا لأن HTTP/3 يستخدم بروتوكول QUIC الأخف وزنًا ضمن الخيارات المتقدمة، يمكن فتحها وإغلاقها بدون تحمل القدر نفسه من النفقات العامة.

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

هذه قائمة صغيرة بالطرق التي يمكن أن يستخدم بها المطوّرون WebTransport.

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

نودّ معرفة المزيد من المعلومات عن خططك لاستخدام WebTransport.

ملاحظة: سبق تجربة العديد من المفاهيم الواردة في هذا الاقتراح كجزء من مرحلة التجربة والتقييم السابقة في QuicTransport، والتي لم يتم إصدارها كجزء من Chrome. ويساعد WebTransport في حالات الاستخدام المشابهة مثل QuicTransport، مع الاختلاف الأساسي هو أن HTTP/3 بدلاً من QUIC هو بروتوكول النقل الأساسي.

دعم المتصفح

دعم المتصفح

• 97
• 97
• 114
• x

المصدر

وكما هو الحال مع جميع الميزات التي لا تتوافق مع المتصفّحات العامة، من بين أفضل الممارسات الترميز الدفاعي عبر رصد الميزات.

الوضع الحالي

الخطوة	الحالة
1. إنشاء شرح	مكتمل
2. إنشاء مسودة أولية للمواصفات	مكتمل
3- جمع الملاحظات وتكرار التصميم	مكتملة
4. مرحلة التجربة والتقييم	مكتملة
5- إطلاق	Chromium 97

علاقة WebTransport بالتقنيات الأخرى

هل WebTransport بديل عن WebSockets؟

ربما. هناك حالات استخدام قد تكون فيها WebSockets أو WebTransport هي بروتوكولات اتصال صالحة للاستخدام.

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

عند استخدام WebTransport، من خلال واجهات برمجة تطبيقات مخطط البيانات أو من خلال مثيلات متعددة متزامنة لـ Streams API، لن يكون هناك داعٍ للقلق بشأن الحظر المفاجئ الذي قد يتسبب في حدوث مشكلة في WebSockets. بالإضافة إلى ذلك، هناك مزايا للأداء عند إنشاء اتصالات جديدة، حيث تكون تأكيد اتصال QUIC الأساسي أسرع من بدء تشغيل بروتوكول TCP عبر بروتوكول أمان طبقة النقل.

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

هل WebTransport يشبه واجهة برمجة تطبيقات UDP Socket؟

لا، WebTransport ليس واجهة برمجة تطبيقات مقبس UDP. وعلى الرغم من أن WebTransport يستخدم HTTP/3، الذي يستخدم بدوره بروتوكول UDP "الخفيف"، توجد في WebTransport متطلبات تتعلق بالتشفير والتحكُّم في ازدحام البيانات، ما يجعلها أكثر من مجرد واجهة برمجة تطبيقات UDP Socket أساسية.

هل WebTransport هو بديل لقنوات بيانات WebRTC؟

نعم، من أجل اتصالات خادم العميل. يتشارك WebTransport العديد من المواقع نفسها مثل قنوات بيانات WebRTC، على الرغم من اختلاف البروتوكولات الأساسية.

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

بوجه عام، يتطلب تشغيل خادم متوافق مع HTTP/3 إعدادًا وتكوينًا أقل من صيانة خادم WebRTC، الأمر الذي يتطلّب فهم بروتوكولات متعددة (ICE وDTLS وSCTP) لضمان عمل عملية النقل. تتضمّن WebRTC العديد من العناصر المتحركة الأخرى التي قد تؤدّي إلى تعذُّر مفاوضات العميل أو الخادم.

تم تصميم WebTransport API مع أخذ حالات الاستخدام التي يقدّمها المطوّرون على الويب في الاعتبار، ومن المفترض أن تبدو هذه الواجهة أشبه بكتابة رمز نظام أساسي حديث للويب، أكثر من استخدام واجهات قنوات البيانات في WebRTC. بخلاف WebRTC، يتم توفير WebTransport داخل Web Workers الذي يسمح لك بإجراء اتصالات خادم العميل بشكل مستقل عن صفحة HTML محدّدة. بما أنّ WebTransport يعرض واجهة متوافقة مع Streams، فإنه يتيح إجراء تحسينات حول ضغط الضغط للخلف.

ومع ذلك، إذا كان لديك برنامج أو خادم WebRTC يعمل على النحو المطلوب، قد لا يوفِّر التبديل إلى WebTransport العديد من المزايا.

جرّبه الآن

أفضل طريقة لتجربة WebTransport هي بدء تشغيل خادم HTTP/3 متوافق. يمكنك بعد ذلك استخدام هذه الصفحة مع برنامج JavaScript أساسي لتجربة اتصالات العميل/الخادم.

بالإضافة إلى ذلك، يتوفّر خادم ارتداد يديره المنتدى على webtransport.day.

استخدام واجهة برمجة التطبيقات

تم تصميم WebTransport وفقًا لمبادئ النظام الأساسي الحديث للويب، مثل Streams API. تعتمد المنصة بشكل كبير على الوعود، وتتوافق بشكل جيد مع async وawait.

يتيح التنفيذ الحالي WebTransport في Chromium ثلاثة أنواع مختلفة من الزيارات: مخططات البيانات، بالإضافة إلى مجموعات البث أحادية الاتجاه وثنائية الاتجاه.

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

يمكنك الاتصال بخادم HTTP/3 من خلال إنشاء مثيل WebTransport. يجب أن يكون مخطَّط عنوان URL https. عليك تحديد رقم المنفذ بشكل صريح.

عليك استخدام وعد ready لانتظار إنشاء الاتصال. لن يتم تنفيذ هذا الوعد حتى يكتمل الإعداد، وسيتم رفضه إذا تعذَّر الاتصال في مرحلة QUIC/TLS.

يتم تنفيذ وعد closed عند إغلاق الاتصال بشكل طبيعي، ويتم رفضه إذا كان الإغلاق غير متوقع.

إذا رفض الخادم الاتصال بسبب خطأ في إشارة العميل (على سبيل المثال، مسار عنوان URL غير صالح)، سيؤدي ذلك إلى رفض closed، بينما تظل القيمة ready بدون حل.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);

// Optionally, set up functions to respond to
// the connection closing:
transport.closed.then(() => {
  console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
}).catch((error) => {
  console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
});

// Once .ready fulfills, the connection can be used.
await transport.ready;

واجهات برمجة تطبيقات مخطط البيانات

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

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

يستخدم كلا نوعَي مصادر البيانات مثيلات Uint8Array لنقل البيانات.

// Send two datagrams to the server.
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);

// Read datagrams from the server.
const reader = transport.datagrams.readable.getReader();
while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  // value is a Uint8Array.
  console.log(value);
}

ملاحظة: لا يعرض Chrome في الوقت الحالي مكرّرًا غير متزامن لـ ReadableStream. وفي الوقت الحالي، أفضل طريقة للقراءة من البث المباشر هي استخدام طريقة getReader() مع حلقة while().

واجهات برمجة تطبيقات Streams

بعد الاتصال بالخادم، يمكنك أيضًا استخدام WebTransport لإرسال البيانات واستلامها من خلال واجهات برمجة تطبيقات Streams.

تمثّل كل مجموعة من ساحات المشاركات Uint8Array. وعلى عكس واجهات برمجة التطبيقات Datagram API، تكون عمليات البث هذه موثوقة. في المقابل، يكون كلّ مصدر بيانات مستقلاً، لذا فإنّ ترتيب البيانات في جميع مصادر البيانات ليس مضمونًا.

WebTransportSendStream

ينشئ برنامج الويب WebTransportSendStream باستخدام طريقة createUnidirectionalStream() لمثيل WebTransport، ما يعرض وعودًا بقيمة WebTransportSendStream.

يمكنك استخدام طريقة close() في WritableStreamDefaultWriter لإغلاق اتصال HTTP/3 المرتبط. يحاول المتصفّح إرسال جميع البيانات المعلّقة قبل إغلاق الاتصال المرتبط فعليًا.

// Send two Uint8Arrays to the server.
const stream = await transport.createUnidirectionalStream();
const writer = stream.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);
try {
  await writer.close();
  console.log('All data has been sent.');
} catch (error) {
  console.error(`An error occurred: ${error}`);
}

وبالمثل، يمكنك استخدام طريقة abort() من WritableStreamDefaultWriter لإرسال RESET\_STREAM إلى الخادم. عند استخدام abort()، قد يتجاهل المتصفّح أي بيانات معلّقة لم يتم إرسالها بعد.

const ws = await transport.createUnidirectionalStream();
const writer = ws.getWriter();
writer.write(...);
writer.write(...);
await writer.abort();
// Not all the data may have been written.

WebTransportReceiveStream

يبدأ الخادم WebTransportReceiveStream. يمكن الحصول على WebTransportReceiveStream عملية من خطوتَين لبرنامج ويب. في البداية، تطلب السمة incomingUnidirectionalStreams لمثيل WebTransport، ما يؤدي إلى عرض ReadableStream. وبالتالي، فإنّ كل جزء من ReadableStream هو WebTransportReceiveStream الذي يمكن استخدامه لقراءة مثيلات Uint8Array المُرسَلة من الخادم.

async function readFrom(receiveStream) {
  const reader = receiveStream.readable.getReader();
  while (true) {
    const {done, value} = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array
    console.log(value);
  }
}

const rs = transport.incomingUnidirectionalStreams;
const reader = rs.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  // value is an instance of WebTransportReceiveStream
  await readFrom(value);
}

يمكنك رصد إغلاق البث باستخدام وعد closed في ReadableStreamDefaultReader. عندما يتم إغلاق اتصال HTTP/3 الأساسي باستخدام بت FIN، يتم تنفيذ الوعد closed بعد قراءة جميع البيانات. عند إغلاق اتصال HTTP/3 بشكل مفاجئ (من خلال RESET\_STREAM مثلاً)، يتم رفض وعد closed.

// Assume an active receiveStream
const reader = receiveStream.readable.getReader();
reader.closed.then(() => {
  console.log('The receiveStream closed gracefully.');
}).catch(() => {
  console.error('The receiveStream closed abruptly.');
});

WebTransportBidirectionalStream

قد يتم إنشاء WebTransportBidirectionalStream إما من خلال الخادم أو العميل.

يمكن لعملاء الويب إنشاء حساب باستخدام طريقة createBidirectionalStream() لمثيل WebTransport، ما يؤدي إلى حدوث وعد بقيمة WebTransportBidirectionalStream.

const stream = await transport.createBidirectionalStream();
// stream is a WebTransportBidirectionalStream
// stream.readable is a ReadableStream
// stream.writable is a WritableStream

يمكنك الاستماع إلى WebTransportBidirectionalStream الذي أنشأه الخادم باستخدام السمة incomingBidirectionalStreams لمثيل WebTransport والذي يعرض ReadableStream. وكل جزء من هذا ReadableStream هو WebTransportBidirectionalStream.

const rs = transport.incomingBidirectionalStreams;
const reader = rs.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  // value is a WebTransportBidirectionalStream
  // value.readable is a ReadableStream
  // value.writable is a WritableStream
}

السمة WebTransportBidirectionalStream هي مزيج من WebTransportSendStream وWebTransportReceiveStream. توضّح الأمثلة من القسمَين السابقَين كيفية استخدام كلٍ منهما.

مزيد من الأمثلة

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

WebTransport في أدوات مطوري البرامج في Chrome

لا تدعم أدوات مطوري البرامج في Chrome حاليًا WebTransport. يمكنك "تمييز بنجمة" مشكلة في Chrome هذه لتلقّي إشعارات بشأن التحديثات على واجهة "أدوات مطوري البرامج".

الملء التلقائي

polyfill (أو بالأحرى ponyfill الذي يوفر الوظائف كوحدة مستقلة يمكنك استخدامها) يسمى webtransport-ponyfill-websocket ينفذ بعض ميزات WebTransport المتاحة. اقرأ القيود في في README الخاصة بالمشروع لتحديد ما إذا كان هذا الحل مناسبًا لحالة استخدامك.

اعتبارات الخصوصية والأمان

راجِع القسم المقابل لمواصفات المسودة للحصول على إرشادات موثوقة.

ملاحظات

يريد فريق Chrome معرفة رأيك وتجاربك في استخدام واجهة برمجة التطبيقات هذه.

ملاحظات حول تصميم واجهة برمجة التطبيقات

هل هناك ما يبدو غريبًا أو لا يعمل على النحو المتوقّع في واجهة برمجة التطبيقات؟ أو هل هناك أجزاء مفقودة تحتاجها لتنفيذ فكرتك؟

يُرجى الإبلاغ عن مشكلة في مستودع Web Transport GitHub أو إضافة أفكارك إلى مشكلة حالية.

هل تواجه مشكلة في عملية التنفيذ؟

هل واجهت مشكلة في التنفيذ في Chrome؟

يمكنك الإبلاغ عن الخطأ على https://new.crbug.com. قم بتضمين أكبر قدر ممكن من التفاصيل، إلى جانب تعليمات بسيطة لإعادة إنتاجها.

هل تخطط لاستخدام واجهة برمجة التطبيقات؟

ويساعد الدعم العام الذي تقدّمه Chrome على منح الأولوية للميزات، كما يُظهر لموردي المتصفّحات الآخرين مدى أهمية دعمهم لها.

• إرسال تغريدة إلى @ChromiumDev باستخدام علامة التصنيف #WebTransport وتفاصيل حول مكان وكيفية استخدامك.

مناقشة عامة

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

شكر وتقدير

تتضمن هذه المقالة معلومات من تفسير النقل WebTransport، ومواصفات المسودة، ومستندات التصميم ذات الصلة. شكرًا للمؤلفين المعنيين على تقديم هذا الأساس.

الصورة الرئيسية في هذه المشاركة هي من إعداد روبن بيير على موقع Un المنزل.