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. Sıralı bir veya daha fazla 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 maliyet olmadan açılabilir ve kapatılabilir.

Kullanım alanları

Bu, geliştiricilerin WebTransport'u 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.

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'ı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'ın 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 WebSockets günümüzde 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, HTTP/3'ü kullanır. HTTP/3 de "altyapıda" UDP kullanır. Ancak WebTransport, şifreleme ve tıkanıklık kontrolüyle ilgili gereksinimleri 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.

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 çok 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, datagrams 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);
}

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 bağlantısını kapatmak için WritableStreamDefaultWriter öğesinin close() yöntemini kullanın. Tarayıcı, ilişkili bağlantıyı 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 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 bağlantısı FIN bitiyle kapatıldığında, tüm veriler okunduktan sonra closed vaadi yerine getirilir. HTTP/3 bağlantısı 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 dinleyebilir ve bu WebTransportBidirectionalStream, ReadableStream döndürür. 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 bir durum 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çıklayıcısı, 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.