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

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

2024-01-24 14:07架构师老卢 ASP.NET教程

在这个示例中，我们将详细说明如何创建一个简单的聊天应用程序，演示如何使用 .NET Core SignalR 后端和 Vue3 前端来实现实时通讯功能。

通过.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 项目：

dotnet new web -n SignalRChatApp
cd SignalRChatApp

在项目中添加 SignalR 包：

dotnet add package Microsoft.AspNetCore.SignalR

打开 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");
            });
        }
    }
}

创建一个名为 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 后端。

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

vue create vue-signalr-chat

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

安装 SignalR 客户端库：

npm install @microsoft/signalr

创建一个 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>

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

<template>
  <div class="home">
    <img src="https://www.51cto.com/assets/logo.png" />
    <Chat />
  </div>
</template>

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

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