WebTransport'u kullanma

Jeff Posnick

Yayınlanma tarihi: 8 Haziran 2020

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 ile verilerin güvenilir olmayan bir şekilde, Akış API'leri ile ise güvenilir bir şekilde gönderilmesini destekler.

Datagramlar, güçlü teslimat garantileri gerektirmeyen verilerin gönderilmesi ve alınması için idealdir. Tek tek 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üvenilir olmayan 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.

Not: Bu teklifteki kavramların çoğu, daha önce Chrome'a dahil edilmeyen QuicTransport kaynaklı denemesi kapsamında denenmişti. WebTransport, QuicTransport ile benzer kullanım alanlarında yardımcı olur. Aralarındaki temel fark, temel aktarım protokolünün QUIC yerine HTTP/3 olmasıdır.

Tarayıcı desteği

Browser Support

• 97
• 97
• 114
• 26.4

Source

Evrensel tarayıcı desteği olmayan tüm özelliklerde olduğu gibi, özellik algılama eklemenizi öneririz.

Diğer teknolojilerle ilişkisi

WebTransport, WebSocket'lerin yerine geçer mi?

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şimleri, tek bir güvenilir ve sıralı mesaj akışı etrafında şekillendirilir. 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 yerini almazlar.

WebTransport'u kullanırken, datagram API'leri veya eşzamanlı birden fazla Streams API örneğiyle WebSockets'te sorun olabilen öncelikli satır engelleme konusunda endişelenmenize gerek kalmaz. 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şturulurken performans avantajları elde edilir.

WebTransport, yeni bir taslak spesifikasyonun parçasıdır. Bu nedenle, istemci ve sunucu kitaplıkları etrafındaki WebSocket ekosistemi ç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 Yuva 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.

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

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. WebTransport, WebRTC'nin aksine 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.

Deneme

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

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 bağlantı QUIC/TLS aşamasında 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 belirtme hatası (ör. URL'nin yolu geçersiz) nedeniyle reddederse bu durum closed'nin reddedilmesine neden olurken ready çözülmeden 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ğiniz olduğunda bunu kullanarak datagram olarak bilinen ayrı veri parçalarını gönderebilir ve alabilirsiniz.

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ı ve bunun tersi de mümkündür.

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

Not: Chrome, ReadableStream için şu anda eş zamansız yineleyici kullanıma sunmamaktadır. Şu an için akıştan okumanın en iyi yolu getReader() yöntemiyle birlikte while() döngüsünü 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ı 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'ın 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 özelliğinin abort() yöntemini kullanın. abort() kullanılırken 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 WebTransportReceiveStream başlatır. WebTransportReceiveStream alma, web istemcisi için iki adımlı bir işlemdir. İlk olarak istemci, WebTransport örneğinin incomingUnidirectionalStreams özelliğini çağırır. Bu işlem, 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 (ör. RESET_STREAM ile) closed sözü 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 söz döndüren bir söz oluşturabilir.

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

WebTransportBidirectionalStream örneğinin incomingBidirectionalStreams özelliğiyle sunucu tarafından oluşturulan WebTransportBidirectionalStream öğesini dinleyebilirsiniz. Bu işlem, ReadableStream değerini döndürür.WebTransport 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 kombinasyonudur. Önceki iki bölümdeki örneklerde her birinin nasıl kullanılacağı açıklanmaktadır.

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 hakkında dikkat edilmesi gerekenler

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

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 düşüncelerinizi mevcut bir soruna ekleyin.
• Chromium'un uygulanması hakkında hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ve yeniden üretme talimatlarını ekleyin.

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

• #WebTransport hashtag'ini ve nerede, nasıl kullandığınıza dair ayrıntıları ekleyerek @ChromiumDev hesabına 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

WebTransport Açıklayıcı ve taslak spesifikasyon bilgilerini dahil ettik. Bu temeli sağlayan ilgili yazarlara teşekkür ederiz.