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 ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
 step((generator = generator.apply(thisArg, _arguments || [])).next());
 });
};

var connection = new signalR.HubConnectionBuilder()
 .withUrl("/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中如何实现流式传输”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。