ASP.NET Core - Tiny Chat App using SignalR

#dotnet #csharp #aspnet #signalr

Warning! This code is for demonstration purposes only.

Create an empty ASP.NET web app:
```
dotnet new web -o TinyChat
```

In your Program.cs, add SignalR service, set to serve static files and map the SignalR hub.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();
var app = builder.Build();

app.UseStaticFiles();
app.MapHub<ChatHub>("/ChatHub");
app.Run();

In your project directory, add ChatHub.cs that contains:

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // this can be invoked from the client -- web browser in our example
    public async Task SendMessage(string username, string message)
    {
        // invoke ReceiveMessage on all clients connected
        await Clients.All.SendAsync("ReceiveMessage", username, message);
    }
}

Add folder wwwroot in the project directory. Then add chat.html which contains:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <input id='usernameInput' placeholder='username' />
        <input id='messageInput' placeholder='message' />
        <button id='sendButton'>Send</button>
        <ul id='conversationList'></ul>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.8/signalr.min.js'></script>
        <script src='/chat.js'></script>
    </body>
</html>

In wwwroot, add chat.js which contains:

"use strict";
document.addEventListener('DOMContentLoaded', function() {
var connection = new signalR.HubConnectionBuilder().withUrl("/ChatHub").build();

// Handler for receiving a message. This will be invoked by the server.
connection.on("ReceiveMessage", function (username, message) {
    var messageItem = document.createElement("li");
    messageItem.textContent = `${username}: ${message}`; 

    var conversationList = document.querySelector("#conversationList");
    conversationList.prepend(messageItem);
});

// Initiate connection and set callback for error.
connection.start().then(function () {

}).catch(function (err) {
    return console.error(err.toString());
});

// Handler for sending message to the server.
document.querySelector("#sendButton").addEventListener("click", function (event) {
    var username = document.querySelector("#usernameInput").value;
    var message = document.querySelector("#messageInput").value;

    connection.invoke("SendMessage", username, message)
    .catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});
});

Run the app using dotnet run and go to https://localhost:<port>/chat.html.

Resource
Microsoft Docs

DEV Community

ASP.NET Core - Tiny Chat App using SignalR

Top comments (0)

Read next

Advent of Code 2024: Day 16 - Reindeer Maze

Advent of Code 2024: Day 12: Garden Groups

Streamlining .NET Development with Practical Aspects

RabbitMQ: Fanout Exchange Pattern.