.NET 8 API 实现websocket，并在前端angular实现调用。
后端：.NET 8 WebSocket API 实现
在 .NET 8 中，可以通过 Microsoft.AspNetCore.WebSockets 提供的支持来实现 WebSocket 功能。以下是创建一个简单的 WebSocket 控制器的步骤。
安装必要的 NuGet 包
需要确保项目已启用 WebSocket 支持。如果尚未配置，请在项目的依赖项中添加以下包：
Bash
dotnet add package Microsoft.AspNetCore.WebSockets配置中间件支持 WebSocket
在 Program.cs 文件中注册并启用 WebSocket 中间件：
C#
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 连接和消息传递。
TypeScript
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 并收发消息。
TypeScript
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'); // 替换为实际的 URL
this.wsService.getMessages().subscribe((msg) => {
this.messages.push(msg);
});
}
ngOnDestroy(): void {
this.wsService.close();
}
sendMessage(): void {
this.wsService.sendMessage('Hello from client!');
}
}以上代码展示了如何启动 WebSocket 连接，在按钮点击时向服务器发送消息，并实时更新页面显示收到的消息列表7。
数据流说明
整个流程涉及以下几个部分的数据流动：
客户端发起 WebSocket 请求至指定终结点。
服务器接受请求并建立双向通信通道。
双方可通过此通道自由交换 JSON 字符串或其他二进制数据形式的信息8。