本地正常线上WebSocket报错：无法解析[object Blob]为JSON

问题根源 #

本地运行正常但线上报错，核心原因是线上环境中WebSocket收到的message.data是Blob对象，而非预期的字符串，直接用JSON.parse解析Blob就会抛出这个语法错误。这种差异通常来自线上代理（如Nginx）的配置、浏览器环境的差异，或者服务端发送数据时的类型不一致。

客户端修复方案 #

修改gotMessageFromServer函数，先判断数据类型，若为Blob则先读取为字符串再解析：

function gotMessageFromServer(message) {
    // 处理Blob类型数据
    if (message.data instanceof Blob) {
        const reader = new FileReader();
        reader.onload = function() {
            const signal = JSON.parse(reader.result);
            // 这里放你原来处理signal的逻辑
            processSignal(signal);
        };
        reader.readAsText(message.data);
    } else {
        // 原有字符串类型处理逻辑
        const signal = JSON.parse(message.data);
        processSignal(signal);
    }
}

// 抽离重复的处理逻辑，避免代码冗余
function processSignal(signal) {
    // ... 你原来的业务代码
}

服务端兜底验证 #

虽然你发送的是JSON字符串，但可以在服务端广播时确保数据是字符串类型，避免意外的Buffer/Blob被发送：

wss.broadcast = function (data) {
    // 强制转换为字符串，防止非字符串类型被发送
    const sendData = typeof data === 'string' ? data : JSON.stringify(data);
    this.clients.forEach(function (client) {
        if (client.readyState === WebSocket.OPEN) {
            client.send(sendData);
        }
    });
};

验证步骤 #

如果想确认问题类型，可以先在客户端打印数据类型：

function gotMessageFromServer(message) {
    console.log('数据类型:', typeof message.data, '是否为Blob:', message.data instanceof Blob);
    // ... 后续处理
}

内容的提问来源于stack exchange，提问作者Dev Chauhan