为Vue3即时通讯系统实现ASP.NET Core 8后端Socket.IO协议

一、成熟的.NET Core Socket.IO服务器实现 #

直接采用第三方兼容库实现完整的Socket.IO协议支持，以下是两种可靠方案：

1. Socket.IO.NET 官方兼容库 #

使用适配.NET平台的Socket.IO官方兼容包，完美匹配v4+版本：

• 安装NuGet包：Install-Package Socket.IO.NET -Version 4.8.0（与前端4.8.1版本对齐）
• 配置ASP.NET Core中间件：

using SocketIO;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSocketIO();

var app = builder.Build();

app.UseSocketIO();

app.MapSocketIO("/socket.io", (socket) => {
    socket.On("connect", () => {
        Console.WriteLine("客户端已连接");
        socket.Emit("welcome", "Hello from .NET Server!");
    });

    // 处理自定义消息事件
    socket.On("message", (data) => {
        Console.WriteLine($"收到消息：{data}");
        socket.Broadcast.Emit("message", data); // 广播消息至其他客户端
    });
});

app.Run("http://localhost:5000");

• 前端原有连接代码无需修改，IO.Socket("http://localhost:5000")可直接正常连接，解决400错误。

2. SignalR 协议桥接方案（备选） #

若不想引入Socket.IO专属库，可通过SignalR做协议转换中间层：

• 搭建ASP.NET Core SignalR服务器：

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();

var app = builder.Build();

app.MapHub<ChatHub>("/chatHub");

app.Run("http://localhost:5000");

• 前端安装适配器并修改连接逻辑：

import { io } from 'socket.io-client';
import { SignalR } from 'socket.io-signalr';

const socket = io("http://localhost:5000", {
    transports: [new SignalR()]
});

socket.on('connect', () => {
    console.log('Connected');
});

该方案通过适配器将Socket.IO请求转换为SignalR协议，实现前后端兼容。

二、错误原因说明 #

出现HTTP 400 (Bad Request)是因为ASP.NET Core原生无法识别Socket.IO的握手协议——Socket.IO握手请求包含EIO、transport等特定查询参数，原生ASP.NET Core无对应处理逻辑，因此返回400错误。

内容的提问来源于stack exchange，提问作者asj payiz