WebTransport, düşük gecikmeli, iki yönlü, istemci-sunucu mesajlaşması sunan bir API'dir. Kullanım alanları ve uygulamanın geleceği hakkında nasıl geri bildirimde bulunacağınız hakkında daha fazla bilgi edinin.
Arka plan
WebTransport nedir?
WebTransport, çift 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 hem de akış API'leri ile güvenilir şekilde veri göndermeyi destekler.
Datagramlar, güçlü teslim garantilerine ihtiyaç duymayan verileri göndermek ve almak için idealdir. Ayrı ayrı veri paketlerinin boyutları, alttaki bağlantının maksimum iletim birimine (MTU) bağlı olarak sınırlandırılır. Bu paketler başarılı bir şekilde iletilebilir veya aktarılamayabilir. Aktarılmaları durumunda ise rastgele bir sırada ulaşabilirler. Bu özellikler, veri birimi API'lerini düşük gecikmeli, en iyi çabayla veri iletimi için ideal kılar. Datagramları kullanıcı datagram protokolü (UDP) mesajları olarak düşünebilirsiniz, ancak bu mesajlar şifrelenerek kontrol edilir.
Buna karşın akış API'leri güvenilir ve sıralı veri aktarımı sağlar. Bir veya daha fazla sıralanmış veri akışı göndermeniz veya almanız gereken senaryolar için uygundur. Birden fazla WebTransport akışı kullanmak, birden fazla TCP bağlantısı kurmaya benzer. Ancak HTTP/3 arka planda daha hafif QUIC protokolünü kullandığından, bunlar çok 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 düzenli aralıklarla, küçük, güvenilir olmayan, sıralı olmayan iletiler aracılığıyla sunucuya minimum gecikmeyle 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 gelen 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
Step | Durum |
---|---|
1. Açıklayıcı oluşturun | Tamamlandı |
2. İlk spesifikasyon taslağını oluşturun | Tamamlandı |
3. Geri bildirim alma ve tasarımı yineleme | Tamamlandı |
4. Kaynak denemesi | Tamamlandı |
5. Lansman | Chromium 97 |
WebTransport'un diğer teknolojilerle ilişkisi
WebTransport, WebSocket'lerin yerine geçer mi?
Açmanız gerekebilir. WebSockets veya WebTransport'un kullanılacak geçerli iletişim protokolleri olabileceği kullanım alanları vardır.
WebSockets iletişimleri tek, güvenilir, sıralı bir ileti akışı etrafında modellenir ve bazı iletişim ihtiyaçları için uygundur. Bu özelliklere ihtiyacınız varsa WebTransport'un akış API'leri de bunları sağlayabilir. Buna kıyasla WebTransport'un datagram API'leri, güvenilirlik veya sipariş garantisi olmadan düşük gecikmeli teslim imkanı sunduğundan WebSocket'lerin doğrudan yerine geçmez.
Datagram API'leri veya birden fazla eşzamanlı Streams API örneği aracılığıyla WebTransport'un kullanılması, WebSockets'te bir sorun olabilecek satırbaşı engelleme konusunda endişelenmenize gerek olmadığı anlamına gelir. Ayrıca, temel QUIC el sıkışması, TCP üzerinden TCP'yi başlatmaktan daha hızlı olduğundan, yeni bağlantılar oluştururken performans avantajları da vardır.
WebTransport, yeni taslak spesifikasyonunun bir parçasıdır ve bu nedenle, istemci ve sunucu kitaplıkları etrafındaki WebSocket ekosistemi şu anda çok daha sağlamdır. "Kullanıma hazır" bir uygulamaya ihtiyacınız varsa Ayrıca, WebSockets, yaygın sunucu kurulumları ve kapsamlı web istemcisi desteği ile bugün daha iyi bir seçimdir.
WebTransport, UDP Socket API ile aynı mı?
Hayır. WebTransport, UDP Yuva API'si değildir. WebTransport, HTTP/3 kullanırken UDP'yi arka planda kullanır. WebTransport, şifreleme ve tıkanıklık kontrolüyle ilgili olarak onu temel bir UDP Socket API'den çok daha fazlasını yapan gereksinimlere sahiptir.
WebTransport, WebRTC veri kanallarına alternatif midir?
Evet, istemci-sunucu bağlantıları için geçerlidir. Temel protokoller farklı olsa da WebTransport, WebRTC veri kanalları ile aynı özelliklerin birç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ün (ICE, DTLS ve SCTP) anlaşılmasını gerektiren bir WebRTC sunucusunun bakımına kıyasla daha az kurulum ve yapılandırma gerektirir. WebRTC, istemci/sunucu görüşmelerinin başarısız olmasına yol açabilecek daha çok sayıda hareketli parça gerektirir.
WebTransport API, web geliştiricilerinin kullanım alanları göz önünde bulundurularak tasarlanmıştır. Bu API, WebRTC'nin veri kanalı arayüzlerini kullanmaktan ziyade modern web platformu kodu yazmaya benzemektedir. WebRTC'nin aksine, WebTransport, belirli bir HTML sayfasından bağımsız olarak istemci-sunucu iletişimlerini gerçekleştirmenize olanak tanıyan Web Çalışanları içinde desteklenir. WebTransport, Akışlar ile uyumlu bir arayüz sunduğundan geri basıncı ile ilgili optimizasyonları destekler.
Ancak, memnun olduğunuz, çalışan bir WebRTC istemci/sunucu kurulumuna sahipseniz, WebTransport'a geçmek çok fazla avantaj sağlamayabilir.
Deneyin
WebTransport ile deneme yapmanın en iyi yolu, uyumlu bir HTTP/3 sunucusu başlatmaktır. Daha sonra istemci/sunucu iletişimlerini denemek için bu sayfayı bir temel JavaScript istemcisi ile kullanabilirsiniz.
Ayrıca, webtransport.day adresinde topluluk tarafından yönetilen bir yankı sunucusu mevcuttur.
API'yi kullanma
WebTransport, Streams API gibi modern web platformu temel öğelerini temel alarak tasarlanmıştır. Büyük ölçüde vaatlere dayalıdır ve async
ile await
ile iyi performans gösterir.
Chromium'daki mevcut WebTransport uygulaması, üç farklı trafik türünü desteklemektedir: veri birimleri ve 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 şeması https
olmalıdır. Bağlantı noktası numarasını açık bir şekilde belirtmeniz gerekir.
Bağlantının kurulmasını beklemek için ready
taahhüdünü kullanmanız gerekir. Kurulum tamamlanana kadar bu taahhüt yerine getirilmez ve QUIC/TLS aşamasında bağlantı başarısız olursa reddedilecektir.
closed
taahhüdü, bağlantı normal şekilde kapatıldığında yerine gelir ve beklenmedik bir şekilde kapanma olduğunda reddedilir.
Sunucu, bir istemci göstergesi hatası nedeniyle bağlantıyı reddederse (ör. URL yolu geçersizdir) bu durum closed
bağlantının reddedilmesine, ready
ise çözümlenmeden 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ğlanan bir WebTransport örneğiniz olduğunda, bu örneği datagram 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ı ReadableStream
döndürerek sunucudaki verileri dinlemenizi sağlar. Her iki akış da doğası gereği güvenilir değildir. Bu nedenle, yazdığınız verilerin sunucuya alınmaması veya bunun tersi de mümkündür.
Her iki akış türünde de 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, WebTransport'u kullanarak Streams API'leri üzerinden veri gönderip alabilirsiniz.
Tüm akışların her parçası bir Uint8Array
'dir. Datagram API'lerinin aksine bu akışlar güvenilirdir. Ancak her akış bağımsızdır. Bu nedenle, akışlar arasında veri sırası garanti edilmez.
WebTransportSendStream
WebTransportSendStream
, web istemcisi tarafından WebTransport
örneğinin createUnidirectionalStream()
yöntemi kullanılarak oluşturulur ve WebTransportSendStream
için bir taahhüt döndürür.
İlişkili HTTP/3 bağlantısını kapatmak için WritableStreamDefaultWriter
öğesinin close()
yöntemini kullanın. Tarayıcı, ilişkilendirilmiş 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ş tüm 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
edinme, bir web istemcisi için iki adımlı bir işlemdir. Öncelikle, 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ı, sırayla, sunucu tarafından gönderilen Uint8Array
örneklerini okumak için kullanılabilecek bir WebTransportReceiveStream
'tır.
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);
}
Akışın kapatılmasını, ReadableStreamDefaultReader
ile ilgili closed
beklentisini kullanarak tespit edebilirsiniz. Temel HTTP/3 bağlantısı FIN bitiyle 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
taahhüdü 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 müşterileri, WebTransport
örneğinin createBidirectionalStream()
yöntemini kullanarak öğe oluşturabilir. Bu yöntem WebTransportBidirectionalStream
için söz verir.
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şturulmuş ve ReadableStream
döndüren bir WebTransportBidirectionalStream
için dinleyebilirsiniz. Bu ReadableStream
öğesinin her bir parçası, karşılığında bir WebTransportBidirectionalStream
'dır.
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çıklar.
Diğer örnekler
WebTransport taslak spesifikasyonu, tüm yöntemler ve özelliklerle ilgili belgelerin yanı sıra çok sayıda 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 desteklememektedir. Burada Geliştirici Araçları arayüzüyle ilgili güncellemeler hakkında bildirim almak için bu Chrome sorununa göz atın.
Çoklu Dolgu
Polyfill (veya kullanabileceğiniz bağımsız bir modül olarak işlevsellik sağlayan midilli dolgu)
webtransport-ponyfill-websocket
webTransport'un bazı özelliklerini uygulayan geniş bir uygulamadır. Kısıtlamaları dikkatlice okuyun
projenin README
ve bu çözümün kullanım alanınızda işe yarayıp yaramayacağını belirleyin.
Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar
Güvenilir bilgiler için taslak spesifikasyonların ilgili bölümüne bakın.
Geri bildirim
Chrome ekibi, bu API'yle ilgili düşüncelerinizi ve deneyimlerinizi öğrenmek ister.
API tasarımıyla ilgili geri bildirim
API ile ilgili tuhaf olan veya beklendiği gibi çalışmayan bir şeyler mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan eksik parçalar mı var?
Web Transport GitHub deposunda bir sorun bildirin veya mevcut bir soruna düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorun mu var?
Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu?
https://new.crbug.com adresinden hata bildiriminde bulunun. Ürünün yeniden oluşturulması için basit talimatlarla birlikte 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ı tedarikçilerine, bunları desteklemenin ne kadar önemli olduğunu gösterir.
- Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin
#WebTransport
ve bunu nerede ve nasıl kullandığınıza ilişkin ayrıntılar.
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 Explainer, taslak spesifikasyonu ve ilgili tasarım belgelerinden alınan bilgiler bulunmaktadır. Bu temeli atmaları için ilgili yazarlara teşekkür ederiz.
Bu gönderideki hero resim, Unsplash'teki Robin Pierre tarafından sağlanmıştır.