WebTransport का इस्तेमाल करना

WebTransport एक ऐसा एपीआई है जो कम इंतज़ार का समय, दोनों तरफ़ ले जाने वाली, क्लाइंट-सर्वर मैसेज सेवा उपलब्ध कराता है. इसके इस्तेमाल के उदाहरणों के बारे में ज़्यादा जानें. साथ ही, यह भी जानें कि आने वाले समय में इसे लागू करने के बारे में सुझाव कैसे दें.

Jeff Posnick

बैकग्राउंड

WebTransport क्या है?

WebTransport एक वेब एपीआई है, जो HTTP/3 प्रोटोकॉल का इस्तेमाल बाय-डायरेक्शनल ट्रांसपोर्ट के तौर पर करता है. यह सुविधा, वेब क्लाइंट और एचटीटीपी/3 सर्वर के बीच दो-तरफ़ा कम्यूनिकेशन के लिए है. यह अपने datagram API और अपने streams API की मदद से, भरोसेमंद तरीके से डेटा भेजने की सुविधा देता है.

डेटाग्राम ऐसे डेटा को भेजने और पाने के लिए बेहतर होते हैं, जिनके लिए डिलीवरी की बेहतर गारंटी की ज़रूरत नहीं होती. डेटा के अलग-अलग पैकेट का साइज़, मौजूदा कनेक्शन की मैक्स ट्रांसमिशन यूनिट (एमटीयू) के हिसाब से सीमित होता है. इसके अलावा, यह भी हो सकता है कि डेटा को ट्रांसमिट किया जा सकता हो या नहीं. साथ ही, अगर डेटा ट्रांसफ़र हो जाता है, तो वह मनचाहे क्रम में लग सकता है. ये विशेषताएं, Datagram API को कम इंतज़ार का समय और बेहतर तरीके से डेटा ट्रांसमिशन करने के लिए सही बनाती हैं. डेटाग्राम को यूज़र डेटाग्राम प्रोटोकॉल (यूडीपी) मैसेज माना जा सकता है. हालांकि, इन्हें एन्क्रिप्ट (सुरक्षित) और कंजेशन कंट्रोल किया जाता है.

वहीं दूसरी ओर, स्ट्रीम एपीआई भरोसेमंद और ऑर्डर किया गया डेटा ट्रांसफ़र देते हैं. ये विज्ञापन ऐसी स्थितियों के लिए सही होते हैं जहां आपको ऑर्डर किए गए डेटा की एक या उससे ज़्यादा स्ट्रीम भेजने या पाने की ज़रूरत होती है. एक से ज़्यादा WebTransport का इस्तेमाल करना, एक से ज़्यादा टीसीपी कनेक्शन बनाने जैसा ही है. हालांकि, एचटीटीपी/3, हुड के तहत कम वज़न वाले QUIC प्रोटोकॉल का इस्तेमाल करता है, इसलिए उन्हें ज़्यादा ओवरहेड के बिना खोला और बंद किया जा सकता है.

उपयोग के उदाहरण

यह उन संभावित तरीकों की एक छोटी सूची है जिनके ज़रिए डेवलपर WebTransport का इस्तेमाल कर सकते हैं.

• छोटे, गैर-भरोसेमंद, और आउट-ऑफ़-ऑर्डर मैसेज के ज़रिए, सर्वर को कम से कम इंतज़ार के समय के साथ नियमित अंतराल पर गेम की स्थिति भेजना.
• आपको सर्वर से मिलने वाली मीडिया स्ट्रीम को इतना इंतज़ार का समय लेना होगा, जितना कि अन्य डेटा स्ट्रीम से अलग.
• किसी वेब पेज के खुले होने पर, सर्वर से पुश की गई सूचनाएं पाना.

हम WebTransport का इस्तेमाल करने के आपके तरीके के बारे में ज़्यादा जानना चाहते हैं.

ब्राउज़र समर्थन

जिन सुविधाओं को यूनिवर्सल ब्राउज़र के लिए सहायता नहीं मिलती है उनकी तरह सुविधा की पहचान के ज़रिए सुरक्षित तरीके से कोडिंग करना सबसे सही तरीका है.

मौजूदा स्थिति

अन्य टेक्नोलॉजी के साथ WebTransport का संबंध

क्या WebTransport, WebSockets की जगह ले सकता है?

शायद. कुछ मामलों में, WebSockets या WebTransport के इस्तेमाल के लिए मान्य कम्यूनिकेशन प्रोटोकॉल हो सकते हैं.

WebSockets कम्यूनिकेशन, मैसेज की एक भरोसेमंद और व्यवस्थित स्ट्रीम के आधार पर किए जाते हैं. हालांकि, बातचीत से जुड़ी कुछ ज़रूरतों को पूरा किया जा सकता है. अगर आपको वे विशेषताएं चाहिए, तो WebTransport के स्ट्रीम एपीआई भी ऐसा कर सकते हैं. इसके मुकाबले, WebTransport के डेटाग्राम एपीआई, विश्वसनीयता या ऑर्डर करने की गारंटी के बिना, लो-लेटेंसी डिलीवरी उपलब्ध कराते हैं. इसलिए, वे WebSockets के लिए सीधे तौर पर बदले नहीं हैं.

Datagram API या एक साथ कई Streams API इंस्टेंस की मदद से WebTransport का इस्तेमाल करने का मतलब है कि आपको हेड-ऑफ़-लाइन ब्लॉक करने की चिंता करने की ज़रूरत नहीं है. इससे WebSockets में कोई समस्या हो सकती है. इसके अलावा, नए कनेक्शन बनाते समय परफ़ॉर्मेंस बेहतर होती है, क्योंकि QUIC हैंडशेक, TLS पर टीसीपी को शुरू करने के मुकाबले ज़्यादा तेज़ है.

WebTransport, नए ड्राफ़्ट स्पेसिफ़िकेशन का हिस्सा है. इसलिए, क्लाइंट और सर्वर लाइब्रेरी से जुड़ा WebSocket नेटवर्क, फ़िलहाल काफ़ी बेहतर काम कर रहा है. अगर आपको कुछ ऐसा चाहिए जो "बेहतरीन" काम करता हो के साथ-साथ कई तरह के वेब क्लाइंट सपोर्ट के साथ-साथ, WebSockets आज बेहतर विकल्प है.

क्या WebTransport और UDP Socket API एक ही है?

नहीं. WebTransport, UDP Socket API नहीं है. जबकि WebTransport, HTTP/3 का इस्तेमाल करता है, जो बदले में यूडीपी "अंडर द हुड" का इस्तेमाल करता है, WebTransport के लिए, एन्क्रिप्ट (सुरक्षित) करने का तरीका और कंजेशन कंट्रोल से जुड़ी ज़रूरी शर्तें शामिल हैं. इसलिए, यह एक बेसिक यूडीपी सॉकेट एपीआई से कहीं ज़्यादा बेहतर है.

क्या WebTransport, WebRTC डेटा चैनलों का एक विकल्प है?

हां, क्लाइंट-सर्वर कनेक्शन के लिए. WebTransport के लिए कई प्रॉपर्टी और WebRTC डेटा चैनल एक जैसी होती हैं. हालांकि, उनके प्रोटोकॉल अलग-अलग होते हैं.

आम तौर पर, एचटीटीपी/3 के साथ काम करने वाले सर्वर को चलाने के लिए, WebRTC सर्वर के मुकाबले कम सेटअप और कॉन्फ़िगरेशन की ज़रूरत होती है. सर्वर को सही तरीके से चलाने के लिए कई प्रोटोकॉल (ICE, DTLS, और SCTP) को समझना पड़ता है. WebRTC कई चीज़ों को एक जगह से दूसरी जगह ले जाता है. इसलिए, हो सकता है कि क्लाइंट/सर्वर से जुड़ी बातचीत फ़ेल हो जाए.

WebTransport API को वेब डेवलपर के इस्तेमाल के हिसाब से डिज़ाइन किया गया है. इसे WebRTC के डेटा चैनल इंटरफ़ेस के बजाय, मॉडर्न वेब प्लैटफ़ॉर्म कोड लिखने जैसा एहसास होगा. WebRTC के उलट, WebTransport की सुविधा वेब वर्कर में काम करती है. इसकी मदद से, दिए गए एचटीएमएल पेज से अलग क्लाइंट-सर्वर कम्यूनिकेशन किए जा सकते हैं. WebTransport, Streams के मुताबिक इंटरफ़ेस दिखाता है. इसलिए, यह बैकप्रेस के हिसाब से ऑप्टिमाइज़ेशन के साथ काम करता है.

हालांकि, अगर आपके पास पहले से ही WebRTC क्लाइंट/सर्वर सेटअप है, जो काम कर रहा है, तो हो सकता है कि WebTransport पर स्विच करने से आपको ज़्यादा फ़ायदे न मिलें.

इसे आज़माएं

WebTransport के साथ काम करने का सबसे अच्छा तरीका यह है कि आप एक काम करने वाला एचटीटीपी/3 सर्वर बनाएं. इसके बाद, क्लाइंट/सर्वर कम्यूनिकेशन को आज़माने के लिए, इस पेज को बेसिक JavaScript क्लाइंट के साथ इस्तेमाल किया जा सकता है.

इसके अलावा, समुदाय की ओर से काम करने वाला इको सर्वर webtransport.day पर उपलब्ध है.

एपीआई का इस्तेमाल करना

WebTransport को आधुनिक वेब प्लैटफ़ॉर्म प्रिमिटिव, जैसे कि Streams API के आधार पर डिज़ाइन किया गया है. यह वादों पर बहुत ज़्यादा निर्भर करता है. साथ ही, async और await के साथ अच्छे से काम करता है.

Chromium में, मौजूदा WebTransport को लागू करने के लिए, तीन अलग-अलग तरह के ट्रैफ़िक का इस्तेमाल किया जा सकता है: डेटाग्राम के साथ-साथ एकतरफ़ा और दोतरफ़ा, दोनों तरह की स्ट्रीम.

सर्वर से कनेक्ट करना

WebTransport इंस्टेंस बनाकर, एचटीटीपी/3 सर्वर से कनेक्ट किया जा सकता है. यूआरएल की स्कीम https होनी चाहिए. आपको पोर्ट नंबर साफ़ तौर पर बताना होगा.

कनेक्शन शुरू होने तक इंतज़ार करने के लिए, आपको ready प्रॉमिस का इस्तेमाल करना चाहिए. सेटअप पूरा होने तक यह प्रॉमिस पूरा नहीं होगा. साथ ही, QUIC/TLS चरण पर कनेक्शन न होने पर, प्रॉमिस को अस्वीकार कर दिया जाएगा.

सामान्य तरीके से कनेक्शन बंद होने पर, closed प्रॉमिस पूरा होता है. हालांकि, अचानक बंद होने पर यह प्रॉमिस अस्वीकार कर दिया जाता है.

अगर सर्वर, क्लाइंट इंंडिकेशन की गड़बड़ी (जैसे, यूआरएल का पाथ अमान्य है) की वजह से कनेक्शन को अस्वीकार कर देता है, तो 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;

Datagram API

जब आपके पास सर्वर से कनेक्ट 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);
}

Streams API

सर्वर से कनेक्ट होने के बाद, इसके स्ट्रीम एपीआई की मदद से डेटा भेजने और पाने के लिए, WebTransport का भी इस्तेमाल किया जा सकता है.

सभी स्ट्रीम का हर हिस्सा एक Uint8Array है. Datagram API के उलट, ये स्ट्रीम भरोसेमंद होती हैं. हालांकि, हर स्ट्रीम अलग होती है. इसलिए, सभी स्ट्रीम के लिए डेटा के क्रम की कोई गारंटी नहीं है.

WebTransportSendStream

वेब क्लाइंट, WebTransport इंस्टेंस की createUnidirectionalStream() तरीके का इस्तेमाल करके, WebTransportSendStream को बनाता है. यह WebTransportSendStream के लिए प्रॉमिस दिखाता है.

इससे जुड़े एचटीटीपी/3 कनेक्शन को बंद करने के लिए, WritableStreamDefaultWriter के close() तरीके का इस्तेमाल करें. ब्राउज़र, जुड़े हुए कनेक्शन को बंद करने से पहले, पूरा डेटा भेजने की कोशिश करता है.

// 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}`);
}

इसी तरह, सर्वर पर RESET\_STREAM भेजने के लिए WritableStreamDefaultWriter के abort() तरीके का इस्तेमाल करें. 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 हासिल करने की प्रोसेस दो चरणों वाली होती है. सबसे पहले, यह WebTransport इंस्टेंस के incomingUnidirectionalStreams एट्रिब्यूट को कॉल करता है, जो 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);
}

ReadableStreamDefaultReader में दिए गए closed प्रॉमिस का इस्तेमाल करके, स्ट्रीम बंद होने का पता लगाया जा सकता है. जब मौजूदा एचटीटीपी/3 कनेक्शन को एफ़आईएन बिट के साथ बंद किया जाता है, तो पूरा डेटा पढ़ने के बाद, closed प्रॉमिस पूरा हो जाता है. जब एचटीटीपी/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 को सर्वर या क्लाइंट, दोनों में से किसी ने बनाया हो सकता है.

वेब क्लाइंट, WebTransport इंस्टेंस की createBidirectionalStream() तरीके का इस्तेमाल करके, एक यूआरएल बना सकते हैं. इससे, WebTransportBidirectionalStream के लिए प्रॉमिस प्रॉमिस होता है.

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

आपके पास WebTransport इंस्टेंस की incomingBidirectionalStreams एट्रिब्यूट की मदद से, सर्वर के बनाए गए WebTransportBidirectionalStream को सुनने की सुविधा होती है. इससे, 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 ड्राफ़्ट की खास बातों में सभी तरीकों और प्रॉपर्टी के लिए, पूरे दस्तावेज़ के साथ-साथ कई और इनलाइन उदाहरण शामिल हैं.

Chrome के DevTools में WebTransport

माफ़ करें, फ़िलहाल Chrome का DevTools, WebTransport के साथ काम नहीं करता. "स्टार" का निशान लगाया जा सकता है Chrome की इस समस्या के बारे में आपको DevTools इंटरफ़ेस के अपडेट के बारे में सूचना दी जाएगी.

पॉलीफ़िल

एक पॉलीफ़िल (या इसके बजाय पोनीफ़िल, जो एक स्टैंडअलोन मॉड्यूल के रूप में काम करता है जिसका इस्तेमाल किया जा सकता है) को कहते हैं webtransport-ponyfill-websocket उपलब्ध है, जो WebTransport की कुछ सुविधाओं को लागू करता है. इसमें दी गई सीमाओं को ध्यान से पढ़ें प्रोजेक्ट का README, ताकि यह तय किया जा सके कि यह समाधान आपके इस्तेमाल के उदाहरण के लिए काम कर सकता है या नहीं.

निजता और सुरक्षा से जुड़ी बातें

आधिकारिक दिशा-निर्देशों के लिए, ड्राफ़्ट की खास बातों का इससे जुड़ा सेक्शन देखें.

सुझाव/राय दें या शिकायत करें

Chrome टीम इस एपीआई का इस्तेमाल करके, आपके विचार और अनुभव जानना चाहती है.

एपीआई के डिज़ाइन के बारे में सुझाव/राय दें या शिकायत करें

क्या एपीआई के बारे में कुछ ऐसा है जो जटिल है या उम्मीद के मुताबिक काम नहीं करता? या फिर कुछ ऐसी चीज़ें हैं जो आपको अपने आइडिया को लागू करने के लिए चाहिए?

वेब ट्रांसपोर्ट GitHub रेपो में समस्या दर्ज करें या किसी मौजूदा समस्या के बारे में अपनी राय दें.

क्या लागू करने में कोई समस्या हुई?

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली?

https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें और इसे दोबारा बनाने के आसान निर्देश दें.

क्या आपको इस एपीआई का इस्तेमाल करना है?

आपकी सार्वजनिक सहायता से Chrome को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, यह दूसरे ब्राउज़र वेंडर को दिखाता है कि उनके लिए सहायता उपलब्ध कराना कितना ज़रूरी है.

• हैशटैग का इस्तेमाल करके @ChromiumDev को ट्वीट भेजें #WebTransport साथ ही, यह भी जानें कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.

सामान्य चर्चा

web-transport-dev Google Group का इस्तेमाल सामान्य सवालों या समस्याओं के लिए किया जा सकता है जो कि किसी दूसरी कैटगरी में नहीं आते हैं.

स्वीकार की गई

इस लेख में WebTransport की जानकारी, ड्राफ़्ट की खास बातें, और डिज़ाइन से जुड़े दस्तावेज़ शामिल हैं. बुनियाद के लिए सभी लेखकों को धन्यवाद.

इस पोस्ट की हीरो इमेज, Unस्प्लैश पर रॉबिन पियर ने पोस्ट की है.