C#中間件與前端框架的WebSocket通信

在C#中，可以使用ASP.NET Core來創建一個支持WebSocket通信的中間件。ASP.NET Core是一個跨平臺的開源框架，用于構建現代化的云優化Web應用程序。它提供了一個簡單的方式來處理WebSocket連接和消息。

要在C#中間件中實現WebSocket通信，首先需要安裝Microsoft.AspNetCore.WebSockets包。然后，可以創建一個中間件來處理WebSocket請求。以下是一個簡單的示例：

using System;
using System.Net.WebSockets;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;

public class WebSocketMiddleware
{
    private readonly RequestDelegate _next;

    public WebSocketMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            using var webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await HandleWebSocketConnection(webSocket);
        }
        else
        {
            await _next(context);
        }
    }

    private async Task HandleWebSocketConnection(WebSocket webSocket)
    {
        var buffer = new byte[1024 * 4];
        var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);

        while (!result.CloseStatus.HasValue)
        {
            // Process the received message
            var message = System.Text.Encoding.UTF8.GetString(buffer, 0, result.Count);
            Console.WriteLine($"Received message: {message}");

            // Send a response to the client
            var response = "Message received";
            var responseBytes = System.Text.Encoding.UTF8.GetBytes(response);
            await webSocket.SendAsync(new ArraySegment<byte>(responseBytes), WebSocketMessageType.Text, true, CancellationToken.None);

            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }
}

要在前端框架（如React、Angular或Vue）中與此中間件進行WebSocket通信，可以使用瀏覽器內置的WebSocket API。以下是一個簡單的JavaScript示例，展示了如何連接到WebSocket服務器并發送/接收消息：

const socket = new WebSocket('ws://localhost:5000/ws');

socket.addEventListener('open', (event) => {
  console.log('WebSocket connection opened:', event);

  // Send a message to the server
  socket.send('Hello, server!');
});

socket.addEventListener('message', (event) => {
  console.log('Message from server:', event.data);
});

socket.addEventListener('close', (event) => {
  console.log('WebSocket connection closed:', event);
});

socket.addEventListener('error', (event) => {
  console.error('WebSocket error:', event);
});

這個示例中的WebSocket URL（‘ws://localhost:5000/ws’）需要根據你的ASP.NET Core應用程序的實際地址進行修改。在實際應用中，你可能還需要處理重新連接、心跳檢測等高級功能。