{"id":22127260,"url":"https://github.com/tpeczek/blazor.broadcastchannel","last_synced_at":"2025-10-11T19:45:02.980Z","repository":{"id":65385704,"uuid":"529982415","full_name":"tpeczek/Blazor.BroadcastChannel","owner":"tpeczek","description":"HTML5 Broadcast Channel API implementation for Microsoft Blazor","archived":false,"fork":false,"pushed_at":"2024-02-22T11:34:19.000Z","size":31,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-05-02T01:19:52.831Z","etag":null,"topics":["blazor","broadcast-channel-api"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tpeczek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"tpeczek"}},"created_at":"2022-08-28T21:20:59.000Z","updated_at":"2024-04-20T12:11:40.000Z","dependencies_parsed_at":"2024-02-22T12:43:57.061Z","dependency_job_id":null,"html_url":"https://github.com/tpeczek/Blazor.BroadcastChannel","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpeczek%2FBlazor.BroadcastChannel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpeczek%2FBlazor.BroadcastChannel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpeczek%2FBlazor.BroadcastChannel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpeczek%2FBlazor.BroadcastChannel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tpeczek","download_url":"https://codeload.github.com/tpeczek/Blazor.BroadcastChannel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227598458,"owners_count":17791605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","broadcast-channel-api"],"created_at":"2024-12-01T17:17:36.276Z","updated_at":"2025-10-11T19:44:57.939Z","avatar_url":"https://github.com/tpeczek.png","language":"C#","funding_links":["https://github.com/sponsors/tpeczek"],"categories":[],"sub_categories":[],"readme":"# Blazor.BroadcastChannel\n[![NuGet Version](https://img.shields.io/nuget/v/Blazor.BroadcastChannel?label=Blazor.BroadcastChannel\u0026logo=nuget)](https://www.nuget.org/packages/Blazor.BroadcastChannel/)\n\nThis is a HTML5 [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) implementation for Blazor.\n\nThe 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.\n\n## How to use Blazor.BroadcastChannel\n\n### Getting Started\n\n1. Install the NuGet package `Blazor.BroadcastChannel`.\n    ```\n    dotnet add package Blazor.BroadcastChannel \n    ```\n2. In `Program.cs` register the `BroadcastChannelService` service.\n\n   Either as a transient service.\n    ```\n    ...\n\n    var builder = WebAssemblyHostBuilder.CreateDefault(args);\n\n    ...\n\n    builder.Services.AddBroadcastChannel();\n   \n    ...\n\n    await builder.Build().RunAsync();\n    ```\n   \n   Or as a singleton service (preferred for WASM projects).\n    ```\n    ...\n\n    var builder = WebAssemblyHostBuilder.CreateDefault(args);\n\n    ...\n\n    bulder.Services.AddBroadcastChannelAsSingleton();\n   \n    ...\n\n    await builder.Build().RunAsync();\n    ```\n\n3. Add the `Blazor.BroadcastChannel` namespace in `_Imports.razor` or the component in which you want to use the Broadcast Channel API.\n    ```\n    @using Blazor.BroadcastChannel\n    ```\n4. Inject the `IBroadcastChannelService` in the component in which you want to use the Broadcast Channel API.\n    ```\n    @inject IBroadcastChannelService BroadcastChannelService\n    ```\n\n### Creating or Joining a Channel\nThe `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.\n\n```\nIBroadcastChannel broadcastChannel = await BroadcastChannelService.CreateOrJoinAsync(\"checkout:item-added\");\n```\n\nIf it is the first connection to that broadcast channel, the underlying channel is created.\n\n### Sending a Message\nTo send a message, it is enough to call the `IBroadcastChannel.PostMessageAsync` method, which takes any object as an argument.\n\n```\nawait broadcastChannel.PostMessageAsync(new CheckoutItem { Sku = Sku, Edition = Edition });\n```\n\nThe 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.\n\n### Receiving a Message\nIn order to receive messages, it is enough to subscribe to `IBroadcastChannel.Message` event. The sent object is available as `JsonDocument` through `BroadcastChannelMessageEventArgs.Data` property.\n\n```\nbroadcastChannel.Message += (object? sender, BroadcastChannelMessageEventArgs e) =\u003e\n{\n    Console.WriteLine(JsonSerializer.Serialize(e.Data));\n};\n```\n\n### Disconnecting a Channel\nTo leave a broadcast channel, either dispose the `IBroadcastChannel` or call `IBroadcastChannel.CloseAsync` method.\n\n```\nawait broadcastChannel.DisposeAsync();\n```\n\nIt is important to disconnect from the channel to allow the underlying JavaScript object to be garbage collected.\n\n## Demos\n\nYou 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).\n\n## Consulting and Professional Services\n\nDo you need help with any of my libraries, or with building features on top of what they provide? What about ASP.NET Core architecture, Azure architecture, or DevOps? I offer consulting and development services.\n\n[![Book an Appointment](https://img.shields.io/badge/%20-Book%20an%20Appointment-%23006BFF?logo=calendly\u0026logoColor=white\u0026style=for-the-badge)](https://calendly.com/tpeczek/30min)\n[![Send an Email](https://img.shields.io/badge/%20-Send%20an%20email-%23EA4335?logo=gmail\u0026logoColor=white\u0026style=for-the-badge)](mailto:tpeczek@gmail.com)\n\n## Donating\n\nMy 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).\n\n## Copyright and License\n\nCopyright © 2022 - 2025 Tomasz Pęczek\n\nLicensed under the [MIT License](https://github.com/tpeczek/Blazor.BroadcastChannel/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpeczek%2Fblazor.broadcastchannel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftpeczek%2Fblazor.broadcastchannel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpeczek%2Fblazor.broadcastchannel/lists"}