通过.NET Core+Vue3 实现SignalR即时通讯功能

飞鱼泡泡

.NET Core 和 Vue3 结合使用 SignalR 可以实现强大的实时通讯功能，允许实时双向通信。在这个示例中，我们将详细说明如何创建一个简单的聊天应用程序，演示如何使用 .NET Core SignalR 后端和 Vue3 前端来实现实时通讯功能。
步骤1：准备工作

确保你已经安装了以下工具和环境：

• .NET Core
  
• Node.js
  
• Vue CLI
  

步骤2：创建 .NET Core SignalR 后端

首先，让我们创建一个 .NET Core SignalR 后端应用程序。

• 打开终端并创建一个新的 .NET Core 项目：
  

1. dotnet new web -n SignalRChatApp
2. cd SignalRChatApp

复制代码

• 在项目中添加 SignalR 包：
  

1. dotnet add package Microsoft.AspNetCore.SignalR

复制代码

• 打开 Startup.cs 文件，配置 SignalR 服务：
  

1. // Startup.cs
3. using Microsoft.AspNetCore.Builder;
4. using Microsoft.AspNetCore.Hosting;
5. using Microsoft.Extensions.Configuration;
6. using Microsoft.Extensions.DependencyInjection;
7. using Microsoft.Extensions.Hosting;
9. namespace SignalRChatApp
10. {
11.     public class Startup
12.     {
13.         public void ConfigureServices(IServiceCollection services)
14.         {
15.             services.AddSignalR();
16.         }
18.         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
19.         {
20.             if (env.IsDevelopment())
21.             {
22.                 app.UseDeveloperExceptionPage();
23.             }
25.             app.UseRouting();
26.             app.UseEndpoints(endpoints =>
27.             {
28.                 endpoints.MapHub<ChatHub>("/chatHub");
29.             });
30.         }
31.     }
32. }

复制代码

• 创建一个名为 ChatHub.cs 的 SignalR Hub：
  

1. // ChatHub.cs
3. using Microsoft.AspNetCore.SignalR;
4. using System.Threading.Tasks;
6. namespace SignalRChatApp
7. {
8.     public class ChatHub : Hub
9.     {
10.         public async Task SendMessage(string user, string message)
11.         {
12.             await Clients.All.SendAsync("ReceiveMessage", user, message);
13.         }
14.     }
15. }

复制代码

步骤3：创建 Vue3 前端

现在，我们将创建一个 Vue3 前端应用程序，以连接到 SignalR 后端。

• 在终端中，创建一个新的 Vue3 项目：
  

1. vue create vue-signalr-chat

复制代码

选择默认配置或根据需要进行配置。

• 安装 SignalR 客户端库：
  

1. npm install @microsoft/signalr

复制代码

• 创建一个 Vue 组件来处理聊天：
  

1. <template>
2.   
3.    
4.       <input v-model="user" placeholder="Enter your name" />
5.    
6.    
7.       <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message" />
8.    
9.    
10.       {{ msg }}
11.    
12.   
13. </template>

复制代码

• 在 src/views/Home.vue 中使用 Chat 组件：
  

1. <template>
2.   
3.     <img alt="Vue logo" src="https://www.cnblogs.com/../assets/logo.png" />
4.     <Chat />
5.   
6. </template>

复制代码

步骤4：运行应用程序

• 启动 .NET Core 后端应用程序：
  

1. dotnet run

复制代码

• 启动 Vue3 前端应用程序：
  

1. npm run serve

复制代码

现在，你的 SignalR 实时聊天应用程序应该已经运行了。打开浏览器，访问 `http://
localhost:8080`，输入用户名，开始聊天。
这个示例演示了如何使用 .NET Core SignalR 后端和 Vue3 前端创建一个简单的实时聊天应用程序。你可以根据需要扩展该应用程序，添加更多功能和样式。此外，你还可以使用 SignalR 来构建更复杂的实时应用程序，如实时通知、在线游戏和协同编辑等。

来源:https://www.cnblogs.com/hanbing81868164/archive/2023/11/30/17868102.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！