You can easily build a chat application with in 10 minutes by using ASP.NET Core and SignalR
Let’s build an chat application using this. First of all, make sure you have Visual Studio installed in your machine.
What is SignalR ?:
SignalR is a real-time communication library for web applications, enabling seamless two-way communication between clients and servers. It empowers developers to build interactive and dynamic web experiences, such as live chat, notifications, and collaborative features.
Let’s start building a chat app using SignalR and ASP.NET Core, It’s pretty simple.
Build A Chat App
STEP 1:
Open Visual Studio and Click Create New Project and select asp.net core web app (Model-View-Controller)
STEP 2:
After creating a solution write click on the project and click Add –> Client-Side Library. Select
Provider –> unpkg
Library –> @aspnet/signalr and choose signalr.js and signalr.min.js and click install .
Check Bellow Image for reference.
STEP 3:
Now right click on the project and create a new folder named Hub. Inside Hub folder create a new class named ChatHub.cs and paste the following code.
using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace ChitChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
STEP 4:
Now go to Startup.cs class and in ConfigureServices(IServiceCollection services) method add SignalR .
services.AddSignalR();
STEP 5:
And in Configure(IApplicationBuilder app, IWebHostEnvironment env) method add following code.
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
STEP 6:
Now open index.cshtml page and replace with follwing code
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chat Application</title>
<style>
/* CSS styles for the chat UI */
</style>
</head>
<body>
<div id="chatContainer">
<ul id="messagesList"></ul>
<input type="text" id="userInput" placeholder="User" />
<input type="text" id="messageInput" placeholder="Message" />
<button id="sendButton">Send</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.11/signalr.min.js"></script>
<script src="/chat.js"></script>
</body>
</html>
<script src="~/js/site.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/aspnet/signalr/dist/browser/signalr.js"></script>
STEP 7:
Now run the application and this will return a page like this.
STEP 8:
Copy the URL and open another browser. And write user name and message.
Output:
If you write something in window 1 , it will immediately display in window 2. And if window 2 user write something it will display to window 1.
Hope you like this. Give your reaction and Share it with your friends if you like this .
You can also add User based authentication in this project
Happy Coding 🙂 .
Check and Download Demo Project here.
ChitChat Demo Project
Thank you for this, but your article is incomplete. Your demo project has the working code, but you missed steps for updating the .js script to call the hub, and your screenshot for the index page suggests you need to add a second project.
Thanks for your observation, i will update it soon
When someone writes an piece of writing he/she maintains the plan of a user in his/her brain that how a user can be aware of it. Therefore that’s why this article is perfect. Thanks!