WebTransport'u kullanma

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

Jeff Posnick

Arka plan

WebTransport nedir?

WebTransport, iki 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 aracılığıyla güvenilir olmayan hem de akış API'leri aracılığıyla güvenilir veri göndermeyi destekler.

Veri paketleri, güçlü teslimat garantilerine ihtiyaç duymayan verilerin gönderilmesi ve alınması için idealdir. Veri paketlerinin boyutu, temel bağlantının maksimum aktarım birimi (MTU) ile sınırlıdır. Paketler başarıyla aktarılabilir veya aktarılamayabilir. Aktarıldıkları takdirde de rastgele bir sırada gelebilirler. Bu özellikler, veri paketi API'lerini düşük gecikmeli, en iyi çabayla veri aktarımı için ideal kılar. Datagramları, şifrelenmiş ve tıkanıklık kontrollü kullanıcı datagram protokolü (UDP) mesajları olarak düşünebilirsiniz.

Buna karşılık, akış API'leri güvenilir, sıralı veri aktarımı sağlar. Bu veri akışları, bir veya daha fazla sıralı veri akışı göndermeniz ya da almanız gereken senaryolara uygundur. Birden fazla WebTransport akışı kullanmak, birden fazla TCP bağlantısı oluşturmaya benzer. Ancak HTTP/3, arka planda daha hafif QUIC protokolünü kullandığından bu bağlantılar çok fazla ek yük olmadan açılabilir ve kapatılabilir.

Kullanım alanları

Bu, geliştiricilerin WebTransport'ı kullanabileceği olası yolların kısa bir listesidir.

• Oyun durumunu düzenli aralıklarla, küçük, güvenilir olmayan ve sıra dışı mesajlar aracılığıyla sunucuya minimum gecikmeyle gönderme.
• Diğer veri akışlarından bağımsız olarak, bir sunucudan minimum gecikmeli medya akışları alma.
• Bir web sayfası açıkken sunucudan gönderilen bildirimleri alma

WebTransport'ı kullanmayı planladığınız yöntem hakkında daha fazla bilgi edinmek isteriz.

Not: Bu önerideki kavramların çoğu, daha önce Chrome'da kullanıma sunulmayan önceki QuicTransport kaynak denemesi kapsamında deneysel olarak kullanıldı. WebTransport, QuicTransport ile benzer kullanım alanlarında yardımcı olur. Aradaki temel fark, temel aktarım protokolünün QUIC yerine HTTP/3 olmasıdır.

Tarayıcı desteği

Browser Support

• 97
• 97
• 114
• x

Source

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

Step	Durum
1. Açıklayıcı oluşturma	Tamamlandı
2. Spesifikasyonun ilk taslağını oluşturma	Tamamlandı
3. Geri bildirim toplayın ve tasarımı tekrarlayın	Tamamlandı
4. Kaynak denemesi	Tamamlandı
5. Lansman	Chromium 97

WebTransport'ın diğer teknolojilerle ilişkisi

WebTransport, WebSocket'lerin yerine geçer mi?

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

WebSocket iletişimleri, tek bir güvenilir ve sıralı mesaj akışı etrafında modellenmiştir. Bu, bazı iletişim ihtiyaçları için uygundur. Bu özelliklere ihtiyacınız varsa WebTransport'un akış API'leri de bunları sağlayabilir. Buna karşılık, WebTransport'ın veri paketi API'leri, güvenilirlik veya sıralama konusunda garanti vermeden düşük gecikmeli yayınlama sağlar. Bu nedenle, WebSocket'lerin doğrudan yerini almaz.

WebTransport'ı veri paketi API'leri veya birden fazla eşzamanlı Streams API örneği aracılığıyla kullanmak, WebSocket'lerde sorun oluşturabilecek sıra başında engelleme hakkında endişelenmenize gerek olmadığı anlamına gelir. Ayrıca, temel QUIC el sıkışması TLS üzerinden TCP'yi başlatmaktan daha hızlı olduğundan yeni bağlantılar kurarken performans avantajları da vardır.

WebTransport, yeni bir taslak spesifikasyonun bir parçasıdır. Bu nedenle, istemci ve sunucu kitaplıklarıyla ilgili WebSocket ekosistemi şu anda çok daha güçlüdür. Yaygın sunucu kurulumlarında ve geniş web istemcisi desteğiyle "kutudan çıkar çıkmaz" çalışacak bir çözüme ihtiyacınız varsa günümüzde WebSockets daha iyi bir seçimdir.

WebTransport, UDP Socket API ile aynı mıdır?

Hayır. WebTransport bir UDP Soket API'si değildir. WebTransport, "altyapıda" UDP kullanan HTTP/3'ü kullansa da şifreleme ve tıkanıklık kontrolüyle ilgili koşulları nedeniyle temel bir UDP Socket API'sinden daha fazlasıdır.

WebTransport, WebRTC veri kanallarına alternatif midir?

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

Not: WebRTC veri kanalları eşler arası iletişimi destekler ancak WebTransport yalnızca istemci-sunucu bağlantısını destekler. Doğrudan birbirleriyle iletişim kurması gereken birden fazla istemciniz varsa WebTransport uygun bir alternatif değildir.

Genel olarak, HTTP/3 uyumlu bir sunucu çalıştırmak, çalışan bir aktarım elde etmek için birden fazla protokolü (ICE, DTLS ve SCTP) anlamayı gerektiren bir WebRTC sunucusunu yönetmekten daha az kurulum ve yapılandırma gerektirir. WebRTC, istemci/sunucu pazarlıklarının başarısız olmasına neden olabilecek daha birçok hareketli parça içerir.

WebTransport API, web geliştirici kullanım alanları göz önünde bulundurularak tasarlanmıştır ve WebRTC'nin veri kanalı arayüzlerini kullanmaktan ziyade modern web platformu kodu yazmaya benzer bir deneyim sunar. WebRTC'nin aksine WebTransport, belirli bir HTML sayfasından bağımsız olarak istemci-sunucu iletişimi gerçekleştirmenize olanak tanıyan Web İşleyiciler içinde desteklenir. WebTransport, Streams uyumlu bir arayüz sunduğundan geri basınç ile ilgili optimizasyonları destekler.

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

Deneyin

WebTransport'ı denemenin en iyi yolu, uyumlu bir HTTP/3 sunucusu başlatmaktır. Ardından, istemci/sunucu iletişimini denemek için bu sayfayı temel bir JavaScript istemciyle kullanabilirsiniz.

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

API'yi kullanma

WebTransport, Streams API gibi modern web platformu temel öğeleri üzerine tasarlanmıştır. Bu yöntem, sözlere büyük önem verir ve async ile await ile iyi çalışır.

Chromium'daki mevcut WebTransport uygulaması üç farklı trafik türünü destekler: veri paketleri ve hem tek yönlü hem de iki yönlü akışlar.

Bir sunucuya bağlanma

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

Bağlantının kurulmasını beklemek için ready vaadini kullanmanız gerekir. Bu taahhüt, kurulum tamamlanana kadar yerine getirilmez ve bağlantı QUIC/TLS aşamasında başarısız olursa reddedilir.

closed vaadi, bağlantı normal şekilde kapandığında yerine getirilir ve beklenmedik bir şekilde kapanırsa reddedilir.

Sunucu, istemci belirtisi hatası (ör. URL'nin yolu geçersiz) nedeniyle bağlantıyı reddederse closed reddedilir ve ready çözülmemiş kalır.

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

Bir sunucuya bağlı bir WebTransport örneği oluşturduktan sonra, veri paketleri olarak bilinen ayrı veri bitlerini göndermek ve almak için bu örneği kullanabilirsiniz.

writeable alıcı, web istemcisinin sunucuya veri göndermek için kullanabileceği bir WritableStream döndürür. readable alıcı, sunucudaki verileri dinlemenize olanak tanıyan bir ReadableStream döndürür. Her iki akış da doğası gereği güvenilir değildir. Bu nedenle, yazdığınız verilerin sunucu tarafından alınmaması veya bunun tam tersinin gerçekleşmesi mümkündür.

Her iki akış türü de veri aktarımı için Uint8Array örnekleri kullanı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);
}

Not: Chrome, ReadableStream için şu anda asynchronize iteratör sağlamaz. Akıştan okumanın en iyi yolu şu anda getReader() yöntemini while() döngüsüyle birlikte kullanmaktır.

Streams API'leri

Sunucuya bağlandıktan sonra, Streams API'leri aracılığıyla veri göndermek ve almak için WebTransport'u da kullanabilirsiniz.

Tüm akışların her bir parçası bir Uint8Array'tür. Datagram API'lerinin aksine bu akışlar güvenilirdir. Ancak her akış bağımsız olduğundan akışlar arasındaki veri sırası garanti edilmez.

WebTransportSendStream

Web istemcisi, WebTransport örneğinin createUnidirectionalStream() yöntemini kullanarak WebTransportSendStream için bir promise döndüren bir WebTransportSendStream oluşturur.

İlişkili HTTP/3 akışını kapatmak için WritableStreamDefaultWriter öğesinin close() yöntemini kullanın. Tarayıcı, ilişkili akışı gerçekten 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 RESET_STREAM göndermek için WritableStreamDefaultWriter sınıfının abort() yöntemini kullanın. abort() kullanıldığında tarayıcı, henüz gönderilmemiş bekleyen tüm 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

Sunucu tarafından bir WebTransportReceiveStream başlatılır. Web istemcisi için WebTransportReceiveStream edinme işlemi iki adımdan oluşur. Öncelikle, bir WebTransport örneğinin incomingUnidirectionalStreams özelliğini çağırır ve bu özellik bir ReadableStream döndürür. Bu ReadableStream'ün her bir parçası da sunucu tarafından gönderilen Uint8Array örneklerini okumak için kullanılabilen bir WebTransportReceiveStream'dur.

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 kaynağının closed vaadini kullanarak akışın kapandığını algılayabilirsiniz. Temel HTTP/3 akışı FIN bitiyle kapatıldığında, tüm veriler okunduktan sonra closed vaadi yerine getirilir. HTTP/3 aktarımı aniden kapatıldığında (ör. RESET_STREAM tarafından) closed vaadi 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 istemcileri, WebTransport örneğinin createBidirectionalStream() yöntemini kullanarak bir WebTransportBidirectionalStream için bir söz döndüren bir tane oluşturabilir.

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

Sunucu tarafından oluşturulan ve WebTransport örneğinin incomingBidirectionalStreams özelliğini içeren bir WebTransportBidirectionalStream dinleyerek ReadableStream döndürebilirsiniz. Bu ReadableStream'ün her bir parçası da bir WebTransportBidirectionalStream'dur.

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 ve WebTransportReceiveStream öğelerinin bir birleşimidir. Önceki iki bölümdeki örneklerde bunların her birinin nasıl kullanılacağı açıklanmaktadır.

Diğer örnekler

WebTransport taslak spesifikasyonu, tüm yöntem ve özelliklerin tam dokümanları ile birlikte bir dizi 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'ı desteklememektedir. DevTools arayüzündeki güncellemeler hakkında bildirim almak için bu Chrome sorununu "yıldız" ile işaretleyebilirsiniz.

Çoklu dolgu

WebTransport'ın bazı özelliklerini uygulayan webtransport-ponyfill-websocket adlı bir polyfill (veya kullanabileceğiniz bağımsız bir modül olarak işlev sağlayan ponyfill) mevcuttur. Bu çözümün kullanım alanınız için uygun olup olmadığını belirlemek amacıyla projenin README bölümündeki kısıtlamaları dikkatlice okuyun.

Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar

Yetkili bir kaynaktan bilgi edinmek için taslak spesifikasyonun ilgili bölümüne bakın.

Geri bildirim

Chrome ekibi, bu API'yi kullanma deneyiminiz ve düşünceleriniz hakkında bilgi edinmek istiyor.

API tasarımı hakkında geri bildirim

API ile ilgili garip veya beklendiği gibi çalışmayan bir şey var mı? Yoksa fikrinizi uygulamak için eksik parçalar mı var?

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

Uygulamayla ilgili sorun mu yaşıyorsunuz?

Chrome'un uygulamasında bir hata mı buldunuz?

https://new.crbug.com adresinden hata kaydı oluşturun. Hatanın yeniden oluşturulmasına yönelik basit talimatlarla birlikte mümkün olduğunca fazla ayrıntı ekleyin.

API'yi kullanmayı planlıyor musunuz?

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

• #WebTransport hashtag'ini ve nerede ve nasıl kullandığınızla ilgili ayrıntıları kullanarak @ChromiumDev hesabına tweet gönderin.

Genel tartışmalar

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

Teşekkür ederiz

Bu makalede, WebTransport Açıklaması, taslak spesifikasyon ve ilgili tasarım dokümanlarından alınan bilgiler yer almaktadır. Bu temeli sağladıkları için ilgili yazarlara teşekkür ederiz.

Bu yayındaki hero resmi, Unsplash'taki Robin Pierre tarafından oluşturulmuştur.