WebTransport'u kullanma

WebTransport, düşük gecikmeli, iki yönlü, istemci-sunucu mesajlaşması sunan bir API'dir. Kullanım alanları ve uygulamanın geleceği hakkında nasıl geri bildirimde bulunacağınız hakkında daha fazla bilgi edinin.

Jeff Posnick

Arka plan

WebTransport nedir?

WebTransport, çift yönlü aktarım olarak HTTP/3 protokolünü kullanan bir web API'sidir. Bir web istemcisi ile HTTP/3 sunucusu arasındaki iki yönlü iletişim için tasarlanmıştır. Hem datagram API'leri hem de akış API'leri ile güvenilir şekilde veri göndermeyi destekler.

Datagramlar, güçlü teslim garantilerine ihtiyaç duymayan verileri göndermek ve almak için idealdir. Ayrı ayrı veri paketlerinin boyutları, alttaki bağlantının maksimum iletim birimine (MTU) bağlı olarak sınırlandırılır. Bu paketler başarılı bir şekilde iletilebilir veya aktarılamayabilir. Aktarılmaları durumunda ise rastgele bir sırada ulaşabilirler. Bu özellikler, veri birimi API'lerini düşük gecikmeli, en iyi çabayla veri iletimi için ideal kılar. Datagramları kullanıcı datagram protokolü (UDP) mesajları olarak düşünebilirsiniz, ancak bu mesajlar şifrelenerek kontrol edilir.

Buna karşın akış API'leri güvenilir ve sıralı veri aktarımı sağlar. Bir veya daha fazla sıralanmış veri akışı göndermeniz veya almanız gereken senaryolar için uygundur. Birden fazla WebTransport akışı kullanmak, birden fazla TCP bağlantısı kurmaya benzer. Ancak HTTP/3 arka planda daha hafif QUIC protokolünü kullandığından, bunlar çok fazla ek yük olmadan açılıp kapatılabilir.

Kullanım alanları

Bu, geliştiricilerin WebTransport'u kullanabileceği olası yöntemlerin küçük bir listesidir.

• Oyun durumunu düzenli aralıklarla, küçük, güvenilir olmayan, sıralı olmayan iletiler aracılığıyla sunucuya minimum gecikmeyle gönderme.
• Bir sunucudan aktarılan medya akışlarını, diğer veri akışlarından bağımsız olarak minimum gecikmeyle alma.
• Bir web sayfası açıkken sunucudan gelen bildirimleri alma.

WebTransport'u nasıl kullanmayı planladığınızla ilgili daha fazla bilgi edinmek istiyoruz.

Tarayıcı desteği

Evrensel tarayıcı desteği olmayan tüm özelliklerde olduğu gibi, özellik algılama aracılığıyla savunma amaçlı kodlama yapmak en iyi uygulamadır.

Mevcut durum

WebTransport'un diğer teknolojilerle ilişkisi

WebTransport, WebSocket'lerin yerine geçer mi?

Açmanız gerekebilir. WebSockets veya WebTransport'un kullanılacak geçerli iletişim protokolleri olabileceği kullanım alanları vardır.

WebSockets iletişimleri tek, güvenilir, sıralı bir ileti akışı etrafında modellenir ve bazı iletişim ihtiyaçları için uygundur. Bu özelliklere ihtiyacınız varsa WebTransport'un akış API'leri de bunları sağlayabilir. Buna kıyasla WebTransport'un datagram API'leri, güvenilirlik veya sipariş garantisi olmadan düşük gecikmeli teslim imkanı sunduğundan WebSocket'lerin doğrudan yerine geçmez.

Datagram API'leri veya birden fazla eşzamanlı Streams API örneği aracılığıyla WebTransport'un kullanılması, WebSockets'te bir sorun olabilecek satırbaşı engelleme konusunda endişelenmenize gerek olmadığı anlamına gelir. Ayrıca, temel QUIC el sıkışması, TCP üzerinden TCP'yi başlatmaktan daha hızlı olduğundan, yeni bağlantılar oluştururken performans avantajları da vardır.

WebTransport, yeni taslak spesifikasyonunun bir parçasıdır ve bu nedenle, istemci ve sunucu kitaplıkları etrafındaki WebSocket ekosistemi şu anda çok daha sağlamdır. "Kullanıma hazır" bir uygulamaya ihtiyacınız varsa Ayrıca, WebSockets, yaygın sunucu kurulumları ve kapsamlı web istemcisi desteği ile bugün daha iyi bir seçimdir.

WebTransport, UDP Socket API ile aynı mı?

Hayır. WebTransport, UDP Yuva API'si değildir. WebTransport, HTTP/3 kullanırken UDP'yi arka planda kullanır. WebTransport, şifreleme ve tıkanıklık kontrolüyle ilgili olarak onu temel bir UDP Socket API'den çok daha fazlasını yapan gereksinimlere sahiptir.

WebTransport, WebRTC veri kanallarına alternatif midir?

Evet, istemci-sunucu bağlantıları için geçerlidir. Temel protokoller farklı olsa da WebTransport, WebRTC veri kanalları ile aynı özelliklerin birçoğunu paylaşır.

Genel olarak, HTTP/3 uyumlu bir sunucu çalıştırmak, çalışan bir aktarım elde etmek için birden fazla protokolün (ICE, DTLS ve SCTP) anlaşılmasını gerektiren bir WebRTC sunucusunun bakımına kıyasla daha az kurulum ve yapılandırma gerektirir. WebRTC, istemci/sunucu görüşmelerinin başarısız olmasına yol açabilecek daha çok sayıda hareketli parça gerektirir.

WebTransport API, web geliştiricilerinin kullanım alanları göz önünde bulundurularak tasarlanmıştır. Bu API, WebRTC'nin veri kanalı arayüzlerini kullanmaktan ziyade modern web platformu kodu yazmaya benzemektedir. WebRTC'nin aksine, WebTransport, belirli bir HTML sayfasından bağımsız olarak istemci-sunucu iletişimlerini gerçekleştirmenize olanak tanıyan Web Çalışanları içinde desteklenir. WebTransport, Akışlar ile uyumlu bir arayüz sunduğundan geri basıncı ile ilgili optimizasyonları destekler.

Ancak, memnun olduğunuz, çalışan bir WebRTC istemci/sunucu kurulumuna sahipseniz, WebTransport'a geçmek çok fazla avantaj sağlamayabilir.

Deneyin

WebTransport ile deneme yapmanın en iyi yolu, uyumlu bir HTTP/3 sunucusu başlatmaktır. Daha sonra istemci/sunucu iletişimlerini denemek için bu sayfayı bir temel JavaScript istemcisi ile kullanabilirsiniz.

Ayrıca, webtransport.day adresinde topluluk tarafından yönetilen bir yankı sunucusu mevcuttur.

API'yi kullanma

WebTransport, Streams API gibi modern web platformu temel öğelerini temel alarak tasarlanmıştır. Büyük ölçüde vaatlere dayalıdır ve async ile await ile iyi performans gösterir.

Chromium'daki mevcut WebTransport uygulaması, üç farklı trafik türünü desteklemektedir: veri birimleri ve hem tek yönlü hem de çift yönlü akışlar.

Sunucuya bağlanılıyor

WebTransport örneği oluşturarak bir HTTP/3 sunucusuna bağlanabilirsiniz. URL'nin şeması https olmalıdır. Bağlantı noktası numarasını açık bir şekilde belirtmeniz gerekir.

Bağlantının kurulmasını beklemek için ready taahhüdünü kullanmanız gerekir. Kurulum tamamlanana kadar bu taahhüt yerine getirilmez ve QUIC/TLS aşamasında bağlantı başarısız olursa reddedilecektir.

closed taahhüdü, bağlantı normal şekilde kapatıldığında yerine gelir ve beklenmedik bir şekilde kapanma olduğunda reddedilir.

Sunucu, bir istemci göstergesi hatası nedeniyle bağlantıyı reddederse (ör. URL yolu geçersizdir) bu durum closed bağlantının reddedilmesine, ready ise çözümlenmeden kalmasına neden olur.

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'leri

Sunucuya bağlanan bir WebTransport örneğiniz olduğunda, bu örneği datagram olarak bilinen ayrı veri bitlerini gönderip almak için kullanabilirsiniz.

writeable alıcısı, bir web istemcisinin sunucuya veri göndermek için kullanabileceği bir WritableStream döndürür. readable alıcısı ReadableStream döndürerek sunucudaki verileri dinlemenizi sağlar. Her iki akış da doğası gereği güvenilir değildir. Bu nedenle, yazdığınız verilerin sunucuya alınmaması veya bunun tersi de mümkündür.

Her iki akış türünde de veri aktarımı için Uint8Array örnekleri kullanılır.

// 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'leri

Sunucuya bağlandıktan sonra, WebTransport'u kullanarak Streams API'leri üzerinden veri gönderip alabilirsiniz.

Tüm akışların her parçası bir Uint8Array'dir. Datagram API'lerinin aksine bu akışlar güvenilirdir. Ancak her akış bağımsızdır. Bu nedenle, akışlar arasında veri sırası garanti edilmez.

WebTransportSendStream

WebTransportSendStream, web istemcisi tarafından WebTransport örneğinin createUnidirectionalStream() yöntemi kullanılarak oluşturulur ve WebTransportSendStream için bir taahhüt döndürür.

İlişkili HTTP/3 bağlantısını kapatmak için WritableStreamDefaultWriter öğesinin close() yöntemini kullanın. Tarayıcı, ilişkilendirilmiş bağlantıyı kapatmadan önce bekleyen tüm verileri göndermeye çalışır.

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

Benzer şekilde, sunucuya bir RESET\_STREAM göndermek için WritableStreamDefaultWriter öğesinin abort() yöntemini kullanın. abort() kullanılırken tarayıcı henüz gönderilmemiş tüm beklemedeki verileri silebilir.

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, sunucu tarafından başlatılır. WebTransportReceiveStream edinme, bir web istemcisi için iki adımlı bir işlemdir. Öncelikle, WebTransport örneğinin incomingUnidirectionalStreams özelliğini çağırır ve bu özellik ReadableStream değerini döndürür. Bu ReadableStream öğesinin her bir parçası, sırayla, sunucu tarafından gönderilen Uint8Array örneklerini okumak için kullanılabilecek bir WebTransportReceiveStream'tır.

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

Akışın kapatılmasını, ReadableStreamDefaultReader ile ilgili closed beklentisini kullanarak tespit edebilirsiniz. Temel HTTP/3 bağlantısı FIN bitiyle kapatıldığında tüm veriler okunduktan sonra closed taahhüdü yerine getirilir. HTTP/3 bağlantısı aniden kapatıldığında (örneğin, RESET\_STREAM tarafından) closed taahhüdü reddedilir.

// 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, sunucu veya istemci tarafından oluşturulabilir.

Web müşterileri, WebTransport örneğinin createBidirectionalStream() yöntemini kullanarak öğe oluşturabilir. Bu yöntem WebTransportBidirectionalStream için söz verir.

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

WebTransport örneğinin incomingBidirectionalStreams özelliğiyle sunucu tarafından oluşturulmuş ve ReadableStream döndüren bir WebTransportBidirectionalStream için dinleyebilirsiniz. Bu ReadableStream öğesinin her bir parçası, karşılığında bir WebTransportBidirectionalStream'dır.

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, yalnızca WebTransportSendStream ve WebTransportReceiveStream öğelerinin kombinasyonudur. Önceki iki bölümde verilen örnekler, her birinin nasıl kullanılacağını açıklar.

Diğer örnekler

WebTransport taslak spesifikasyonu, tüm yöntemler ve özelliklerle ilgili belgelerin yanı sıra çok sayıda ek satır içi örnek içerir.

Chrome'un Geliştirici Araçları'nda WebTransport

Maalesef Chrome'un Geliştirici Araçları şu anda WebTransport'u desteklememektedir. Burada Geliştirici Araçları arayüzüyle ilgili güncellemeler hakkında bildirim almak için bu Chrome sorununa göz atın.

Çoklu Dolgu

Polyfill (veya kullanabileceğiniz bağımsız bir modül olarak işlevsellik sağlayan midilli dolgu) webtransport-ponyfill-websocket webTransport'un bazı özelliklerini uygulayan geniş bir uygulamadır. Kısıtlamaları dikkatlice okuyun projenin README ve bu çözümün kullanım alanınızda işe yarayıp yaramayacağını belirleyin.

Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar

Güvenilir bilgiler için taslak spesifikasyonların ilgili bölümüne bakın.

Geri bildirim

Chrome ekibi, bu API'yle ilgili düşüncelerinizi ve deneyimlerinizi öğrenmek ister.

API tasarımıyla ilgili geri bildirim

API ile ilgili tuhaf olan veya beklendiği gibi çalışmayan bir şeyler mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan eksik parçalar mı var?

Web Transport GitHub deposunda bir sorun bildirin veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu?

https://new.crbug.com adresinden hata bildiriminde bulunun. Ürünün yeniden oluşturulması için basit talimatlarla birlikte mümkün olduğunca fazla ayrıntı ekleyin.

API'yi kullanmayı mı planlıyorsunuz?

Herkese açık desteğiniz Chrome'un özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçilerine, bunları desteklemenin ne kadar önemli olduğunu gösterir.

• Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #WebTransport ve bunu nerede ve nasıl kullandığınıza ilişkin ayrıntılar.

Genel tartışmalar

Diğer kategorilerden birine uymayan genel sorular veya sorunlar için web-transport-dev Google Grubu'nu kullanabilirsiniz.

Teşekkür

Bu makalede WebTransport Explainer, taslak spesifikasyonu ve ilgili tasarım belgelerinden alınan bilgiler bulunmaktadır. Bu temeli atmaları için ilgili yazarlara teşekkür ederiz.

Bu gönderideki hero resim, Unsplash'teki Robin Pierre tarafından sağlanmıştır.