BlazorChat 1.0.1
See the version list below for details.
dotnet add package BlazorChat --version 1.0.1
NuGet\Install-Package BlazorChat -Version 1.0.1
<PackageReference Include="BlazorChat" Version="1.0.1" />
<PackageVersion Include="BlazorChat" Version="1.0.1" />
<PackageReference Include="BlazorChat" />
paket add BlazorChat --version 1.0.1
#r "nuget: BlazorChat, 1.0.1"
#:package BlazorChat@1.0.1
#addin nuget:?package=BlazorChat&version=1.0.1
#tool nuget:?package=BlazorChat&version=1.0.1
BlazorChat
A drop-in, embeddable real-time chat component for Blazor applications.
BlazorChat is designed to be a lightweight, yet feature-rich, chat solution that can be easily integrated into any Blazor Server or Blazor WebAssembly application. It delegates persistence, broadcasting, and presence to a host-provided service, allowing for flexible backend implementations.
Key Features
- ✅ Real-time Messaging: Built for instant message delivery.
- ✅ Backend Agnostic: Pluggable backend via the
IChatServiceinterface. - ✅ In-Memory Provider: Includes a basic in-memory service for quick demos and testing.
- ✅ Message Reactions: Users can react to messages with emojis.
- ✅ Typing Indicators: Shows when other users are typing.
- ✅ Active User Presence: Displays a count and list of active users in the thread.
- ✅ Message Editing & Deletion: Users can edit or delete their own messages.
- ✅ Reply to Message: Provides context for conversations.
- ✅ Customizable Styling: Easily theme the widget using CSS variables or choose from presets.
- ✅ Accessible: Designed with ARIA attributes and keyboard navigation in mind.
Getting Started
Installation
First, add the BlazorChat NuGet package to your Blazor project.
dotnet add package BlazorChat
Backend Service Configuration
The ChatWidget requires a backend service that implements the IChatService interface. You can use the provided in-memory service for demos or a SignalR-based service for production.
Option 1: In-Memory Service (For Demos)
For quick setup and testing, you can use the built-in InMemoryChatService. This service works within a single server instance.
In your Program.cs, register it as a singleton:
// Program.cs
using BlazorChat.Services;
// ... other services
builder.Services.AddSingleton<IChatService, InMemoryChatService>();
Note: The
InMemoryChatServiceis for demonstration purposes only. For any real multi-user application, a robust SignalR backend is required.
Option 2: BlazorChat.Server (Recommended for Production)
To unlock the full potential of BlazorChat in a scalable, multi-user production environment, we offer BlazorChat.Server.
BlazorChat.Server is a pre-built, enterprise-ready SignalR backend designed to work seamlessly with the BlazorChat component. It provides the complete SignalR hub infrastructure and well-defined interfaces for you to connect your own database and persistence layer.
Benefits of BlazorChat.Server:
- Instant Setup: Complete SignalR hub implementation ready to use.
- Flexible Persistence: Provides
IChatRepositoryandIChatPresenceStoreinterfaces to connect your database of choice (SQL Server, PostgreSQL, Cosmos DB, etc.). - Scalable Architecture: Built to handle a large number of concurrent users.
- Authentication Ready: Easily integrates with your existing authentication system.
- Professionally Supported: Receive dedicated support for your chat implementation.
Skip the hassle of building your own SignalR infrastructure. Learn more and purchase BlazorChat.Server at www.loneworx.com.
Add the Component to a Page
Once your service is configured (either the demo InMemoryChatService or the production BlazorChat.Server), embed the ChatWidget in any Razor component. The component will automatically create its own SignalRChatService instance if one is not injected.
@page "/my-chat"
<ChatWidget ThreadId="project-alpha-general"
ChatSender="@currentUser"
HubUrl="/chathub"
ThreadTitle="Project Alpha Chat" />
@code
{
private ChatSender currentUser = new() { Id = "user123",
DisplayName = "Sam Wilson",
AvatarUrl = "https://i.pravatar.cc/150?img=11" };
}
Component Parameters
| Parameter | Type | Description |
|---|---|---|
ThreadId |
string |
Required. A unique identifier for the conversation thread. |
ChatSender |
ChatSender |
Required. An object representing the current user sending messages. |
HubUrl |
string |
The URL of the SignalR hub. Defaults to /chathub. |
AutoCreateChatService |
bool |
If true (default), the component creates its own SignalRChatService if an IChatService is not injected via DI. |
ThreadTitle |
string |
A title to display in the chat header. |
CaptionText |
string |
Optional text that overrides the ThreadTitle in the header. |
ThemePreset |
ChatThemePreset |
Selects a built-in theme (e.g., Default, Dark, Teams, Slack). |
CustomTheme |
ChatTheme |
A custom theme object to override the preset. |
WidgetWidth / Height |
string |
Sets the dimensions of the chat widget (e.g., "500px", "100%"). |
BubbleBackgroundMine |
string |
CSS color for the current user's message bubbles. |
BubbleBackgroundOther |
string |
CSS color for other users' message bubbles. |
Customization
You can customize the look and feel of the chat widget by overriding the available CSS variables. Apply these styles in your global stylesheet.
/* Example: In your app.css */
:root {
--blazor-chat-bubble-background-mine: #007bff;
--blazor-chat-bubble-color-mine: white;
--blazor-chat-bubble-background-other: #f1f1f1;
--blazor-chat-bubble-color-other: #333;
--blazor-chat-border-radius: 12px;
}
## 📜 License
### BlazorChat Component (GPL v3 - Free & Open Source)
**BlazorChat** is free and open-source software licensed under **GPL v3**:
- ✅ Full-featured chat component
- ✅ InMemory service for demos and testing
- ✅ Free for open-source projects
- ✅ Free for proprietary applications (GPL v3 allows this)
- ✅ Community support via GitHub Issues
- ⚠️ **GPL v3 Requirement:** Modifications to BlazorChat itself must remain open-source under GPL v3
**See [LICENSE](LICENSE) for full GPL v3 terms.**
### BlazorChat.Server (Commercial Product)
For **production environments**, **BlazorChat.Server** provides a complete SignalR backend infrastructure:
- ✅ **SignalR Hub** implementation for real-time communication
- ✅ **Storage interfaces** (`IChatRepository`, `IChatPresenceStore`) to connect your database
- ✅ **Scalable architecture** for enterprise use
- ✅ **Bring your own database** (SQL Server, PostgreSQL, Cosmos DB, MongoDB, etc.)
- ✅ **Email/phone support**
- ✅ **Priority bug fixes and feature requests**
- ✅ **Commercial license** for proprietary server implementations
**BlazorChat.Server requires a commercial license. Contact licensing@loneworx.com for pricing and details.**
> **Note**: You can use the free BlazorChat component with your own custom `IChatService` implementation without purchasing BlazorChat.Server. The commercial license is only required if you use the BlazorChat.Server package.
---
**Copyright (C) 2024-2026 LoneWorx LLC**
For more information, please visit:
- **Project URL**: [https://www.loneworkx.com/blazor-chat-demo](https://www.loneworkx.com/blazor-chat-demo)
- **Repository URL**: [https://github.com/simscon1/BlazorChat](https://github.com/simscon1/BlazorChat)
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- BlazorChat.Shared (>= 1.0.0)
- BlazorEmo (>= 1.0.0)
- BlazorRTE (>= 1.2.1)
- Microsoft.AspNetCore.Components.Web (>= 10.0.2)
- Microsoft.AspNetCore.Components.WebAssembly (>= 10.0.2)
- Microsoft.AspNetCore.SignalR.Client (>= 10.0.2)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
v1.0.1: Updated documentation and licensing information. Clarified GPL v3 license terms and BlazorChat.Server commercial offering.