Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tpeczek/blazor.broadcastchannel
HTML5 Broadcast Channel API implementation for Microsoft Blazor
https://github.com/tpeczek/blazor.broadcastchannel
blazor broadcast-channel-api
Last synced: about 2 months ago
JSON representation
HTML5 Broadcast Channel API implementation for Microsoft Blazor
- Host: GitHub
- URL: https://github.com/tpeczek/blazor.broadcastchannel
- Owner: tpeczek
- License: mit
- Created: 2022-08-28T21:20:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T11:34:19.000Z (11 months ago)
- Last Synced: 2024-05-02T01:19:52.831Z (9 months ago)
- Topics: blazor, broadcast-channel-api
- Language: C#
- Homepage:
- Size: 30.3 KB
- Stars: 10
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Blazor.BroadcastChannel
[](https://www.nuget.org/packages/Blazor.BroadcastChannel/)
This is a HTML5 [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) implementation for Blazor.
The Broadcast Channel API allows sending messages to other browsing contexts on the same origin. It can be thought of as a simple message bus that allows pub/sub semantics between windows/tabs, iframes, web workers, and service workers.
## How to use Blazor.BroadcastChannel
### Getting Started
1. Install the NuGet package `Blazor.BroadcastChannel`.
```
dotnet add package Blazor.BroadcastChannel
```
2. In `Program.cs` add `builder.Services.AddBroadcastChannel`.
```
...
var builder = WebAssemblyHostBuilder.CreateDefault(args);
...
builder.Services.AddBroadcastChannel();
...
await builder.Build().RunAsync();
```
3. Add the `Blazor.BroadcastChannel` namespace in `_Imports.razor` or the component in which you want to use the Broadcast Channel API.
```
@using Blazor.BroadcastChannel
```
4. Inject the `IBroadcastChannelService` in the component in which you want to use the Broadcast Channel API.
```
@inject IBroadcastChannelService BroadcastChannelService
```
### Creating or Joining a Channel
The `IBroadcastChannelService.CreateOrJoinAsync` method allows for joining a broadcast channel. It takes a single parameter, which is the name of the channel. It returns an instance of `IBroadcastChannel` which represents the channel.
```
IBroadcastChannel broadcastChannel = await BroadcastChannelService.CreateOrJoinAsync("checkout:item-added");
```
If it is the first connection to that broadcast channel, the underlying channel is created.
### Sending a Message
To send a message, it is enough to call the `IBroadcastChannel.PostMessageAsync` method, which takes any object as an argument.
```
await broadcastChannel.PostMessageAsync(new CheckoutItem { Sku = Sku, Edition = Edition });
```
The API doesn't associate any semantics to messages, so it is up to the receiving code to know what kind of messages to expect and how to handle them.
### Receiving a Message
In order to receive messages, it is enough to subscribe to `IBroadcastChannel.Message` event. The sent object is available as `JsonDocument` through `BroadcastChannelMessageEventArgs.Data` property.
```
broadcastChannel.Message += (object? sender, BroadcastChannelMessageEventArgs e) =>
{
Console.WriteLine(JsonSerializer.Serialize(e.Data));
};
```
### Disconnecting a Channel
To leave a broadcast channel, either dispose the `IBroadcastChannel` or call `IBroadcastChannel.CloseAsync` method.
```
await broadcastChannel.DisposeAsync();
```
It is important to disconnect from the channel to allow the underlying JavaScript object to be garbage collected.
## Demos
You can see Blazor.BroadcastChannel in action as part of [Demo.AspNetCore.MicroFrontendsInAction](https://github.com/tpeczek/Demo.AspNetCore.MicroFrontendsInAction/tree/main/12-child-child-communication-with-blazor-webassembly-based-web-components).
## Donating
My blog and open source projects are result of my passion for software development, but they require a fair amount of my personal time. If you got value from any of the content I create, then I would appreciate your support by [sponsoring me](https://github.com/sponsors/tpeczek) (either monthly or one-time).
## Copyright and License
Copyright © 2022 - 2024 Tomasz Pęczek
Licensed under the [MIT License](https://github.com/tpeczek/Blazor.BroadcastChannel/blob/master/LICENSE.md)