Quick start

using System.Collections.Concurrent;
using Microsoft.AspNetCore.SignalR;

namespace Server.Hubs;

public record ChatMessage(string RoomId, string User, string Text, DateTimeOffset SentAt);

/// <summary>Teaching hub: chat rooms built on SignalR groups.</summary>
public class RoomHub : Hub
{
    private const int HistoryLimit = 50;
    private static readonly ConcurrentDictionary<string, Queue<ChatMessage>> History = new();

    // Adding a connection that is already in the group changes nothing, so the client can retry.
    public Task JoinRoom(string roomId) => Groups.AddToGroupAsync(Context.ConnectionId, roomId);

    public Task LeaveRoom(string roomId) => Groups.RemoveFromGroupAsync(Context.ConnectionId, roomId);

    public Task SendMessage(string roomId, string text)
    {
        var message = new ChatMessage(roomId, Context.User?.Identity?.Name ?? "anonymous", text, DateTimeOffset.UtcNow);
        var history = History.GetOrAdd(roomId, _ => new Queue<ChatMessage>());
        lock (history)
        {
            history.Enqueue(message);
            if (history.Count > HistoryLimit) history.Dequeue();
        }
        return Clients.Group(roomId).SendAsync("MessageReceived", message);
    }

    public ChatMessage[] GetHistory(string roomId)
    {
        if (!History.TryGetValue(roomId, out var history)) return [];
        lock (history) return history.ToArray();
    }
}

import { event, method } from "@dammers/use-signalr-solid";

export interface ChatMessage {
  roomId: string;
  user: string;
  text: string;
  sentAt: string;
}

// Keys are hub paths. Names and argument types match the server hub.
export const hubs = {
  "/hubs/rooms": {
    events: {
      MessageReceived: event<[message: ChatMessage]>(),
    },
    methods: {
      JoinRoom: method<[roomId: string]>(),
      LeaveRoom: method<[roomId: string]>(),
      SendMessage: method<[roomId: string, text: string]>(),
      GetHistory: method<[roomId: string], ChatMessage[]>(),
    },
  },
  "/hubs/presence": {
    lazy: true,
    graceMs: 2000,
    events: {
      OnlineCount: event<[count: number]>(),
    },
  },
};

import { createSignalRClient } from "@dammers/use-signalr-solid";
import { hubs } from "./contract";

export const {
  SignalRProvider,
  useSignalREffect,
  useSignalRInvoke,
  useSignalRSend,
  useSignalRTeardown,
  useHubStatus,
  useOnReconnected,
} = createSignalRClient({ hubs });

import { SignalRProvider } from "./client";

render(
  () => (
    <SignalRProvider
      baseUrl="https://api.example.com"
      accessTokenFactory={getToken}
      enabled={isSignedIn()}
    >
      <App />
    </SignalRProvider>
  ),
  document.getElementById("root")!,
);

import { createEffect, createSignal, For } from "solid-js";
import type { ChatMessage } from "./contract";
import { useHubStatus, useSignalREffect, useSignalRInvoke } from "./client";
import { ignoreAbort } from "./ignore-abort";

export function Room(props: { roomId: string }) {
  const [messages, setMessages] = createSignal<ChatMessage[]>([]);
  const status = useHubStatus("/hubs/rooms");
  const joinRoom = useSignalRInvoke("/hubs/rooms", "JoinRoom");
  const sendMessage = useSignalRInvoke("/hubs/rooms", "SendMessage");

  createEffect(() => {
    if (status() === "connected") joinRoom(props.roomId).catch(ignoreAbort);
  });

  useSignalREffect("/hubs/rooms", "MessageReceived", (message) => {
    if (message.roomId === props.roomId) setMessages((all) => [...all, message]);
  });

  return (
    <div>
      <ul>
        <For each={messages()}>{(m) => <li>{m.user}: {m.text}</li>}</For>
      </ul>
      <button
        disabled={status() !== "connected"}
        onClick={() => sendMessage(props.roomId, "Hello").catch(ignoreAbort)}
      >
        Say hello
      </button>
    </div>
  );
}