通过.NET Core+Vue3 实现SignalR即时通讯功能-51CTO.COM

.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 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：运行应用程序

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

dotnet run

启动 Vue3 前端应用程序：

npm run serve

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

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

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