1024programmer Asp.Net Implement SignalR instant messaging function through .NET Core+Vue3

Implement SignalR instant messaging function through .NET Core+Vue3

Implement SignalR instant messaging function through .NET Core+Vue3

.NET Core and Vue3 combine to use SignalR to achieve powerful real-time communication capabilities, allowing real-time two-way communication. In this example, we’ll detail how to create a simple chat application that demonstrates how to implement real-time communication capabilities using a .NET Core SignalR backend and a Vue3 frontend.

Step 1: Preparation

Make sure you have the following tools and environments installed:

  • .NET Core
  • Node.js
  • Vue CLI

Step 2: Create the .NET Core SignalR backend

First, let’s create a .NET Core SignalR backend application.

  1. Open a terminal and create a new .NET Core project:
dotnet new web -n SignalRChatApp
 cd SignalRChatApp
  1. Add the SignalR package to the project:
dotnet add package Microsoft.AspNetCore.SignalR
  1. Open the Startup.cs file and configure the SignalR service:
// Startup.cs

 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;

 namespace SignalRChatApp
 {
     public class Startup
     {
         public void ConfigureServices(IServiceCollection services)
         {
             services.AddSignalR();
         }

         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         {
             if (env.IsDevelopment())
             {
                 app.UseDeveloperExceptionPage();
             }

             app.UseRouting();
             app.UseEndpoints(endpoints =>
             {
                 endpoints.MapHub("/chatHub");
             });
         }
     }
 }
  1. Create a SignalR Hub named ChatHub.cs:
// ChatHub.cs

 using Microsoft.AspNetCore.SignalR;
 using System.Threading.Tasks;

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

Step 3: Create Vue3 front end

Now we will create a Vue3 front-end application to connect to the SignalR backend.

  1. In the terminal, create a new Vue3 project:
vue create vue-signalr-chat

Select the default configuration or configure as needed.

  1. Install SignalR client library:
npm install @microsoft/signalr
  1. Create a Vue component to handle chat:


 
   
{{ msg }}
export default { data() { return { user: "", message: "", messages: [], }; }, mounted() { this.connection = new signalR.HubConnectionBuilder() .withUrl("/chatHub") .build(); this.connection.start().then(() => { this.connection.on("ReceiveMessage", (user, message) => { this.messages.push(`${user}: ${message}`); }); }); }, methods: { sendMessage() { if (this.user && this.message) { this.connection.invoke("SendMessage", this.user, this.message); this.message = ""; } }, }, }; .message { margin: 5px; }
  1. Use Chat component in src/views/Home.vue:

   
Vue logo
import Chat from "@/components/Chat.vue"; export default { name: "Home", components: { Chat, }, };

Step 4: Run the application

  1. Launch .NET Core backend application:
dotnet run
  1. Start the Vue3 front-end application:
npm run serve

Your SignalR live chat application should now be running. Open the browser and visit `http://

localhost:8080`, enter your username and start chatting.

This example demonstrates how to create a simple real-time chat application using a .NET Core SignalR backend and a Vue3 frontend. You can extend the app as needed, adding more features and styles. In addition, you can use SignalR to build more complex real-time applications, such as real-time notifications, online games, and collaborative editing.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/811171

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索