首页 > 其他分享 >通过.NET Core+Vue3 实现SignalR即时通讯功能

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

时间:2023-11-30 19:45:01浏览次数:40  
标签:Core 应用程序 SignalR Vue3 NET message

.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 项目:
dotnet new web -n SignalRChatApp
cd SignalRChatApp
  1. 在项目中添加 SignalR 包:
dotnet add package Microsoft.AspNetCore.SignalR
  1. 打开 Startup.cs 文件,配置 SignalR 服务:
// 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>("/chatHub");
            });
        }
    }
}
  1. 创建一个名为 ChatHub.cs 的 SignalR Hub:
// 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);
        }
    }
}

步骤3:创建 Vue3 前端

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

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

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

  1. 安装 SignalR 客户端库:
npm install @microsoft/signalr
  1. 创建一个 Vue 组件来处理聊天:
<!-- src/components/Chat.vue -->

<template>
  <div>
    <div>
      <input v-model="user" placeholder="Enter your name" />
    </div>
    <div>
      <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message" />
    </div>
    <div>
      <div v-for="msg in messages" :key="msg" class="message">{{ msg }}</div>
    </div>
  </div>
</template>

<script>
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 = "";
      }
    },
  },
};
</script>

<style scoped>
.message {
  margin: 5px;
}
</style>
  1. 在 src/views/Home.vue 中使用 Chat 组件:
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <Chat />
  </div>
</template>

<script>
import Chat from "@/components/Chat.vue";

export default {
  name: "Home",
  components: {
    Chat,
  },
};
</script>

步骤4:运行应用程序

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

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

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

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

标签:Core,应用程序,SignalR,Vue3,NET,message
From: https://www.cnblogs.com/hanbing81868164/p/17868102.html

相关文章

  • 当多个使用弹窗类组件,可使用这种方式封装组件。(以下使用antd-vue、vue3)
    1.代码点击查看代码<template><slot:openDialog="openDialog":closDialog="modalCancel"></slot><a-modalv-model:open="open"title="BasicModal"@cancel="modalCancel"><templat......
  • vue3,Nginx部署情况
    一.Vue3项目情况说明router文件夹下的index.jsimport{createRouter,createWebHashHistory}from"vue-router"constroutes=[{path:'/saoma',name:'Saoma',//redirect:'/saoma',component:()......
  • vue3页面中,两个相同组件,一个卸载,一个挂载,后展示的组件事件监听不生效?
    场景:在实际开发中,遇到了这样一种场景,vue3页面,两个相同组件,在满足某条件下展示第一个组件,满足另一个条件下,隐藏第一个组件,同时展示第二个组件,比如反馈组件,会通过window.addEventListener来监听自定义的反馈弹窗展示和隐藏事件。结果:两个相同组件一个卸载,一个挂载,第一个组监听的......
  • .net core 6 DEBUG环境下不注入的服务
    .netcore6中,如果有些服务不想在调试时启动,比如nacos及一些监听器,如果每次注释,难免会出错误。所以在Program.cs文件中写明,DEBUG环境下是不启动的:#ifDEBUG#else//Nacos服务发现注册builder.Services.AddNacosAspNet(builder.Configuration);//默认找"nacos"节//Nacos读取配......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
    项目代码同步至码云weiz-vue3-templateVueRouter是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。1.安装npmivue-router@42.集成1.新建两页面进行示例在src/view下新建home.vue和login.vue,内容如下:<scriptsetuplang="t......
  • .net core中实现服务自动发现
    .netcore中自带了依赖注入框架,asp.netcore或worker框架下可以直接使用,控制台程序可以通过加入Microsoft.Extensions.DependencyInjection程序包来支持。自带的di框架功能还行,但是一个不方便的地方是没有提供服务自动发现、注册的接口,稍微大的程序都是需要通过反射自己写一个发......
  • .Net Core 单元测试获取配置文件节点值
     单元测试类:ServiceProvider_serviceProvider;IConfiguration_config;[SetUp]publicvoidSetup(){_config=newConfigurationBuilder().Add(newJsonConfigurationSource{Path="appsettings.jso......
  • vue Vite3出现错误runtime-core.esm-bundler.js:6835 Uncaught TypeError: normalize
    原因是在引入Element-Plus的顺序在vue之前导致,重新调整下他们的顺序后,问题解决。importAppfrom'./App.vue'import{setupI18n}from'/@/i18n'import{setupRouter}from'/@/router'import{setupStore}from'/@/store'importbusfrom'/@......
  • vue3+vite 代码混淆插件 | JavaScript obfuscator
    安装插件yarnadd--devrollup-plugin-javascript-obfuscator创建obfuscator.js文件,把下面相应代码放入js文件中importobfuscatorPluginfrom'rollup-plugin-javascript-obfuscator';exportfunctioncodeObfuscatorPlugin(isBuild){if(!isBuild){return[];}......
  • vue3 reactive对象的watch
    代码<scriptsetup>import{ref,reactive,watch}from'vue'constobj=reactive({count:0})constyourKnow0=ref('')constyourKnow1=ref('')letcnt=0watch(obj,(newValue,oldValue)=>{//在嵌套的属性变更时触发......