.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 來構建更複雜的實時應用程式，如實時通知、線上游戲和協同編輯等。