Blazor.BroadcastChannel

KO | EN

gitlite — search

#javascript #ai #typescript #llm #golang #machine-learning #linux #docker #java #windows #cli #pytorch #security #openai

Blazor.BroadcastChannel

(★ 20)

HTML5 Broadcast Channel API implementation for Microsoft Blazor

Blazor.BroadcastChannel 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Blazor.BroadcastChannel
[![NuGet Version](https://img.shields.io/nuget/v/Blazor.BroadcastChannel?label=Blazor.BroadcastChannel&logo=nuget)](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` register the `BroadcastChannelService` service.

Either as a transient service.
    ```
    ...

var builder = WebAssemblyHostBuilder.CreateDefault(args);

...

builder.Services.AddBroadcastChannel();
   
    ...

await builder.Build().RunAsync();
    ```
   
   Or as a singleton service (preferred for WASM projects).
    ```
    ...

var builder = WebAssemblyHostBuilder.CreateDefault(args);

...

bulder.Services.AddBroadcastChannelAsSingleton();
   
    ...

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).

## Consulting and Professional Services

Do you need help with any of my libraries, or with building features on top of what they provide? I offer paid support and consulting services.

[![Book an Appointment](https://img.shields.io/badge/%20-Book%20an%20Appointment-%23006BFF?logo=calendly&logoColor=white&style=for-the-badge)](https://calendly.com/tpeczek/30min)
[![Send an Email](https://img.shields.io/badge/%20-Send%20an%20email-%23EA4335?logo=gmail&logoColor=white&style=for-the-badge)](mailto:tpeczek@gmail.com)

## 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

Licensed under the [MIT License](https://github.com/tpeczek/Blazor.BroadcastChannel/blob/master/LICENSE.md)

Blazor.BroadcastChannel

Blazor.BroadcastChannel 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Blazor.BroadcastChannel

Blazor.BroadcastChannel 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README