Vue3 與 C# WebSocket 實(shí)戰(zhàn)：輕松搭建實(shí)時(shí)通訊應(yīng)用
嘿，各位前端和后端的小伙伴們！今天咱們來聊聊 Vue3 和 C# 如何攜手合作，通過 WebSocket 實(shí)現(xiàn)實(shí)時(shí)通訊。想象一下，你的網(wǎng)頁(yè)能夠即時(shí)響應(yīng)服務(wù)器的數(shù)據(jù)變化，是不是超級(jí)酷？別擔(dān)心，即使你是 WebSocket 的新手，我也會(huì)用最簡(jiǎn)單、最口語化的方式，帶你一步步實(shí)現(xiàn)這個(gè)功能。
一、WebSocket 簡(jiǎn)介
首先，咱們得了解一下 WebSocket 是什么。WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。它使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單，減少了不必要的網(wǎng)絡(luò)請(qǐng)求和延遲。簡(jiǎn)單來說，就是客戶端和服務(wù)器可以互相“推”數(shù)據(jù)，而不僅僅是客戶端“拉”數(shù)據(jù)。
二、Vue3 前端準(zhǔn)備
咱們先來看看 Vue3 前端部分怎么實(shí)現(xiàn)。
(1) 創(chuàng)建 Vue3
項(xiàng)目如果你還沒有 Vue3 項(xiàng)目，可以用 Vue CLI 快速創(chuàng)建一個(gè)：
npm install -g @vue/cli
vue create my-websocket-app
cd my-websocket-app
npm run serve
(2) 安裝 WebSocket 客戶端庫(kù)（可選）
雖然 Vue3 本身不直接提供 WebSocket 支持，但你可以使用原生的 WebSocket API，或者安裝一個(gè)更高級(jí)的庫(kù)，比如 reconnecting-websocket。不過，為了簡(jiǎn)單起見，咱們先用原生的。
(3) 實(shí)現(xiàn) WebSocket 連接
在 Vue3 組件中，你可以這樣實(shí)現(xiàn) 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 連接已打開');
// 可以發(fā)送消息給服務(wù)器
this.socket.send('Hello, Server!');
};
// 處理接收消息事件
this.socket.onmessage = (event) => {
const message = JSON.parse(event.data);
this.messages.push(message);
};
// 處理連接關(guān)閉事件
this.socket.onclose = () => {
console.log('WebSocket 連接已關(guān)閉');
};
// 處理連接錯(cuò)誤事件
this.socket.onerror = (error) => {
console.error('WebSocket 錯(cuò)誤:', error);
};
},
beforeUnmount() {
// 組件銷毀前關(guān)閉 WebSocket 連接
if (this.socket) {
this.socket.close();
}
}
};
</script>三、C# 后端準(zhǔn)備
接下來，咱們來看看 C# 后端部分怎么實(shí)現(xiàn)。
(1) 創(chuàng)建 ASP.NET Core 項(xiàng)目
如果你還沒有 ASP.NET Core 項(xiàng)目，可以用 .NET CLI 快速創(chuàng)建一個(gè)：
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) 實(shí)現(xiàn) WebSocket 處理器
創(chuàng)建一個(gè)新的類WebSocketHandler來處理 WebSocket 請(qǐng)求：
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}");
// 發(fā)送響應(yīng)消息給客戶端
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 來序列化對(duì)象，所以你需要安裝 Newtonsoft.Json 包：
dotnet add package Newtonsoft.Json四、運(yùn)行測(cè)試
現(xiàn)在，你已經(jīng)完成了前端和后端的代碼。接下來，咱們來運(yùn)行一下，看看效果。
(1) 運(yùn)行后端
首先，運(yùn)行你的 ASP.NET Core 項(xiàng)目：
dotnet run(2) 運(yùn)行前端
然后，運(yùn)行你的 Vue3 項(xiàng)目：
npm run serve(3) 觀察結(jié)果
打開瀏覽器，訪問你的 Vue3 應(yīng)用。你應(yīng)該能看到頁(yè)面上顯示從服務(wù)器接收到的消息。同時(shí)，你可以在控制臺(tái)中看到 WebSocket 連接的狀態(tài)和消息傳遞的日志。
五、總結(jié)
通過以上的步驟，你已經(jīng)成功實(shí)現(xiàn)了 Vue3 和 C# WebSocket 的實(shí)時(shí)通訊。前端 Vue3 組件通過 WebSocket 與后端 ASP.NET Core 服務(wù)器進(jìn)行通信，實(shí)時(shí)接收和顯示服務(wù)器的消息。
這只是一個(gè)基本的實(shí)現(xiàn)，你可以在此基礎(chǔ)上進(jìn)行擴(kuò)展和優(yōu)化，比如增加消息類型處理、用戶身份驗(yàn)證、錯(cuò)誤處理等。希望這篇文章對(duì)你有所幫助，祝你開發(fā)愉快！
