WebTransport'u kullanma

WebTransport, düşük gecikme süreli, çift yönlü, istemci-sunucu mesajlaşması sunan bir API'dir. Kullanım alanları ve uygulamanın geleceği hakkında nasıl geri bildirim vereceğiniz 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. Web istemcisi ile HTTP/3 sunucusu arasındaki iki yönlü iletişim için tasarlanmıştır. Datagram API'leri aracılığıyla verilerin güvenilir olmayan bir şekilde, akış API'leri aracılığıyla ise güvenilir bir şekilde gönderilmesini destekler.

Datagramlar, güçlü teslimat garantisi gerektirmeyen verileri göndermek ve almak için idealdir. Veri paketlerinin boyutu, temel bağlantının maksimum iletim birimi (MTU) ile sınırlıdır. Bu paketler başarıyla iletilebilir veya iletilemeyebilir. İletildikleri takdirde rastgele bir sırada ulaşabilirler. Bu özellikler, datagram API'lerini düşük gecikmeli ve en iyi çaba prensibiyle veri iletimi için ideal hale getirir. Datagramları, Kullanıcı Datagram Protokolü (UDP) mesajları olarak düşünebilirsiniz ancak bunlar şifrelenmiş ve tıkanıklık kontrolü yapılmış mesajlardır.

Bunun aksine, akış API'leri güvenilir ve sıralı veri aktarımı sağlar. Sıralı verilerin bir veya daha fazla akışını göndermeniz ya da almanız gereken senaryolar için uygundur. Birden fazla WebTransport akışı kullanmak, birden fazla TCP bağlantısı oluşturmaya benzer. Ancak HTTP/3, arka planda daha hafif olan QUIC protokolünü kullandığından bu akışlar, daha az ek yükle açılıp kapatılabilir.

Kullanım alanları

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

• Oyun durumunu, küçük, güvenilmez ve sırası bozulmuş iletilerle düzenli aralıklarla ve minimum gecikmeyle sunucuya gönderme.
• Diğer veri akışlarından bağımsız olarak, sunucudan gönderilen medya akışlarını minimum gecikmeyle alma.
• Bir web sayfası açıkken sunucudan gönderilen bildirimleri alma

WebTransport'u nasıl kullanmayı planladığınız hakkında daha fazla bilgi edinmek istiyoruz.

Tarayıcı desteği

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

Mevcut durum

WebTransport'un diğer teknolojilerle ilişkisi

WebTransport, WebSocket'lerin yerine mi geçiyor?

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

WebSockets iletişimi, tek bir güvenilir ve sıralı mesaj akışı etrafında şekillenir. 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'un datagram API'leri, güvenilirlik veya sıralama konusunda garanti vermeden düşük gecikmeli teslimat sağlar. Bu nedenle, WebSockets'in doğrudan yerine kullanılamaz.

WebTransport'u, datagram API'leri veya eşzamanlı birden fazla Streams API örneği aracılığıyla kullanmak, WebSockets'te sorun olabilecek ön sıradaki engelleme konusunda endişelenmenize gerek kalmayacağı anlamına gelir. Ayrıca, temel alınan QUIC el sıkışması, TLS üzerinden TCP başlatmaktan daha hızlı olduğundan yeni bağlantılar oluştururken performans avantajları elde edersiniz.

WebTransport, yeni bir taslak spesifikasyonun parçasıdır. Bu nedenle, istemci ve sunucu kitaplıkları etrafındaki WebSocket ekosistemi şu anda çok daha sağlamdır. Yaygın sunucu kurulumlarıyla ve geniş web istemcisi desteğiyle "kullanıma hazır" bir çözüm arıyorsanız WebSockets günümüzde daha iyi bir seçimdir.

WebTransport, UDP Socket API ile aynı mı?

Hayır. WebTransport, UDP Socket API değildir. WebTransport, HTTP/3'ü kullanır. HTTP/3 ise "arka planda" UDP'yi kullanır. WebTransport, şifreleme ve tıkanıklık kontrolüyle ilgili gereksinimleri nedeniyle temel bir UDP Socket API'sinden daha fazlasını sunar.

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 ile uyumlu bir sunucu çalıştırmak, WebRTC sunucusu çalıştırmaktan daha az kurulum ve yapılandırma gerektirir. WebRTC sunucusu çalıştırmak için çalışan bir aktarım elde etmek amacıyla birden fazla protokolün (ICE, DTLS ve SCTP) anlaşılması gerekir. WebRTC, başarısız istemci/sunucu görüşmelerine yol açabilecek çok daha fazla hareketli parça içerir.

WebTransport API, web geliştiricilerin 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 daha çok benzer. WebRTC'nin aksine WebTransport, Web Workers içinde desteklenir. Bu sayede, belirli bir HTML sayfasından bağımsız olarak istemci-sunucu iletişimi gerçekleştirebilirsiniz. WebTransport, Streams uyumlu bir arayüz sunduğundan geri basınç ile ilgili optimizasyonları destekler.

Ancak, halihazırda memnun olduğunuz çalışan bir WebRTC istemci/sunucu kurulumunuz varsa WebTransport'a geçiş pek avantaj sağlamayabilir.

Deneyin

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

Ayrıca, topluluk tarafından bakımı yapılan bir echo sunucusu webtransport.day adresinde kullanılabilir.

API'yi kullanma

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

Chromium'daki mevcut WebTransport uygulaması üç farklı trafik türünü destekler: datagramlar, tek yönlü ve çift yönlü akışlar.

Sunucuya bağlanma

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ça belirtmeniz gerekir.

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

Bağlantı normal şekilde kapandığında closed sözü yerine getirilir, kapanma beklenmedik bir şekilde gerçekleştiyse söz reddedilir.

Sunucu, bağlantıyı bir istemci belirtisi hatası nedeniyle (ör. URL'nin yolu geçersiz) reddederse bu durum closed'nin reddedilmesine neden olurken ready çözümlenmeden 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.t>hen(() = {
  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ğiniz olduğunda bunu, datagramlar olarak bilinen ayrı veri parçalarını göndermek ve almak için kullanabilirsiniz.

writeable alıcı, web istemcisinin sunucuya veri göndermek için kullanabileceği bir WritableStream döndürür. readable alıcı, ReadableStream döndürür. Bu sayede, sunucudan gelen verileri dinleyebilirsiniz. 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 tersi bir durum yaşanabilir.

Her iki türdeki akışta da 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, 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ı Uint8Array olarak kabul edilir. Datagram API'lerinin aksine, bu akışlar güvenilirdir. Ancak her akış bağımsız olduğundan akışlar arası veri sırası garanti edilmez.

WebTransportSendStream

WebTransportSendStream için söz döndüren bir WebTransport örneğinin createUnidirectionalStream() yöntemi kullanılarak web istemcisi tarafından bir WebTransportSendStream oluşturulur.

İlişkili HTTP/3 akışını kapatmak için WritableStreamDefaultWriter close() yöntemini kullanın. Tarayıcı, ilişkili akışı 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 abort() yöntemini kullanın. abort() kullanılırken tarayıcı, henüz gönderilmemiş bekleyen verileri atabilir.

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 alma, web istemcisi için iki adımlı bir işlemdir. İlk olarak, bir WebTransport örneğinin incomingUnidirectionalStreams özelliğini çağırır ve bu özellik bir ReadableStream döndürür. Bu ReadableStream öğesinin her bir parçası, sunucu tarafından gönderilen Uint8Array örneklerini okumak için kullanılabilecek bir WebTransportReceiveStream öğesidir.

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 öğesinin closed sözünü kullanarak akışın kapatıldığını algılayabilirsiniz. Temel HTTP/3 akışı FIN bitiyle kapatıldığında, tüm veriler okunduktan sonra closed sözü yerine getirilir. HTTP/3 akışı aniden kapatıldığında (örneğin, RESET_STREAM tarafından) closed sözü reddedilir.

// Assume an active receiveStream
const reader = receiveStream.readable.getReader();
reader.closed.then(() => {
  console.log('The receiveStream closed gracefully.');
}).ca>tch(() = {
  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 tane oluşturabilir. Bu yöntem, WebTransportBidirectionalStream için bir söz döndürür.

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şturulan WebTransportBidirectionalStream öğesini dinleyebilirsiniz. Bu işlem, ReadableStream döndürür. Söz konusu ReadableStream öğesinin her bir parçası da WebTransportBidirectionalStream'dir.

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

Diğer örnekler

WebTransport taslak spesifikasyonu, tüm yöntemler ve özelliklerle ilgili tam belgelerin yanı sıra 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'u desteklemiyor. Geliştirici Araçları arayüzündeki güncellemelerden haberdar olmak için bu Chrome sorununa "yıldız" ekleyebilirsiniz.

Polyfill

WebTransport'un bazı özelliklerini uygulayan webtransport-ponyfill-websocket adlı bir polyfill (daha doğrusu, kullanabileceğiniz bağımsız bir modül olarak işlevsellik 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üvenlik ile ilgili dikkat edilmesi gerekenler

Yetkili rehberlik için taslak spesifikasyonun ilgili bölümüne bakın.

Geri bildirim

Chrome ekibi, bu API'yi kullanırken yaşadığınız deneyimler ve düşünceleriniz hakkında bilgi edinmek istiyor.

API tasarımıyla ilgili geri bildirimler

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 düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun mu var?

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

https://new.crbug.com adresinden hata bildirin. Yeniden üretmeyle ilgili basit talimatların yanı sıra 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ı satıcılarına bu özelliklerin desteklenmesinin ne kadar önemli olduğunu gösterir.

• @ChromiumDev adresine #WebTransport hashtag'ini ve nerede, nasıl kullandığınıza dair ayrıntıları içeren bir tweet gönderin.

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 Açıklayıcı, taslak spesifikasyonu ve ilgili tasarım belgelerindeki bilgiler yer almaktadır. Bu temeli sağlayan ilgili yazarlara teşekkür ederiz.

Bu yayındaki hero resmi, Unsplash'te Robin Pierre tarafından çekilmiştir.