ASP.NET Core Signal 의 스 트림 전송 에 대한 심도 있 는 설명
스 트림 전송 이란 무엇 입 니까?
스 트림 전송 은 안정 적 이 고 지속 적 인 흐름 으로 데 이 터 를 전송 하 는 기술 이다.
스 트림 전송 사용 장면
일부 장면 에서 서버 가 돌아 오 는 데 이 터 량 이 비교적 많 고 대기 시간 이 비교적 길 기 때문에 클 라 이언 트 는 서버 가 모든 데 이 터 를 되 돌려 준 후에 해당 하 는 조작 을 해 야 한다.이 때 스 트림 전송 을 사용 하면 서버 데 이 터 를 파편 화 할 수 있 습 니 다.모든 데이터 조각 이 읽 힌 후에 완 료 된 부분 만 전송 할 수 있 습 니 다.모든 데 이 터 를 읽 을 때 까지 기다 릴 필요 가 없습니다.
SignalR
SignalR 은.NET Core/.NET Framework 의 오픈 소스 실시 간 프레임 워 크 입 니 다.SignalR 은 웹 소켓,Server Sent Events 와 Long Polling 을 바 텀 전송 방식 으로 사용 할 수 있 습 니 다.
Signal R 은 이 세 가지 기술 을 바탕 으로 구축 되 고 이들 위 에 추상 적 이 며 바 텀 전송 기술 문제 가 아니 라 업무 문제 에 더욱 관심 을 가지 게 한다.
Signal R 이 프레임 워 크 는 서버 쪽 과 클 라 이언 트 로 나 뉘 며 서버 쪽 에 서 는 ASP.NET Core 와 ASP.NET 을 지원 합 니 다.클 라 이언 트 는 브 라 우 저 에 있 는 자바 script 을 지원 하 는 것 외 에 데스크 톱 애플 리 케 이 션 과 같은 다른 유형의 클 라 이언 트 도 지원 합 니 다.
ASP.NET Core Signal R 에서 스 트림 전송 을 사용 하 는 방법
ASP.NET Core Signal R 에서 Hub 방법의 반환 값 이 Channel Reader 나 Task
다음은 간단 한 예 를 들 어 보 겠 습 니 다.
ASP.NET Core 웹 애플 리 케 이 션 만 들 기
우선 Visual Studio 2017 을 사용 하여 ASP.NET Core 웹 프로그램 을 만 듭 니 다.
ASP.NET Core 2.1 을 만 들 웹 애플 리 케 이 션 선택
허브 만 들 기
다음은 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();
}
}Signal R 설정
우선 Startup 클래스 의 Configure Service 방법 에 Signal R 서 비 스 를 추가 합 니 다.
services.AddSignalR();
app.UseSignalR(routes =>
{
routes.MapHub<StreamHub>("/streamHub");
});이 단계 에서 우 리 는 클 라 이언 트 에 SignalR JS 라 이브 러 리 를 추가 해 야 합 니 다.
여기 서 는 npm 를 통 해 Signal JS 라 이브 러 리 를 다운로드 해 야 합 니 다.
npm install @aspnet/signalr페이지 작성
다음 코드 를 Index.cshtml 로 복사 합 니 다.
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-6"> </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"> </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>wwwroot\\js 디 렉 터 리 에 새 파일 signallstream.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();
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);
},
});
총결산
스 트림 전송 은 새로운 개념 은 아니 지만 ASP.NET Core Signal R 에 있어 서 는 매우 좋 은 특성 이다.스 트림 전송 이 보장 하 는 사용자 체험 의 유창 함 도 서버 의 압력 을 낮 추 었 다.
대부분의 프로그래머 들 은 SignalR 이 너무 큰 데 이 터 를 전송 할 수 없다 는 것 을 알 고 있 지만 스 트림 전송 을 사용 한 후에 클 라 이언 트 는 서버 측 이 모든 데 이 터 를 되 돌려 주 기 를 한꺼번에 기다 릴 필요 가 없 기 때문에 프로젝트 가 한 번 에 요청 한 데 이 터 량 이 많 으 면 SignalR 의 스 트림 전송 으로 사용자 체험 을 개선 하고 서버 의 부담 을 줄 이 는 것 을 고려 할 수 있다.
이 원본 코드 주소https://github.com/lamondlu/StreamingInSignalR （ 로 컬 다운로드 ）
자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Tailwind를 ASP.NET Core 프로젝트에 통합우리는 을 사용합니다. 에서 코드를 찾을 수 있습니다. 면도기 페이지 구조를 추가합니다. "node_modules"가 설치되었습니다. "tailwind.config.js"파일이 생성되었습니다. 모든 .razor 및 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
