标题更新：[Nodejs用Node实现WebSocket协议] - 原：[WebSocket在高并发和大数据情况下的传输问题]

标题更新：Nodejs用Node实现WebSocket协议

下面是之前遇到的问题：

上周在班里做了关于WebSocket协议的技术分享，因为当时演示的是小数据、间歇性数据发送。所以很成功，并没有遇到啥问题。

不过回去之后发现用一个10000次的循环不断向服务器发送数据时，不论数据的大小，后几千次的数据都变成了乱码:

for (i = 0; i < 10000; i++) ws.send('a');

另外一个问题是，当我发送了一次长度为65535 byte的数据（也就是Payload_len = 126, Payload length = Math.pow(2, 16) - 1），服务器却得到了两次的数据请求：

• 第一次是FIN = 1, Opcode = 0, Payload length为65535的Frame;
• 第二次是FIN = 1, Opcode为随机, MASK也是随机的， Payload length还是随机。。。

可是经过查看发现第一次数据的实际长度往往是Payload length值的一半左右，第二次的数据全是乱码。

下面是WebSocket握手结束后数据解码部分的代码：

function decodeFrame(frame) {
    var counter = 0;

    var fin_offset = 7,
        opcode_offset = parseInt('1111', 2),
        mask_offset = 7,
        payload_len_offset = parseInt('1111111', 2);

    var FIN = frame[counter] >> fin_offset,
        Opcode = frame[counter++] & opcode_offset,
        MASK = frame[counter] >> mask_offset,
        Payload_len = frame[counter++] & payload_len_offset;

    if (Payload_len === 126) { 
        Payload_len = frame.readUInt16BE(counter);
        counter += 2;
    }

    if (Payload_len === 127) { 
        Payload_len = frame.readUInt32BE(counter + 4);
        counter += 8;
    }

    var Payload_data = [];

    if (MASK) {
        var Masking_key = frame.slice(counter, counter + 4);

        counter += 4;

        for (var i = 0; i < Payload_len; i++) {
            var j = i % 4;
            frame[counter + i] ^= Masking_key[j];
        }
    }
    
    // 返回解码后的数据
    return {
        FIN: FIN,
        Opcode: Opcode,
        MASK: MASK,
        Payload_len: Payload_len,
        Payload_data: frame.slice(counter, counter + Payload_len)
    };
}

解决方案

在上述代码中，问题主要出在Payload_data的切片上。由于counter的计算错误，导致了数据的不正确切片。以下是修正后的代码：

function decodeFrame(frame) {
    var counter = 0;

    var fin_offset = 7,
        opcode_offset = parseInt('1111', 2),
        mask_offset = 7,
        payload_len_offset = parseInt('1111111', 2);

    var FIN = frame[counter] >> fin_offset,
        Opcode = frame[counter++] & opcode_offset,
        MASK = frame[counter] >> mask_offset,
        Payload_len = frame[counter++] & payload_len_offset;

    if (Payload_len === 126) { 
        Payload_len = frame.readUInt16BE(counter);
        counter += 2;
    }

    if (Payload_len === 127) { 
        Payload_len = frame.readUInt32BE(counter + 4);
        counter += 8;
    }

    var Payload_data = [];

    if (MASK) {
        var Masking_key = frame.slice(counter, counter + 4);

        counter += 4;

        for (var i = 0; i < Payload_len; i++) {
            var j = i % 4;
            frame[counter + i] ^= Masking_key[j];
        }
    }
    
    // 修正后的Payload_data切片
    return {
        FIN: FIN,
        Opcode: Opcode,
        MASK: MASK,
        Payload_len: Payload_len,
        Payload_data: frame.slice(counter, counter + Payload_len)
    };
}

总结

通过上述代码的调整，我们解决了WebSocket数据传输中的乱码问题。WebSocket协议有许多细节需要注意，尤其是在处理大数据传输时。如果还有其他问题，可以参考我的GitHub仓库：WebSocket 实现。