Vue3 與 C# WebSocket 實戰：輕松搭建實時通訊應用
嘿，各位前端和后端的小伙伴們！今天咱們來聊聊 Vue3 和 C# 如何攜手合作，通過 WebSocket 實現實時通訊。想象一下，你的網頁能夠即時響應服務器的數據變化，是不是超級酷？別擔心，即使你是 WebSocket 的新手，我也會用最簡單、最口語化的方式，帶你一步步實現這個功能。
一、WebSocket 簡介
首先，咱們得了解一下 WebSocket 是什么。WebSocket 是一種在單個 TCP 連接上進行全雙工通訊的協議。它使得客戶端和服務器之間的數據交換變得更加簡單，減少了不必要的網絡請求和延遲。簡單來說，就是客戶端和服務器可以互相“推”數據，而不僅僅是客戶端“拉”數據。
二、Vue3 前端準備
咱們先來看看 Vue3 前端部分怎么實現。
(1) 創建 Vue3
項目如果你還沒有 Vue3 項目，可以用 Vue CLI 快速創建一個：
npm install -g @vue/cli
vue create my-websocket-app
cd my-websocket-app
npm run serve
(2) 安裝 WebSocket 客戶端庫（可選）
雖然 Vue3 本身不直接提供 WebSocket 支持，但你可以使用原生的 WebSocket API，或者安裝一個更高級的庫，比如 reconnecting-websocket。不過，為了簡單起見，咱們先用原生的。
(3) 實現 WebSocket 連接
在 Vue3 組件中，你可以這樣實現 WebSocket 連接：
<template>
<div>
<h1>WebSocket Demo</h1>
<div v-for="message in messages" :key="message.id">
{{ message.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
socket: null,
messages: []
};
},
mounted() {
// 建立 WebSocket 連接
this.socket = new WebSocket('ws://localhost:5000');
// 處理連接打開事件
this.socket.onopen = () => {
console.log('WebSocket 連接已打開');
// 可以發送消息給服務器
this.socket.send('Hello, Server!');
};
// 處理接收消息事件
this.socket.onmessage = (event) => {
const message = JSON.parse(event.data);
this.messages.push(message);
};
// 處理連接關閉事件
this.socket.onclose = () => {
console.log('WebSocket 連接已關閉');
};
// 處理連接錯誤事件
this.socket.onerror = (error) => {
console.error('WebSocket 錯誤:', error);
};
},
beforeUnmount() {
// 組件銷毀前關閉 WebSocket 連接
if (this.socket) {
this.socket.close();
}
}
};
</script>三、C# 后端準備
接下來，咱們來看看 C# 后端部分怎么實現。
(1) 創建 ASP.NET Core 項目
如果你還沒有 ASP.NET Core 項目，可以用 .NET CLI 快速創建一個：
dotnet new web -n MyWebSocketApp
cd MyWebSocketApp
dotnet run(2) 配置 WebSocket 中間件
在Startup.cs文件中，配置 WebSocket 中間件：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/", async context =>
{
await context.Response.WriteAsync("Hello, World!");
});
// 配置 WebSocket 路由
endpoints.MapWebSockets("/ws", new WebSocketHandler());
});
}(3) 實現 WebSocket 處理器
創建一個新的類WebSocketHandler來處理 WebSocket 請求：
using Microsoft.AspNetCore.WebSockets;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
public class WebSocketHandler
{
public async Task InvokeAsync(HttpContext context, WebSocket webSocket)
{
if (webSocket.State == WebSocketState.Open)
{
// 接收客戶端消息
var buffer = new byte[1024 * 4];
WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
while (!result.CloseStatus.HasValue)
{
var message = Encoding.UTF8.GetString(buffer, 0, result.Count);
Console.WriteLine($"收到消息: {message}");
// 發送響應消息給客戶端
var response = new { Content = "Hello, Client!", Id = DateTime.Now.Ticks };
var responseBytes = Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(response));
await webSocket.SendAsync(new ArraySegment<byte>(responseBytes), result.MessageType, result.EndOfMessage, CancellationToken.None);
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
}
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}
}
}注意：這里用到了 JsonConvert.SerializeObject 來序列化對象，所以你需要安裝 Newtonsoft.Json 包：
dotnet add package Newtonsoft.Json四、運行測試
現在，你已經完成了前端和后端的代碼。接下來，咱們來運行一下，看看效果。
(1) 運行后端
首先，運行你的 ASP.NET Core 項目：
dotnet run(2) 運行前端
然后，運行你的 Vue3 項目：
npm run serve(3) 觀察結果
打開瀏覽器，訪問你的 Vue3 應用。你應該能看到頁面上顯示從服務器接收到的消息。同時，你可以在控制臺中看到 WebSocket 連接的狀態和消息傳遞的日志。
五、總結
通過以上的步驟，你已經成功實現了 Vue3 和 C# WebSocket 的實時通訊。前端 Vue3 組件通過 WebSocket 與后端 ASP.NET Core 服務器進行通信，實時接收和顯示服務器的消息。
這只是一個基本的實現，你可以在此基礎上進行擴展和優化，比如增加消息類型處理、用戶身份驗證、錯誤處理等。希望這篇文章對你有所幫助，祝你開發愉快！
