https://github.com/kristofferstrube/blazor.streams
A Blazor wrapper for the Streams browser API.
https://github.com/kristofferstrube/blazor.streams
blazor blazor-interop csharp dotnet filesystem github-actions github-pages jsinterop readable-stream streams wrapper writable-streams
Last synced: 22 days ago
JSON representation
A Blazor wrapper for the Streams browser API.
- Host: GitHub
- URL: https://github.com/kristofferstrube/blazor.streams
- Owner: KristofferStrube
- License: mit
- Created: 2022-10-18T10:21:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T14:59:30.000Z (7 months ago)
- Last Synced: 2025-05-07T03:04:20.763Z (22 days ago)
- Topics: blazor, blazor-interop, csharp, dotnet, filesystem, github-actions, github-pages, jsinterop, readable-stream, streams, wrapper, writable-streams
- Language: C#
- Homepage: https://kristofferstrube.github.io/Blazor.Streams/
- Size: 12 MB
- Stars: 14
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](/LICENSE.md)
[](https://github.com/KristofferStrube/Blazor.Streams/issues)
[](https://github.com/KristofferStrube/Blazor.Streams/network/members)
[](https://github.com/KristofferStrube/Blazor.Streams/stargazers)
[](https://www.nuget.org/packages/KristofferStrube.Blazor.Streams/)
# Introduction
A Blazor wrapper for the browser API [Streams](https://streams.spec.whatwg.org/)
The API standardizes ways to create, compose, and consume streams of data that map to low-level I/O primitives in the browser. This project implements a wrapper around the API for Blazor so that we can easily and safely interact with the streams of the browser.
# Demo
The sample project can be demoed at https://kristofferstrube.github.io/Blazor.Streams/
On each page you can find the corresponding code for the example in the top right corner.
On the *API Coverage Status* page you can get an overview over what parts of the API we support currently.
# Getting Started
The package can be used in Blazor projects.
## Prerequisites
You need to install .NET 7.0 or newer to use the library.
[Download .NET 7](https://dotnet.microsoft.com/download/dotnet/7.0)
## Installation
You can install the package via Nuget with the Package Manager in your IDE or alternatively using the command line:
```bash
dotnet add package KristofferStrube.Blazor.Streams
```
## Import
You need to reference the package in order to use it in your pages. This can be done in `_Import.razor` by adding the following.
```razor
@using KristofferStrube.Blazor.Streams
```
## Creating wrapper instance
We can call the constructor for `ReadableStream`, `WritableStream`, or `TransformStream` from C# and work on these objects like so:
```razor
@inject IJSInProcessRuntime JSRuntime
@code {
protected override async Task OnInitializedAsync()
{
// Construct a stream in .NET.
using var data = new System.IO.MemoryStream(new byte[1000 * 1024]);
// Convert a .NET Stream to a JS ReadableStream.
using var streamRef = new DotNetStreamReference(stream: data, leaveOpen: false);
var jSStreamReference = await JSRuntime.InvokeAsync("jSStreamReference", streamRef);
// Create a wrapper instance of the ReadableStream.
var readableStream = await ReadableStream.CreateAsync(JSRuntime, jSStreamReference);
// Get the reader and iterate that.
var readableStreamReader = await readableStream.GetDefaultReaderAsync();
await foreach (var chunk in readableStreamReader)
{
var length = await JSRuntime.InvokeAsync("getAttribute", chunk, "length");
Console.WriteLine(length);
await Task.Delay(100);
}
}
}
```
For the above example we use two small JavaScript functions that basically serves as a way to convert the .NET `DotNetStreamReference` object into an `IJSObjectReference` and a way to get any attribute of an `IJSObjectReference`. These methods looks like this and can be defined in the `index.html` or `_host.razor` page.
```javascript
function jSStreamReference(streamRef) { return streamRef.stream(); }
function getAttribute(object, attribute) { return object[attribute]; }
```
# Issues
Feel free to open issues on the repository if you find any errors with the package or have wishes for features.
# Related articles
This repository was build with inspiration and help from the following series of articles:
- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)
- [Call anonymous C# functions from JS in Blazor WASM](https://blog.elmah.io/call-anonymous-c-functions-from-js-in-blazor-wasm/)
- [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)
- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)
- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)