public class StreamHub : Hub
{ 
 public ChannelReader<int> DelayCounter(int delay)
 {
 var channel = Channel.CreateUnbounded<int>();

 _ = WriteItems(channel.Writer, 20, delay);

 return channel.Reader;
 }

 private async Task WriteItems(ChannelWriter<int> writer, int count, int delay)
 {
 for (var i = 0; i < count; i++)
 {
  await writer.WriteAsync(i);
  await Task.Delay(delay);
 }

 writer.TryComplete();
 }
}

services.AddSignalR();

app.UseSignalR(routes =>
{
 routes.MapHub<StreamHub>("/streamHub");
});

npm install @aspnet/signalr

@page
@model IndexModel
@{
 ViewData["Title"] = "Home page";
}

<div class="container">
 <div class="row">&nbsp;</div>
 <div class="row">
 <div class="col-6">&nbsp;</div>
 <div class="col-6">
  <input type="button" id="streamButton" value="Start Streaming" />
 </div>
 </div>
 <div class="row">
 <div class="col-12">
  <hr />
 </div>
 </div>
 <div class="row">
 <div class="col-6">&nbsp;</div>
 <div class="col-6">
  <ul id="messagesList"></ul>
 </div>
 </div>
</div>
<script src="/UploadFiles/2021-04-02/signalr.js">

JavaScript中启用流式传输
在wwwroot\js目录中创建一个新文件signalrstream.js ,代码如下


var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 return new (P || (P = Promise))(function (resolve, reject) {
 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
 function step(result) { result.done "/streamHub")
 .build();
document.getElementById("streamButton").addEventListener("click", (event) => __awaiter(this, void 0, void 0, function* () {
 try {
 connection.stream("DelayCounter", 500)
  .subscribe({
  next: (item) => {
   var li = document.createElement("li");
   li.textContent = item;
   document.getElementById("messagesList").appendChild(li);
  },
  complete: () => {
   var li = document.createElement("li");
   li.textContent = "Stream completed";
   document.getElementById("messagesList").appendChild(li);
  },
  error: (err) => {
   var li = document.createElement("li");
   li.textContent = err;
   document.getElementById("messagesList").appendChild(li);
  },
  });
 }
 catch (e) {
 console.error(e.toString());
 }
 event.preventDefault();
}));

(() => __awaiter(this, void 0, void 0, function* () {
 try {
 yield connection.start();
 }
 catch (e) {
 console.error(e.toString());
 }
}))();


代码解释
与传统SignalR不同，这里我们使用了不同的语法创建一个SignalR连接


var connection = new signalR.HubConnectionBuilder()
 .withUrl("/streamHub")
 .build();


对于一般的SignalR连接，我们会使用connection.on方法来添加监听器，但是在使用流式传输的时候，我们需要改用connection.stream方法, 这个方法有2个参数

  
    Hub方法名称, 本例中是DelayCounter
  
    Hub方法的参数, 本例中是500



connection.stream("DelayCounter", 500)
 .subscribe({
 next: (item) => {
  var li = document.createElement("li");
  li.textContent = item;
  document.getElementById("messagesList").appendChild(li);
 },
 complete: () => {
  var li = document.createElement("li");
  li.textContent = "Stream completed";
  document.getElementById("messagesList").appendChild(li);
 },
 error: (err) => {
  var li = document.createElement("li");
  li.textContent = err;
  document.getElementById("messagesList").appendChild(li);
 },
});


connection.stream方法的返回对象中有一个subscribe方法，这个方法中可以注册3个事件

  
    next - 获得到一个数据碎片时执行
  
    complete - 流式传输完成时执行
  
    error - 流式传输异常时执行

最终效果

总结
流式传输不是一个新概念，但是对ASP.NET Core SignalR来说，这是一个非常棒的特性。流式传输保证的用户体验的流畅，也降低了服务器压力。
大部分程序员都知道SignalR不能传输过大的数据，但是使用流式传输之后，客户端不需要一次性等待服务器端返回所有数据，所以如果你的项目单次请求的数据量很大，可以考虑使用SignalR的流式传输改善用户体验，减轻服务器压力。
本篇源代码地址 https://github.com/lamondlu/StreamingInSignalR （本地下载）
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。