经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
基于.NET 7 的 WebTransport 实现双向通信
来源:cnblogs  作者:SpringLeee  时间:2022/11/23 18:53:01  对本文有异议

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 ,如下

  1. <Project Sdk="Microsoft.NET.Sdk.Web">
  2. <PropertyGroup>
  3. <EnablePreviewFeatures>True</EnablePreviewFeatures>
  4. </PropertyGroup>
  5. <ItemGroup>
  6. <RuntimeHostConfigurationOption Include="Microsoft.AspNetCore.Server.Kestrel.Experimental.WebTransportAndH3Datagrams" Value="true" />
  7. </ItemGroup>
  8. </Project>

要设置 WebTransport 连接,首先需要配置 Web 主机并通过 HTTP/3 侦听端口:

  1. var builder = WebApplication.CreateBuilder(args);
  2. builder.WebHost.ConfigureKestrel((context, options) =>
  3. {
  4. // Port configured for WebTransport
  5. options.ListenAnyIP([SOME PORT], listenOptions =>
  6. {
  7. listenOptions.UseHttps(GenerateManualCertificate());
  8. listenOptions.Protocols = HttpProtocols.Http1AndHttp2AndHttp3;
  9. });
  10. });
  11. var app = builder.Build();

修改下面的代码,接收 WebTransport 请求和会话。

  1. app.Run(async (context) =>
  2. {
  3. var feature = context.Features.GetRequiredFeature<IHttpWebTransportFeature>();
  4. if (!feature.IsWebTransportRequest)
  5. {
  6. return;
  7. }
  8. var session = await feature.AcceptAsync(CancellationToken.None);
  9. });
  10. await app.RunAsync();

等待 AcceptStreamAsync 方法直到接收到一个 Stream,使用 stream.Transport.Input 写入数据,stream.Transport.Output 读取数据。

  1. var stream = await session.AcceptStreamAsync(CancellationToken.None);
  2. var inputPipe = stream.Transport.Input;
  3. var outputPipe = stream.Transport.Output;

在 JavaScript 中使用 WebTransport

传入服务地址并创建 WebTransport 实例, transport.ready 完成,此时连接就可以使用了。

  1. const url = 'https://localhost:5002';
  2. const transport = new WebTransport(url);
  3. await transport.ready;

连接到服务器后,可以使用 Streams API 发送和接收数据。

  1. // Send two Uint8Arrays to the server.
  2. const stream = await transport.createSendStream();
  3. const writer = stream.writable.getWriter();
  4. const data1 = new Uint8Array([65, 66, 67]);
  5. const data2 = new Uint8Array([68, 69, 70]);
  6. writer.write(data1);
  7. writer.write(data2);
  8. try {
  9. await writer.close();
  10. console.log('All data has been sent.');
  11. } catch (error) {
  12. console.error(`An error occurred: ${error}`);
  13. }

客户端和服务端双向通信

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

完成的代码在下面的 github 地址。

https://github.com/danroth27/AspNetCoreNet7Samples/tree/main/WebTransportInteractiveSampleApp

希望对您有用!

原文链接:https://www.cnblogs.com/myshowtime/p/16910587.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号