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

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

जेफ़ पॉस्निक

बैकग्राउंड

WebTransport क्या है?

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

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

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

इस्तेमाल के उदाहरण

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

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

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

ध्यान दें: इस प्रस्ताव में शामिल कई कॉन्सेप्ट को पहले, QuicTransport के ऑरिजिन ट्रायल के हिस्से के तौर पर आज़माया गया था. हालांकि, इसे Chrome के साथ रिलीज़ नहीं किया गया. WebTransport, QuicTransport जैसे इस्तेमाल के उदाहरणों में मदद करता है. इसमें सबसे पहला अंतर यह है कि इसमें QUIC के बजाय HTTP/3 दिया गया है.

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

ब्राउज़र सहायता

• 97
• 97
• 114
• x

सोर्स

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

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

चरण	स्थिति
1. जानकारी बनाएं	पूरा हुआ
2. खास जानकारी का शुरुआती ड्राफ़्ट बनाएं	पूरा हुआ
3. लोगों की राय जानें और डिज़ाइन को बेहतर बनाएं	पूरा जवाब
4. ऑरिजिन ट्रायल	पूरा जवाब
5. लॉन्च करें	Chromium 97

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

क्या WebTransport, WebSockets की जगह है?

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

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

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

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

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

नहीं. WebTransport, यूडीपी सॉकेट एपीआई नहीं है. WebTransport, एचटीटीपी/3 का इस्तेमाल करता है और यूडीपी "हुड के तहत" का इस्तेमाल करता है. हालांकि, WebTransport में एन्क्रिप्शन और कंजेशन कंट्रोल से जुड़ी ज़रूरी शर्तें लागू होती हैं, जो इसे बेसिक यूडीपी सॉकेट एपीआई से ज़्यादा बनाती हैं.

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

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

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

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

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

हालांकि, अगर आपके पास पहले से ही 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 एपीआई

जब आपके पास 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 के लिए async iterator नहीं दिखाता है. फ़िलहाल, getReader() तरीके के साथ while() लूप का इस्तेमाल करना, स्ट्रीम से पढ़ने का सबसे अच्छा तरीका है.

Streams एपीआई

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

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

WebTransportSendStream

वेब क्लाइंट, WebTransportSendStream को WebTransport इंस्टेंस के createUnidirectionalStream() तरीके का इस्तेमाल करके बनाता है, जिससे 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 के साथ काम नहीं करता. DevTools इंटरफ़ेस पर अपडेट के बारे में सूचना पाने के लिए, Chrome की इस समस्या को "स्टार" में बदला जा सकता है.

पॉलीफ़िल

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

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

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

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

Chrome टीम इस API का उपयोग करके आपके विचार और अनुभव जानना चाहती है.

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

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

Web Transport GitHub के रेपो में जाकर, कोई समस्या दर्ज करें या किसी मौजूदा समस्या पर अपने विचार जोड़ें.

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

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

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

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

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

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

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

ऐसे सामान्य सवालों या समस्याओं के लिए, web-transport-dev Google ग्रुप का इस्तेमाल किया जा सकता है जो किसी अन्य कैटगरी में नहीं आते हैं.

स्वीकार हैं

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

इस पोस्ट पर हीरो इमेज, Unsplash पर रॉबिन पियरे ने बनाई है.