基于.NET 7 的 WebTransport 实现双向通信

中芯科技

Web Transport 简介

WebTransport是一个新的 Web API，使用HTTP/3协议来支持双向传输。它用于 Web 客户端和 HTTP/3 服务器之间的双向通信。它支持通过 不可靠的 Datagrams API 发送数据，也支持可靠的 Stream API 发送数据。

因为 HTTP/3 使用了基于 UDP 的 QUIC 协议，所以 Web Transport 可以在一个连接上创建多个流，而且不会相互阻塞。
WebTransport 支持三种不同类型的流量：数据报（datagrams） 以及单向流和双向流。
WebTransport 的设计基于现代 Web 平台基本类型（比如Streams API）。它在很大程度上依赖于promise，并且可以很好地与async和await配合使用。
在 .NET 7 中使用 WebTransport

WebTransport 在 .NET 7 以及以上版本可用，我们新建一个 .NET Core 的空项目，修改 csproj 文件，设置 EnablePreviewFeatures 和 RuntimeHostConfigurationOption ，如下
<ProjectSdk="Microsoft.NET.Sdk.Web"><PropertyGroup><EnablePreviewFeatures>True</EnablePreviewFeatures></PropertyGroup><ItemGroup><RuntimeHostConfigurationOptionInclude="Microsoft.AspNetCore.Server.Kestrel.Experimental.WebTransportAndH3Datagrams"Value="true"/></ItemGroup></Project>要设置 WebTransport 连接，首先需要配置 Web 主机并通过 HTTP/3 侦听端口：
varbuilder=WebApplication.CreateBuilder(args);builder.WebHost.ConfigureKestrel((context,options)=>{//PortconfiguredforWebTransportoptions.ListenAnyIP([SOMEPORT],listenOptions=>{listenOptions.UseHttps(GenerateManualCertificate());listenOptions.Protocols=HttpProtocols.Http1AndHttp2AndHttp3;});});varapp=builder.Build();修改下面的代码，接收 WebTransport 请求和会话。
app.Run(async(context)=>{varfeature=context.Features.GetRequiredFeature<IHttpWebTransportFeature>();if(!feature.IsWebTransportRequest){return;}varsession=awaitfeature.AcceptAsync(CancellationToken.None);});awaitapp.RunAsync();等待 AcceptStreamAsync 方法直到接收到一个 Stream，使用 stream.Transport.Input 写入数据，stream.Transport.Output 读取数据。
varstream=awaitsession.AcceptStreamAsync(CancellationToken.None);varinputPipe=stream.Transport.Input;varoutputPipe=stream.Transport.Output;

在 JavaScript 中使用 WebTransport

传入服务地址并创建 WebTransport 实例, transport.ready 完成，此时连接就可以使用了。
consturl='https://localhost:5002';consttransport=newWebTransport(url);awaittransport.ready;连接到服务器后，可以使用 Streams API 发送和接收数据。
//SendtwoUint8Arraystotheserver.conststream=awaittransport.createSendStream();constwriter=stream.writable.getWriter();constdata1=newUint8Array([65,66,67]);constdata2=newUint8Array([68,69,70]);writer.write(data1);writer.write(data2);try{awaitwriter.close();console.log('Alldatahasbeensent.');}catch(error){console.error(`Anerroroccurred:${error}`);}客户端和服务端双向通信

下面是一个具体的例子，使用 WebTransport 实现了客户端和服务端的双向通信。






完成的代码在下面的 github 地址。
https://github.com/danroth27/AspNetCoreNet7Samples/tree/main/WebTransportInteractiveSampleApp
希望对您有用！

技术群：添加小编微信并备注进群

小编微信：mm1552923
公众号：dotNet编程大全