這篇文章將為大家詳細(xì)講解有關(guān)ASP.NET Core SignalR中如何實(shí)現(xiàn)流式傳輸，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對(duì)外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺(tái)，成都創(chuàng)新互聯(lián)面向各種領(lǐng)域：成都柴油發(fā)電機(jī)等成都網(wǎng)站設(shè)計(jì)、全網(wǎng)整合營(yíng)銷推廣解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

前言

什么是流式傳輸？

流式傳輸是這一種以穩(wěn)定持續(xù)流的形式傳輸數(shù)據(jù)的技術(shù)。

流式傳輸?shù)氖褂脠?chǎng)景

有些場(chǎng)景中，服務(wù)器返回的數(shù)據(jù)量較大，等待時(shí)間較長(zhǎng)，客戶端不得不等待服務(wù)器返回所有數(shù)據(jù)后，再進(jìn)行相應(yīng)的操作。這時(shí)候使用流式傳輸，可以將服務(wù)器數(shù)據(jù)碎片化，當(dāng)每個(gè)數(shù)據(jù)碎片讀取完成之后，就只傳輸完成的部分，而不需要等待所有數(shù)據(jù)都讀取完成。

SignalR

SignalR是一個(gè).NET Core/.NET Framework的開源實(shí)時(shí)框架. SignalR的可使用Web Socket, Server Sent Events 和 Long Polling作為底層傳輸方式.

SignalR基于這三種技術(shù)構(gòu)建, 抽象于它們之上, 它讓你更好的關(guān)注業(yè)務(wù)問題而不是底層傳輸技術(shù)問題.

SignalR這個(gè)框架分服務(wù)器端和客戶端, 服務(wù)器端支持ASP.NET Core 和 ASP.NET; 而客戶端除了支持瀏覽器里的javascript以外, 也支持其它類型的客戶端, 例如桌面應(yīng)用.

如何在ASP.NET Core SignalR中啟用流式傳輸

在ASP.NET Core SignalR中當(dāng)一個(gè)Hub方法的返回值是ChannelReader或者Task<ChannelReader>, 這個(gè)Hub方法自動(dòng)就會(huì)變成一個(gè)流式傳輸Hub方法。

下面我們來做了一個(gè)簡(jiǎn)單的例子

創(chuàng)建一個(gè)ASP.NET Core Web應(yīng)用

首先我們使用Visual Studio 2017創(chuàng)建一個(gè)ASP.NET Core Web應(yīng)用程序。

選擇創(chuàng)建ASP.NET Core 2.1的Web Application

創(chuàng)建Hub

下面我們添加一個(gè)StreamHub類，代碼如下

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();
 }
}

•     DelayCounter是一個(gè)流式傳輸方法, 它定義了一個(gè)延遲參數(shù)delay, 定義了推送數(shù)據(jù)碎片的間隔時(shí)間

•     WriteItems是一個(gè)私有方法，它返回了一個(gè)Task對(duì)象

•     WriteItems方法的最后一行writer.TryComplete()表明了流式傳輸完成

配置SignalR

首先我們?cè)赟tartup類的ConfigureService方法中添加SignalR服務(wù)

services.AddSignalR();

然后我們還需要為SignalR流添加路由，我們需要在Startup類的Configure方法中添加如下代碼：

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

添加SignalR客戶端腳本庫(kù)

這一步中我們需要在客戶端中添加SignalR JS庫(kù)。

這里我們需要借助npm來下載SignalR JS庫(kù)。

npm install @aspnet/signalr

安裝完成后，我們手動(dòng)將signalr.js從<projectfolder>\node_modules@aspnet\signalr\dist\browser目錄中拷貝到wwwroot\lib\signalr目錄下

編寫頁(yè)面

拷貝以下代碼到Index.cshtml

@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="~/lib/signalr/signalr.js"></script>
<script src="~/js/signalrstream.js"></script>

JavaScript中啟用流式傳輸

在wwwroot\js目錄中創(chuàng)建一個(gè)新文件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());
 }
}))();

代碼解釋

與傳統(tǒng)SignalR不同，這里我們使用了不同的語(yǔ)法創(chuàng)建一個(gè)SignalR連接

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

對(duì)于一般的SignalR連接，我們會(huì)使用connection.on方法來添加監(jiān)聽器，但是在使用流式傳輸?shù)臅r(shí)候，我們需要改用connection.stream方法, 這個(gè)方法有2個(gè)參數(shù)

•     Hub方法名稱, 本例中是DelayCounter

•     Hub方法的參數(shù), 本例中是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方法的返回對(duì)象中有一個(gè)subscribe方法，這個(gè)方法中可以注冊(cè)3個(gè)事件

•     next - 獲得到一個(gè)數(shù)據(jù)碎片時(shí)執(zhí)行

•     complete - 流式傳輸完成時(shí)執(zhí)行

•     error - 流式傳輸異常時(shí)執(zhí)行

最終效果

關(guān)于“ASP.NET Core SignalR中如何實(shí)現(xiàn)流式傳輸”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享名稱：ASP.NETCoreSignalR中如何實(shí)現(xiàn)流式傳輸-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://jinyejixie.com/article10/eiogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)