Sai.MessageHub 2.0.2

Sai.MessageHub

Simple WebSocket message handler implemented as aspnetcore middleware. All messages are sent as UTF8 encoded text with the following format: type:<data serialized as JSON> Clients can send messages to the server and can add handlers for message types it wants to receive. Server can do the same, plus has the ability to respond to the client that sent the message, or send a message to all clients.

There are two possible ways of utilising the message hub:

1. Minimal API Using WebApplication extension methods AddMessageReceivedHandler, AddDefaultMessageReceivedHandler, AddClientConnectedHandler, AddClientDisconnectedHandler.
2. Using IMessageHubService, such as consumed in a worker/background service. Both option can be used in the same application, if desired.

Example Usage

Program.cs

using Sai.MessageHub;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMessageHub();
builder.Services.AddHostedService<MyWorker>(); // Example worker which sends the time to all MessageHub clients every second

var app = builder.Build();

app.UseMessageHub();

// Begin Minimal API
// -----------------
// Message handler for "counter" type. Generic type <T> relates to data type.
// Can map multiple handlers to the same type if required.
app.AddMessageReceivedHandler<int>("counter", (context, data) =>
{
    context.SendMessageToClient("counter-response", data); // echo back to sender
    context.SendMessageToAllClients("last-counter-update", DateTime.UtcNow); // send last update to all clients
});

// Optional fallback message handler for unhandled message types
app.AddDefaultMessageReceivedHandler((context, dataJson) =>
{
    throw new NotImplementedException($"Message type '{context.Type}' is not implemented.");
});

// Optional "on connect" handler
app.AddClientConnectedHandler(context => Console.WriteLine($"Connected: {context.ConnectionID}"));

// Optional "on disconnect" handler
app.AddClientDisconnectedHandler(context => Console.WriteLine($"Disconnected: {context.ConnectionID}"));

// End Minimal API
// -----------------

app.Run();

MyWorker.cs

public class MyWorker : BackgroundService
{
    private readonly ILogger<MyWorker> _logger;
    private readonly IMessageHubService _messageHubService;
    public MyWorker(ILogger<MyWorker> logger, IMessageHubService messageHubService)
    {
        _logger = logger;
        _messageHubService = messageHubService;

        _messageHubService.AddClientConnectedHandler(client =>
        {
            logger.LogInformation("Client {0} connected", client.ConnectionID);
            client.SendMessageToClient("connected", client.ConnectionID);
        });

        _messageHubService.AddClientDisconnectedHandler(connectionID =>
        {
            logger.LogInformation("Client {0} disconnected", connectionID);
        });

        _messageHubService.AddMessageReceivedHandler<int>("counter", (context, data) =>
        {
            logger.LogInformation("Counter value: {0}", data);
        });
    }

    protected override Task ExecuteAsync(CancellationToken stoppingToken)
    {
        return Task.Run(() =>
        {
            while (!stoppingToken.IsCancellationRequested)
            {
                stoppingToken.WaitHandle.WaitOne(1000);
                _messageHubService.SendMessageToAllClients("time", DateTime.UtcNow);
            }
        });
    }
}

client.cshtml

<section>
    <p>
        <span>Global Time Update</span>
        <span class="time"></span>
    </p>

    <p>
        <span>My Counter Response</span>
        <span class="counter-response"></span>
    </p>

    <p>
        <span>Last Counter Update</span>
        <span class="last-counter-update"></span>
    </p>
</section>

<script type="module">
    import { MessageHub } from "@Url.Content("~/js/messageHub.js")";

    const messageHub = new MessageHub();

    messageHub.addMessageHandler("time", data => {
        document.querySelector(".time").innerText = data;
    });

    messageHub.addMessageHandler("counter-response", data => {
        document.querySelector(".counter-response").innerText = data;
    });

    messageHub.addMessageHandler("last-counter-update", data => {
        document.querySelector(".last-counter-update").innerText = data;
    });

    try
    {
        await messageHub.connect();
                
        let counter = 0;
        setInterval(() => {
            counter++;
            messageHub.sendMessage("counter", counter);
        }, 1000);
    }
    catch(err)
    {
        alert(err);
    }
</script>

messageHub.js

/* MessageHub v2.0 */
export class MessageHub {

    constructor() {
        this.websocket = null;
        this.handlers = [];
        this.defaultHandlers = [];
        this.closedHandler = null;
        this.errorHandler = null;
        this.open = false;
    }

    connect() {
        if (window.location.protocol.startsWith("https"))
            return this.connectUri("wss://" + window.location.host);
        else
            return this.connectUri("ws://" + window.location.host);
    }

    connectUri(wsUri) {
        return new Promise((resolve, reject) => {
            this.websocket = new WebSocket(wsUri);

            this.websocket.onopen = evt => {
                this.open = true;
                resolve();
            };

            this.websocket.onclose = evt => {
                this.websocket.close();
                if (this.open && this.closedHandler != null) {
                    this.closedHandler();
                }
            };

            this.websocket.onmessage = evt => {
                const dataIndex = evt.data.indexOf(":");
                if (dataIndex < 0)
                    return;
                const type = evt.data.substring(0, dataIndex);
                const jsonData = evt.data.substring(dataIndex + 1);
                for (let i = 0; i < this.handlers.length; i++) {
                    const handler = this.handlers[i];
                    if (handler.type == type) {
                        const data = JSON.parse(jsonData); // Unique data object for each handler
                        handler.delegate(data);
                    }
                }

                for (let i = 0; i < this.defaultHandlers.length; i++) {
                    const handler = this.defaultHandlers[i];
                    const data = JSON.parse(jsonData); // Unique message object for each handler
                    handler(message.Type, data);
                }
            };

            this.websocket.onerror = evt => {
                if (!this.open) {
                    reject(`Failed to connect to web socket: ${wsUri}`);
                }
                else if (this.errorHandler != null) {
                    this.errorHandler();
                }
            };
        });
    }

    close() {
        this.websocket.close();
    }

    sendMessage(type, data) {
        if (type.includes(":"))
            throw new Error("'type' is invalid. Character ':' is not allowed.")
        if (data == null)
            data = {};
        const json = JSON.stringify(data);
        const message = type + ":" + json;
        this.websocket.send(message);
    }

    addMessageHandler(type, delegate) {
        this.handlers.push({ type: type, delegate: delegate });
    }

    addDefaultMessageHandler(delegate) {
        this.defaultHandlers.push(delegate);
    }

    setConnectionClosedHandler(delegate) {
        this.closedHandler = delegate;
    }

    setErrorHandler(delegate) {
        this.errorHandler = delegate;
    }
}