SignalR发送Base64/Byte[]时调用SendMessage出现服务器关闭错误

问题场景 #

调用SignalR的SendMessage方法发送Base64格式数据时，服务器意外关闭并报错。

前端代码 #

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("username").textContent;
    var message = document.getElementById("messageInput").value;
    var fileInput = document.getElementById("file").value;

    var fileParam = fileInput ? fileInput : null;

    if (message || fileParam) {
        connection.invoke("SendMessage", user, message, fileParam ).catch(function (err) {
            console.error(err.toString());
        });
    }
    
    document.getElementById("messageInput").value = "";
    fileInput.value = ""; // 此处存在逻辑错误
});

document.getElementById("attachments").addEventListener("change", function (event) {
    var file = event.target.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {
        var base64String = e.target.result.split(",")[1];
        document.getElementById("file").value = base64String;
    };

    reader.readAsDataURL(file); 
    readAsDataURL // 冗余无效代码
});

Hub后端代码 #

using Microsoft.AspNetCore.SignalR;
namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message, string file)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message, file);
        }
    }
}

问题排查与解决步骤 #

1. 修复前端代码中的基础错误 #

• 修正文件输入框清空逻辑：原代码中fileInput是字符串值而非DOM元素，需改为document.getElementById("file").value = "";
• 删除冗余代码：移除文件读取事件中无效的readAsDataURL行

2. 调整SignalR消息大小限制 #

Base64编码后数据体积会比原文件大33%，若文件超出SignalR默认消息大小限制，会导致服务器断开连接。在Program.cs中修改配置：

builder.Services.AddSignalR(options =>
{
    // 设置最大接收消息大小为10MB（单位：字节），可按需调整
    options.MaximumReceiveMessageSize = 10 * 1024 * 1024;
});

3. 优化数据传输方式（可选） #

大文件用Base64传输会增加带宽消耗，建议改用二进制传输：

• 前端修改文件读取方式：

document.getElementById("attachments").addEventListener("change", function (event) {
    var file = event.target.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {
        document.getElementById("file").value = new Uint8Array(e.target.result);
    };

    reader.readAsArrayBuffer(file); 
});

• 后端修改Hub方法参数类型：

public async Task SendMessage(string user, string message, byte[] file)
{
    await Clients.All.SendAsync("ReceiveMessage", user, message, file);
}

4. 捕获详细错误信息 #

在前端catch块中打印完整错误栈，便于定位问题：

connection.invoke("SendMessage", user, message, fileParam )
.catch(function (err) {
    console.error("错误详情:", err);
    console.error("错误栈:", err.stack);
});

内容的提问来源于stack exchange，提问作者ELANGOVAN D