当前位置：首页 > news >正文

.NET 8 API 实现websocket，并在前端angular实现调用

news 来源：原创 2025/5/13 7:12:53

.NET 8 API 实现websocket，并在前端angular实现调用。

后端：.NET 8 WebSocket API 实现

在 .NET 8 中，可以通过 Microsoft.AspNetCore.WebSockets 提供的支持来实现 WebSocket 功能。以下是创建一个简单的 WebSocket 控制器的步骤。

安装必要的 NuGet 包
需要确保项目已启用 WebSocket 支持。如果尚未配置，请在项目的依赖项中添加以下包：

dotnet add package Microsoft.AspNetCore.WebSockets

配置中间件支持 WebSocket
在 Program.cs 文件中注册并启用 WebSocket 中间件：

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;var builder = WebApplication.CreateBuilder(args);// 添加服务到容器
builder.Services.AddHttpContextAccessor();
builder.Services.AddControllers();var app = builder.Build();app.Use(async (context, next) =>
{if (context.Request.Path == "/ws") // 设置 WebSocket 终结点路径{if (context.WebSockets.IsWebSocketRequest){using var webSocket = await context.WebSockets.AcceptWebSocketAsync();await HandleWebSocketConnection(webSocket);}else{context.Response.StatusCode = StatusCodes.Status400BadRequest;}}else{await next(context);}
});app.MapControllers();
app.Run();static async Task HandleWebSocketConnection(System.Net.WebSockets.WebSocket socket)
{var buffer = new byte[1024 * 4];WebSocketReceiveResult result = await socket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);while (!result.CloseStatus.HasValue){Console.WriteLine($"Received message: {System.Text.Encoding.UTF8.GetString(buffer)}");await socket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None);result = await socket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);}await socket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}

上述代码实现了基本的 WebSocket 连接逻辑5。它监听 /ws 路径上的请求，并允许客户端通过 WebSocket 协议与其交互。

前端：Angular WebSocket 服务实现

为了在前端调用后端的 WebSocket 接口，可以基于前面提到的 Angular WebSocket 服务模板进行扩展。

创建 WebSocket 服务
创建一个新的服务文件 websocket.service.ts，用于管理 WebSocket 连接和消息传递。

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';@Injectable({providedIn: 'root'
})
export class WebsocketService {private socket: WebSocket | null = null;private subject$: Subject<string> = new Subject<string>();constructor() {}public connect(url: string): void {this.socket?.close();this.subject$ = new Subject<string>();this.socket = new WebSocket(url);this.socket.onopen = () => {console.log('WebSocket connection established');};this.socket.onerror = (error) => {console.error('WebSocket error:', error);};this.socket.onmessage = (event) => {this.subject$.next(event.data);};this.socket.onclose = () => {console.warn('WebSocket connection closed');this.subject$.complete();};}public sendMessage(message: string): void {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send(message);}}public getMessages(): Observable<string> {return this.subject$.asObservable();}public close(): void {if (this.socket) {this.socket.close();}}
}

此服务提供了连接、发送消息以及接收消息的功能6。

组件中使用 WebSocket 服务
下面是一个简单示例，展示如何在 Angular 组件中初始化 WebSocket 并收发消息。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebsocketService } from './websocket.service';@Component({selector: 'app-root',template: `<h1>WebSocket Example</h1><button (click)="sendMessage()">Send Message</button><ul><li *ngFor="let msg of messages">{{msg}}</li></ul>`,styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {messages: string[] = [];constructor(private wsService: WebsocketService) {}ngOnInit(): void {this.wsService.connect('ws://localhost:5000/ws'); // 替换为实际的 URLthis.wsService.getMessages().subscribe((msg) => {this.messages.push(msg);});}ngOnDestroy(): void {this.wsService.close();}sendMessage(): void {this.wsService.sendMessage('Hello from client!');}
}

以上代码展示了如何启动 WebSocket 连接，在按钮点击时向服务器发送消息，并实时更新页面显示收到的消息列表7。