经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
通过.NET Core+Vue3 实现SignalR即时通讯功能
来源:cnblogs  作者:架构师老卢  时间:2023/12/1 9:09:52  对本文有异议

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

步骤1:准备工作

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

  • .NET Core
  • Node.js
  • Vue CLI

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

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

  1. 打开终端并创建一个新的 .NET Core 项目:
  1. dotnet new web -n SignalRChatApp
  2. cd SignalRChatApp
  1. 在项目中添加 SignalR 包:
  1. dotnet add package Microsoft.AspNetCore.SignalR
  1. 打开 Startup.cs 文件,配置 SignalR 服务:
  1. // Startup.cs
  2. using Microsoft.AspNetCore.Builder;
  3. using Microsoft.AspNetCore.Hosting;
  4. using Microsoft.Extensions.Configuration;
  5. using Microsoft.Extensions.DependencyInjection;
  6. using Microsoft.Extensions.Hosting;
  7. namespace SignalRChatApp
  8. {
  9. public class Startup
  10. {
  11. public void ConfigureServices(IServiceCollection services)
  12. {
  13. services.AddSignalR();
  14. }
  15. public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  16. {
  17. if (env.IsDevelopment())
  18. {
  19. app.UseDeveloperExceptionPage();
  20. }
  21. app.UseRouting();
  22. app.UseEndpoints(endpoints =>
  23. {
  24. endpoints.MapHub<ChatHub>("/chatHub");
  25. });
  26. }
  27. }
  28. }
  1. 创建一个名为 ChatHub.cs 的 SignalR Hub:
  1. // ChatHub.cs
  2. using Microsoft.AspNetCore.SignalR;
  3. using System.Threading.Tasks;
  4. namespace SignalRChatApp
  5. {
  6. public class ChatHub : Hub
  7. {
  8. public async Task SendMessage(string user, string message)
  9. {
  10. await Clients.All.SendAsync("ReceiveMessage", user, message);
  11. }
  12. }
  13. }

步骤3:创建 Vue3 前端

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

  1. 在终端中,创建一个新的 Vue3 项目:
  1. vue create vue-signalr-chat

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

  1. 安装 SignalR 客户端库:
  1. npm install @microsoft/signalr
  1. 创建一个 Vue 组件来处理聊天:
  1. <!-- src/components/Chat.vue -->
  2. <template>
  3. <div>
  4. <div>
  5. <input v-model="user" placeholder="Enter your name" />
  6. </div>
  7. <div>
  8. <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message" />
  9. </div>
  10. <div>
  11. <div v-for="msg in messages" :key="msg" class="message">{{ msg }}</div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. user: "",
  20. message: "",
  21. messages: [],
  22. };
  23. },
  24. mounted() {
  25. this.connection = new signalR.HubConnectionBuilder()
  26. .withUrl("/chatHub")
  27. .build();
  28. this.connection.start().then(() => {
  29. this.connection.on("ReceiveMessage", (user, message) => {
  30. this.messages.push(`${user}: ${message}`);
  31. });
  32. });
  33. },
  34. methods: {
  35. sendMessage() {
  36. if (this.user && this.message) {
  37. this.connection.invoke("SendMessage", this.user, this.message);
  38. this.message = "";
  39. }
  40. },
  41. },
  42. };
  43. </script>
  44. <style scoped>
  45. .message {
  46. margin: 5px;
  47. }
  48. </style>
  1. 在 src/views/Home.vue 中使用 Chat 组件:
  1. <template>
  2. <div class="home">
  3. <img alt="Vue logo" src="../assets/logo.png" />
  4. <Chat />
  5. </div>
  6. </template>
  7. <script>
  8. import Chat from "@/components/Chat.vue";
  9. export default {
  10. name: "Home",
  11. components: {
  12. Chat,
  13. },
  14. };
  15. </script>

步骤4:运行应用程序

  1. 启动 .NET Core 后端应用程序:
  1. dotnet run
  1. 启动 Vue3 前端应用程序:
  1. npm run serve

现在,你的 SignalR 实时聊天应用程序应该已经运行了。打开浏览器,访问 `http://

localhost:8080`,输入用户名,开始聊天。

这个示例演示了如何使用 .NET Core SignalR 后端和 Vue3 前端创建一个简单的实时聊天应用程序。你可以根据需要扩展该应用程序,添加更多功能和样式。此外,你还可以使用 SignalR 来构建更复杂的实时应用程序,如实时通知、在线游戏和协同编辑等。

原文链接:https://www.cnblogs.com/hanbing81868164/p/17868102.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号