ASP核心信号器中流式的深入讲解 网

前言

什么是流媒体？

流式传输是一种以稳定和连续的流的形式传输数据的技术。

流媒体的使用场景

在某些场景下，服务器返回的数据量大，等待时间长，因此客户端必须等待服务器返回所有数据后才能执行相应的操作。此时，可以使用流来分割服务器数据。当读取每个数据片段时，只传输完成的部分，而不等待读取所有数据。

信号员

Signaler是一个开源的实时框架。NET核心/。NET框架。信号机可以使用网络套接字、服务器发送事件和长轮询作为底层传输模式。

SignalR就是基于这三种技术并从中抽象出来的，让你更加关注业务问题，而不是底层的传输技术。

SignalR的框架分为服务器和客户端，服务器支持ASP.NET核心和ASP.NET；除了浏览器中的javascript，客户端还支持其他类型的客户端，例如桌面应用程序。

如何在ASP.NET核心信号器中启用流

在ASP.NET核心信号器中，当Hub方法的返回值是ChannelReader或TaskChannelReader时，Hub方法将自动成为流Hub方法。

让我们做一个简单的例子

创建ASP.NET核心网络应用程序

首先，我们使用Visual Studio 2017创建一个ASP.NET核心网络应用程序。

选择网络应用程序来创建ASP.NET核心2.1

创建集线器

让我们用下面的代码添加一个StreamHub类

公共类stream Hub : Hub { public Channel readerint DelayCounter(int delay){ var Channel=Channel。createUnboundentint()；_=WriteItems(通道。作家，20，延迟)；返回通道。读者；}私有异步任务写项(ChannelWriterint writer，int count，int delay){ for(var I=0；我数；我){等待作家。write async(I)；等待任务。延迟(延迟)；}作家。try complete()；}} DelayCounter是一个流方法，它定义了一个延迟参数delay和推送数据片段之间的间隔。WriteItems是一个私有方法，它返回一个Task对象。WriteItems方法的最后一行，writer。TryComplete()，表示串流已完成信号器的配置

首先，我们在启动类的配置服务方法中添加信号服务

服务。addsignar()；然后我们需要为SignalR流添加一个路由，并且我们需要在Startup类的Configure方法中添加以下代码：

app。usesignor(routes={ routes。MapHubStreamHub('/streamHub ')；});添加信号客户端脚本库

在这一步中，我们需要向客户端添加SignalR JS库。

这里我们需要npm来下载SignalR JS库。

NPM install @ aspnet/signor安装完成后，我们手动将signalr.js从项目文件夹\[电子邮件保护]\ signor \ dist \ Browser目录复制到wwwroot \ lib \ signalr目录

写一页

将以下代码复制到Index.cshtml

@ page @ model index model @ { view data[' Title ']=' Home page '；} div class=' container ' div class=' row '/div class=' row ' div class=' col-6 '/div class=' col-6 '输入类型='button' id='streamButton '值=' Start Streaming '/div/div class=' row ' div class=' col-12 ' HR//div/div class=' row ' div class=' col-6 '/div class=' col-6 ' ul id=' messagesList '/ul/div/div/div Script src='

使用以下代码在wwwroot\js目录中创建新文件signalrstream.js

var __awaiter=(这个这个__awaiter) || function (thisArg，_arguments，P，generator){ return new(P | |(P=Promise))(function(解析，拒绝){ function fulfilled(值){ try { step(generator。next(value))；}捕获(e) {拒绝(e );} }函数被拒绝（值){尝试{步骤(生成器['扔'](值));}捕获(e) {拒绝(e );} }函数步骤（结果){ result.done？解析(结果.值):新的p(函数(解析){解析(结果。值)；}).然后（满足，拒绝);} step((generator=generator。应用(此参数，arg，arguments || []).next())；});};定义变量连接=新信号HubConnectionBuilder().withUrl('/streamHub ').build()；文件。getelementbyid(“流按钮”).addEventListener('click '，(event)=__awaiter(this，void 0，void 0，function *){ try { connection。流(' DelayCounter '，500).订阅({ next :(item)={ var Li=document。创建元素(“李”)；li.textContent=itemdocument。getelementbyid(“消息列表”).附录子(李)；}，完成：()={ var Li=文档。创建元素(“李”)；li.textContent="流已完成";文件。getelementbyid(“消息列表”).附录子(李)；}，错误：(err)={ var Li=document。创建元素(“李”)；li.textContent=errdocument。getelementbyid(“消息列表”).附录子(李)；}, });} catch(e){ console。错误(例如ToString())；}活动。PreventDefault()；}));(()=__awaiter(this，void 0，void 0，function*(函数)){尝试{放弃连接。start()；} catch(e){ console。错误(例如ToString())；}}))();代码解释

与传统信号员不同，这里我们使用了不同的语法创建一个信号员连接

定义变量连接=新信号HubConnectionBuilder().withUrl('/streamHub ').build()；对于一般的信号员连接，我们会使用连接打开方法来添加监听器，但是在使用流式传输的时候，我们需要改用连接。流方法，这个方法有2个参数

中心方法名称，本例中是延迟计数器集线器方法的参数，本例中是500连接。流(' DelayCounter '，500).订阅({ next :(item)={ var Li=document。创建元素(“李”)；li.textContent=itemdocument。getelementbyid(“消息列表”).附录子(李)；}，完成：()={ var Li=文档。创建元素(“李”)；li.textContent="流已完成";文件。getelementbyid(“消息列表”).附录子(李)；}，错误：(err)={ var Li=document。创建元素(“李”)；li.textContent=errdocument。getelementbyid(“消息列表”).附录子(李)；},});连接。流方法的返回对象中有一个订阅方法，这个方法中可以注册3个事件

下一个获得到一个数据碎片时执行完成-流式传输完成时执行错误-流式传输异常时执行最终效果

总结

流式传输不是一个新概念，但是对ASP .网络核心信号来说，这是一个非常棒的特性。流式传输保证的用户体验的流畅，也降低了服务器压力。

大部分程序员都知道信号员不能传输过大的数据，但是使用流式传输之后，客户端不需要一次性等待服务器端返回所有数据，所以如果你的项目单次请求的数据量很大，可以考虑使用信号员的流式传输改善用户体验，减轻服务器压力。

本篇源代码地址https://github。com/lamondlu/streamingsignor(本地下载)

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。