From ca00cc5eae6bfa648ed33087697b126345c6c6c1 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 17 Aug 2021 08:09:12 -0500 Subject: [PATCH 1/4] Blazor .NET to JS Streaming Interop --- .../call-javascript-from-dotnet.md | 61 ++++++++++++++++--- 1 file changed, 52 insertions(+), 9 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index d0cbab171107..8931665286dc 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -657,34 +657,77 @@ Other data types, such as string arrays, can be converted but require creating a ## Stream from JavaScript to .NET -Blazor supports streaming data directly from JavaScript to .NET. Streams are requested using the `IJSStreamReference` interface: +Blazor supports streaming data directly from JavaScript to .NET. Streams are requested using the `Microsoft.JSInterop.IJSStreamReference` interface. -In client-side JavaScript: +`Microsoft.JSInterop.IJSStreamReference` returns a and uses the following parameters: + +* `maxAllowedSize`: Maximum number of bytes permitted for the read operation from JavaScript, which defaults to 512,000 bytes if not specified. +* `cancellationToken`: A for cancelling the read. + +In JavaScript: ```javascript -function jsToDotNetStreamReturnValue() { +function streamToDotNet() { return new Uint8Array(10000000); } ``` -In Razor component code: +In C# code: ```csharp var dataReference = - await JSRuntime.InvokeAsync("jsToDotNetStreamReturnValue"); + await JS.InvokeAsync("streamToDotNet"); using var dataReferenceStream = await dataReference.OpenReadStreamAsync(maxAllowedSize: 10_000_000); -// Write JS Stream to disk var outputPath = Path.Combine(Path.GetTempPath(), "file.txt"); using var outputFileStream = File.OpenWrite(outputPath); await dataReferenceStream.CopyToAsync(outputFileStream); ``` -`IJSStreamReference` returns a with the following parameters: +In the preceding example: -* `maxAllowedSize`: Maximum number of bytes permitted for the read from JavaScript. The value defaults to 512,000 bytes. -* `cancellationToken`: A for cancelling the read. +* `JS` is an injected instance. +* The JS stream is written to disk (`file.txt`) at the current user's temporary folder path (). + +## Stream from .NET to JavaScript + +Blazor supports streaming data directly from .NET to JavaScript. Streams are created using a `Microsoft.JSInterop.DotNetStreamReference`. + +`Microsoft.JSInterop.DotNetStreamReference` represents a .NET stream and uses the following parameters: + +* `stream`: The stream sent to JavaScript. +* `leaveOpen`: A flag that indicates whether the stream should be left open after transmission, which defaults to `false` if not provided. + +In JavaScript, use an array buffer or a readable stream to receive the data: + +* Using an [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer): + + ```javascript + async function streamToJavaScript(streamRef) { + const data = await streamRef.arrayBuffer(); + } + ``` + +* Using a [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream): + + ```javascript + async function streamToJavaScript(streamRef) { + const stream = await streamRef.stream(); + } + ``` + +In C# code: + +```csharp +using var streamRef = new DotNetStreamReference(stream: {STREAM}, leaveOpen: false); +await JS.InvokeVoidAsync("streamToJavaScript", streamRef); +``` + +In the preceding example: + +* The `{STREAM}` placeholder is a . +* `JS` is an injected instance. ## Catch JavaScript exceptions From c3c54c5389f7141cfa536bfa44b4acdf99452ccc Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 17 Aug 2021 08:30:15 -0500 Subject: [PATCH 2/4] Updates --- .../javascript-interoperability/call-javascript-from-dotnet.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index 8931665286dc..669ffbff4f77 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -692,6 +692,8 @@ In the preceding example: ## Stream from .NET to JavaScript +*This feature applies to ASP.NET Core 6.0 Release Candidate 1 or later. ASP.NET Core 6.0 Release Candidate 1 is scheduled for release in September. ASP.NET Core 6.0 is scheduled for release later this year.* + Blazor supports streaming data directly from .NET to JavaScript. Streams are created using a `Microsoft.JSInterop.DotNetStreamReference`. `Microsoft.JSInterop.DotNetStreamReference` represents a .NET stream and uses the following parameters: From aaccf244bb60a99875dbb49b95aa183278339c61 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 17 Aug 2021 14:39:04 -0500 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Tanay Parikh --- .../call-javascript-from-dotnet.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index 669ffbff4f77..d82efccd176d 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -659,7 +659,7 @@ Other data types, such as string arrays, can be converted but require creating a Blazor supports streaming data directly from JavaScript to .NET. Streams are requested using the `Microsoft.JSInterop.IJSStreamReference` interface. -`Microsoft.JSInterop.IJSStreamReference` returns a and uses the following parameters: +`Microsoft.JSInterop.IJSStreamReference.OpenReadStreamAsync` returns a and uses the following parameters: * `maxAllowedSize`: Maximum number of bytes permitted for the read operation from JavaScript, which defaults to 512,000 bytes if not specified. * `cancellationToken`: A for cancelling the read. @@ -688,7 +688,7 @@ await dataReferenceStream.CopyToAsync(outputFileStream); In the preceding example: * `JS` is an injected instance. -* The JS stream is written to disk (`file.txt`) at the current user's temporary folder path (). +* The `dataReferenceStream` is written to disk (`file.txt`) at the current user's temporary folder path (). ## Stream from .NET to JavaScript @@ -728,7 +728,7 @@ await JS.InvokeVoidAsync("streamToJavaScript", streamRef); In the preceding example: -* The `{STREAM}` placeholder is a . +* The `{STREAM}` placeholder represents the sent to JavaScript. * `JS` is an injected instance. ## Catch JavaScript exceptions From c38c265c2bcdac38dfdffd4d3584c1647e1f0757 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 18 Aug 2021 08:52:59 -0500 Subject: [PATCH 4/4] Updates --- .../javascript-interoperability/call-javascript-from-dotnet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index d82efccd176d..ba4a7bdbfff3 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -699,7 +699,7 @@ Blazor supports streaming data directly from .NET to JavaScript. Streams are cre `Microsoft.JSInterop.DotNetStreamReference` represents a .NET stream and uses the following parameters: * `stream`: The stream sent to JavaScript. -* `leaveOpen`: A flag that indicates whether the stream should be left open after transmission, which defaults to `false` if not provided. +* `leaveOpen`: Determines if the stream is left open after transmission. If a value isn't provided, `leaveOpen` defaults to `false`. In JavaScript, use an array buffer or a readable stream to receive the data: