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

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

DEV Community

ASP.NET Core - Tiny Chat App using SignalR

Build apps, not infrastructure.

Top comments (0)

A Workflow Copilot. Tailored to You.

Read next

Advent of Code 2024- Day 5: Print Queue

[Vite + React] Running an ASP.NET Core application behind a reverse proxy

AntiCrack-DotNet: Advanced Methods to prevent cracking.

Exploring the new HybridWebView for MAUI 9

AWS Security LIVE!