SignalR Connector

Declarative SignalR hub connection that swaps received HTML fragments into the DOM in real time.

<rhx-signalr>

Examples

The SignalR Connector requires the @microsoft/signalr client library loaded before rhx-signalr.js. This demo site includes it globally. In your own project, add <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"></script> to your layout.

Server Clock

A background service pushes the server time every 2 seconds via IHubContext<DemoHub>. The component replaces its content on each message.

<!-- Server pushes a timestamp every 2 seconds -->
<rhx-signalr hub-url="/demoHub" rhx-method="ServerClock"
             rhx-connection-state="true">
    <rhx-spinner rhx-size="small" />
</rhx-signalr>

Chat Messages

Type a message and click Send. The hub broadcasts to all connected clients and the beforeend swap appends each message.

Messages will appear here...

<!-- Messages appended as they arrive -->
<rhx-signalr hub-url="/demoHub" rhx-method="ReceiveMessage"
             rhx-swap="beforeend" rhx-target="#chat-messages"
             rhx-connection-state="true">
</rhx-signalr>
<div id="chat-messages"></div>

Hub Implementation

Define a standard SignalR hub. The JoinGroup method is required if you use rhx-groups.

public class ChatHub : Hub
{
    public Task JoinGroup(string groupName)
        => Groups.AddToGroupAsync(Context.ConnectionId, groupName);

    public async Task SendMessage(string user, string message)
    {
        var html = $"<div><strong>{user}</strong>: {message}</div>";
        await Clients.All.SendAsync("ReceiveMessage", html);
    }
}

Server-Side Extensions

Use HtmxSignalRExtensions to send HTML fragments from controllers, background services, or anywhere you have IHubContext.

// From a controller or background service via IHubContext:
await hubContext.SendHtmlAsync("ReceiveMessage",
    "<div>Broadcast to everyone</div>");

await hubContext.SendHtmlToGroupAsync("room1",
    "ReceiveMessage", "<div>Group-only message</div>");

await hubContext.SendHtmlToConnectionAsync(connectionId,
    "ReceiveMessage", "<div>Private message</div>");

Setup

// Program.cs
builder.Services.AddSignalR();

var app = builder.Build();
app.MapHub<ChatHub>("/chatHub");

Properties

Property	Type	Default	Description
`hub-url`	`string`	`-`	The SignalR hub URL to connect to
`page`	`string`	`-`	Razor Page path for hub URL generation
`page-handler`	`string`	`-`	Page handler for hub URL generation
`rhx-method`	`string`	`-`	Hub method name to listen for
`rhx-swap`	`string`	`innerHTML`	How received HTML is swapped: innerHTML, beforeend, outerHTML, etc.
`rhx-target`	`string`	`self`	CSS selector for the swap target element
`rhx-reconnect`	`bool`	`true`	Automatically reconnect on connection loss
`rhx-transport`	`string`	`auto`	Force transport: websockets, sse, or longpolling
`rhx-groups`	`string`	`-`	Comma-separated group names to join on connect
`rhx-connection-state`	`bool`	`false`	Show visual connection state indicator