Ensure Messages Display Immediately in Chat App with ASP.NET Core MVC, Identity, and SignalR

Creating a One-to-One Chat Application using ASP.NET Core MVC, Identity, and SignalR

In this article, we will discuss how to create a one-to-one chat application using ASP.NET Core MVC, Identity, and SignalR. The application will allow users to send and receive messages in real-time. However, we encountered an issue while selecting user lists and sending messages.

Prerequisites

To get started, you need to have the following installed on your machine:

• Visual Studio 2019 or later
• ASP.NET Core 5.0 SDK or later

Creating the Project

Create a new ASP.NET Core Web Application in Visual Studio and select the "Empty" template. Choose ASP.NET Core 5.0 as the framework and ensure that the "Enable Razor Runtime Compilation" option is checked.

Next, add the required NuGet packages. Right-click on the project in the Solution Explorer and select "Manage NuGet Packages". Install the following packages:

• Microsoft.AspNetCore.SignalR
• Microsoft.AspNetCore.Identity.EntityFrameworkCore

Setting up Identity

Add a new folder named "Models" to the project. Inside this folder, add a new class named "ApplicationUser". This class should inherit from the "IdentityUser" class.

public class ApplicationUser : IdentityUser
{
// Add any additional properties here
}

Next, open the "Startup.cs" file and add the following code to the "ConfigureServices" method:

services.AddDbContext(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

services.AddIdentity(options =>
{
options.SignIn.RequireConfirmedAccount = true;
options.Password.RequireDigit = true;
options.Password.RequireLowercase = true;
options.Password.RequireUppercase = true;
options.Password.RequireNonAlphanumeric = true;
options.Password.RequiredLength = 6;
})
.AddEntityFrameworkStores();

Replace "DefaultConnection" with the name of your database connection string. This code sets up Identity to use a SQL Server database.

Setting up SignalR

Add a new folder named "Hubs" to the project. Inside this folder, add a new class named "ChatHub". This class should inherit from the "Hub" class.

public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}

Next, open the "Startup.cs" file and add the following code to the "ConfigureServices" method:

services.AddSignalR();

Add the following code to the "Configure" method:

app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapHub("/chatHub");
});

Creating the Chat View

Add a new folder named "Views" to the project. Inside this folder, add a new folder named "Chat". Inside this folder, add a new Razor Page named "Index.cshtml".

Add the following code to the "Index.cshtml" file:

<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Users</h2>
<ul id="usersList"></ul>
</div>
<div class="col-md-8">
<h2>Chat</h2>
<ul id="messagesList"></ul>
<form id="messageForm">
<div class="form-group">
<input type="text" id="userInput" class="form-control" placeholder="User" />
</div>
<div class="form-group">
<input type="text" id="messageInput" class="form-control" placeholder="Message" />
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>

<script src="~/lib/signalr/signalr.js"></script>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();

connection.on("ReceiveMessage", (user, message) => {
const listItem = document.createElement("li");
listItem.textContent = `${user}: ${message}`;
document.getElementById("messagesList").appendChild(listItem);
});

connection.start().catch(err => console.error(err.toString()));

document.getElementById("messageForm").addEventListener("submit", e => {
e.preventDefault();
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
document.getElementById("messageInput").value = "";
});
</script>

Issue: Selecting User Lists and Sending Messages

The issue we encountered was related to selecting user lists and sending messages. One possible solution is to use a library or framework that provides real-time communication capabilities, such as SignalR. SignalR allows us to easily send and receive messages between clients and servers in real-time.

In this article, we discussed how to create a one-to-one chat application using ASP.NET Core MVC, Identity, and SignalR. We covered the prerequisites, creating the project, setting up Identity, setting up SignalR, creating the chat view, and the issue we encountered related to selecting user lists and sending messages. By using SignalR, we were able to easily send and receive messages between clients and servers in real-time.

References

• ASP.NET Core SignalR: https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-5.0
• ASP.NET Core Identity: https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-5.0
• ASP.NET Core Razor Pages: https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-5.0