WebTransport, düşük gecikmeli, çift yönlü, istemci-sunucu mesajlaşması sunan bir API'dir. Kullanım alanları ve uygulamanın geleceği hakkında nasıl geri bildirimde bulunabileceğiniz hakkında daha fazla bilgi edinin.
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ında iki yönlü iletişim için tasarlanmıştır. Datagram API'leri ve streams API'leri üzerinden güvenilir olmayan bir şekilde veri göndermeyi destekler.
Datagramlar, güçlü yayınlama garantileri gerektirmeyen verileri göndermek ve almak için idealdir. Ayrı ayrı veri paketlerinin boyutu, temel bağlantının maksimum iletim birimi (MTU) ile sınırlandırılır. Başarıyla iletilebilir veya aktarılmayabilir. Aktarılmaları halinde rastgele bir sırayla gelebilirler. Bu özellikler datagram API'lerini düşük gecikmeli ve en iyi verimi iletimi için ideal hale getirir. Datagramları, kullanıcı datagram protokolü (UDP) mesajları olarak düşünebilirsiniz ancak bu mesajlar şifrelenmiş ve sıkışıklık kontrollüdür.
Öte yandan, akış API'leri sıralı veri aktarımı sunar ve güvenilir veri aktarımı sağlar. Sıralı veri akışları için bir veya daha fazla veri akışı göndermeniz ya da almanız gereken senaryolar için uygundur. Birden fazla WebTransport akışı kullanmak, birden çok TCP bağlantısı kurmaya benzer ancak HTTP/3, arka planda daha hafif QUIC protokolünü kullandığından, bunlar 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 sunucuya küçük, güvenilir olmayan, sıra dışı mesajlar üzerinden minimum gecikmeyle düzenli aralıklarla 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 gönderilen 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
| Adım | Durum |
|---|---|
| 1. Açıklayıcı oluşturun | Tamamlandı |
| 2. İlk spesifikasyon taslağını oluşturma | Tamamlandı |
| 3. Geri bildirim alma ve tasarımı yineleme | Eksiksiz |
| 4. Kaynak denemesi | Eksiksiz |
| 5. Lansman | Chromium 97 |
WebTransport'un diğer teknolojilerle ilişkisi
WebTransport, WebSockets'in yerini mi alıyor?
Olabilir. WebSockets veya WebTransport'un kullanılacak geçerli iletişim protokolleri olabileceği kullanım alanları vardır.
WebSocket iletişimleri, tek, güvenilir ve sıralı bir mesaj akışı etrafında modellenir. Bu, bazı iletişim ihtiyacı türleri 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 sipariş verme garantisi vermeden düşük gecikmeli teslimat sağladığından WebSockets'in doğrudan yerine geçmez.
WebTransport'u, datagram API'leri veya birden fazla eşzamanlı Streams API örneği aracılığıyla kullandığınızda, WebSockets ile ilgili bir sorun olabilecek satır başı engelleme konusunda endişelenmenize gerek yoktur. Ayrıca, temel QUIC el sıkışması TLS üzerinden TCP'yi başlatmaktan daha hızlı olduğundan, yeni bağlantılar kurmanın performans açısından avantajları vardır.
WebTransport, yeni bir taslak spesifikasyonunun parçasıdır ve dolayısıyla, istemci ve sunucu kitaplıkları çevresindeki WebSocket ekosistemi şu anda çok daha sağlamdır. Yaygın sunucu kurulumlarıyla ve kapsamlı web istemcisi desteği ile "kullanıma hazır" bir çözüme ihtiyacınız varsa WebSockets bugün daha iyi bir seçimdir.
WebTransport, UDP Socket API ile aynı mıdır?
Hayır. WebTransport bir UDP Socket API değildir. WebTransport, HTTP/3'ü kullanırken UDP'yi "gelişmiş seçenekler" altında kullanırken WebTransport, şifreleme ve tıkanıklık kontrolüyle ilgili olarak onu temel bir UDP Yuvası API'sinden daha farklı kılan gereksinimlere sahiptir.
WebTransport, WebRTC veri kanallarına alternatif midir?
Evet, istemci-sunucu bağlantıları için. Temel protokoller farklı olsa da WebTransport, WebRTC veri kanallarıyla aynı özelliklerin çoğunu paylaşır.
Genel olarak, HTTP/3 uyumlu bir sunucu çalıştırmak, bir WebRTC sunucusunun bakımına kıyasla daha az kurulum ve yapılandırma gerektirir. Bu da, çalışan bir aktarım elde etmek için birden çok protokolün (ICE, DTLS ve SCTP) anlaşılmasını gerektirir. WebRTC, istemci/sunucu görüşmelerinin başarısız olmasına yol açabilecek çok daha fazla hareketli parça içerir.
WebTransport API, web geliştiricisi kullanım alanları düşünülerek tasarlanmıştır. Bu API, WebRTC'nin veri kanalı arayüzlerini kullanmaktan daha modern web platformu kodu yazmaya benzer. WebTransport, WebRTC'nin aksine Web Workers'ın içinde desteklenir. Bu özellik, belirli bir HTML sayfasından bağımsız olarak istemci-sunucu iletişimleri gerçekleştirmenize olanak tanır. WebTransport, Akışlar ile uyumlu bir arayüz sunduğundan karşı basınç ile ilgili optimizasyonları destekler.
Ancak çalışmakta olan ve çalışmaktan memnun olduğunuz bir WebRTC istemci/sunucu kurulumunuz varsa WebTransport'a geçmek pek çok 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 istemcisi ile kullanabilirsiniz.
Ayrıca, webtransport.day adresinde topluluğun sürdürdüğü bir yankı sunucusu mevcuttur.
API'yi kullanın
WebTransport, Streams API gibi modern web platformu temel öğeleri temel alınarak tasarlanmıştır. Büyük ölçüde vaatlere bağlıdır ve async ve await ile iyi performans gösterir.
Chromium'daki mevcut WebTransport uygulaması, üç farklı trafik türünü desteklemektedir: datagramların yanı sıra 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 düzeni 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ü kullanmalısınız. Bu söz, kurulum tamamlanana kadar yerine getirilmez ve bağlantı QUIC/TLS aşamasında başarısız olursa reddedilir.
closed sözü, bağlantı normal bir şekilde kapandığında yerine getirilir ve beklenmedik bir durumsa bağlantı reddedilir.
Sunucu, bir istemci gösterge hatası nedeniyle bağlantıyı reddederse (ör. URL'nin yolu geçersizdir), bu durum closed ürününün reddedilmesine, ready ise sorunun çözülmemiş olarak 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ğlı bir WebTransport örneğiniz olduğunda, bu örneği datagrams 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ı bir ReadableStream döndürür ve sunucudaki verileri dinlemenize olanak tanır. Her iki akış da yapıları gereği güvenilir değildir. Bu nedenle, yazdığınız veriler sunucu tarafından alınamayabilir ve bunun tersi de geçerli olabilir.
Her iki akış türü de veri aktarımı için Uint8Array örneklerini 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, WebTransport'u, Streams API'leri aracılığıyla veri göndermek ve almak için de kullanabilirsiniz.
Tüm akışların her bir parçası bir Uint8Array öğesidir. Datagram API'lerinin aksine bu akışlar güvenilirdir. Ancak her akış bağımsız olduğundan akışlar arasında veri sırası olması garanti edilmez.
WebTransportSendStream
WebTransportSendStream, WebTransport örneğinin createUnidirectionalStream() yöntemi kullanılarak web istemcisi tarafından oluşturulur ve WebTransportSendStream için bir vaat döndürür.
İlişkili HTTP/3 bağlantısını kapatmak için WritableStreamDefaultWriter aracındaki close() yöntemini kullanın. Tarayıcı, ilişkili 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ş 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, web istemcisi için iki adımlı bir işlemdir. İlk olarak, 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ı, sunucu tarafından gönderilen Uint8Array örneklerini okumak için kullanılabilecek bir WebTransportReceiveStream'dir.
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);
}
Yayın kapatma işlemini, ReadableStreamDefaultReader için closed taahhüdünü kullanarak tespit edebilirsiniz. Temel HTTP/3 bağlantısı FIN biti ile 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 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 taahhüt 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 ve ReadableStream döndüren bir WebTransportBidirectionalStream değerini dinleyebilirsiniz. Bu ReadableStream öğesinin her bir parçası da WebTransportBidirectionalStream anlamına gelir.
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çıklamaktadır.
Diğer örnekler
WebTransport taslak spesifikasyonu, tüm yöntemler ve özelliklerle ilgili eksiksiz dokümanlarla birlikte çok sayıda ek satır içi örnek içerir.
Chrome'un Geliştirici Araçları'nda WebTransport
Maalesef Chrome Geliştirici Araçları şu anda WebTransport'u desteklememektedir. Geliştirici Araçları arayüzündeki güncellemeler hakkında bildirim almak için bu Chrome sorununa "yıldız" verebilirsiniz.
Polyester Lifi
WebTransport'un bazı özelliklerini uygulayan webtransport-ponyfill-websocket adlı bir çoklu dolgu (veya kullanabileceğiniz bağımsız bir modül olarak işlevsellik sağlayan midilli dolgusu) mevcuttur. Bu çözümün kullanım alanınızda işe yarayıp yaramayacağını belirlemek için projenin README bölümündeki kısıtlamaları dikkatlice okuyun.
Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar
Yetkili kaynaklardan yardım almak için taslak spesifikasyonunun ilgili bölümünü inceleyin.
Geri bildirim
Chrome ekibi, bu API'yi kullanmayla ilgili düşüncelerinizi ve deneyimlerinizi öğrenmek 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 gereken eksik parçalar mı var?
Web Transport GitHub deposunda sorun oluşturun veya mevcut bir sorunla ilgili düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorun mu var?
Chrome'un uygulamasında bir hata buldunuz mu?
https://new.crbug.com adresinden hata bildiriminde bulunun. Hatayı, yeniden üretmeye yönelik basit talimatlarla birlikte mümkün olduğunca fazla ayrıntı verin.
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 özellikleri desteklemenin ne kadar kritik olduğunu gösterir.
#WebTransporthashtag'ini ve bu hashtag'i nerede ve nasıl kullandığınızla ilgili ayrıntıları kullanarak @ChromiumDev adresine tweet gönderin.
Genel tartışmalar
Diğer kategorilere uymayan genel sorular veya sorunlar için web-transport-dev Google Grubu'nu kullanabilirsiniz.
Bildirimler
Bu makale WebTransport Explainer, taslak spesifikasyonu ve ilgili tasarım belgelerindeki bilgileri içerir. Bu temeli sundukları için ilgili yazarlara teşekkür ederiz.
Bu gönderideki lokomotif resim, Unsplash'teki Robin Pierre tarafından çekilmiştir.