首頁(yè) 猿問(wèn) 如何在服務(wù)器端發(fā)送和接收WebSo...

如何在服務(wù)器端發(fā)送和接收WebSocket消息？

源碼算法與數(shù)據(jù)結(jié)構(gòu)

呼如林 2019-07-01 16:25:34

如何在服務(wù)器端發(fā)送和接收WebSocket消息？如何按照協(xié)議使用WebSocket在服務(wù)器端發(fā)送和接收消息？為什么當(dāng)我從瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)時(shí)，在服務(wù)器上得到看似隨機(jī)的字節(jié)？它是以某種方式編碼的數(shù)據(jù)嗎？在服務(wù)器→客戶端和客戶端→服務(wù)器方向中，框架是如何工作的？

查看完整描述

3 回答

一只名叫tom的貓

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊

JavaScript實(shí)現(xiàn)：

function encodeWebSocket(bytesRaw){
    var bytesFormatted = new Array();
    bytesFormatted[0] = 129;
    if (bytesRaw.length <= 125) {
        bytesFormatted[1] = bytesRaw.length;
    } else if (bytesRaw.length >= 126 && bytesRaw.length <= 65535) {
        bytesFormatted[1] = 126;
        bytesFormatted[2] = ( bytesRaw.length >> 8 ) & 255;
        bytesFormatted[3] = ( bytesRaw.length      ) & 255;
    } else {
        bytesFormatted[1] = 127;
        bytesFormatted[2] = ( bytesRaw.length >> 56 ) & 255;
        bytesFormatted[3] = ( bytesRaw.length >> 48 ) & 255;
        bytesFormatted[4] = ( bytesRaw.length >> 40 ) & 255;
        bytesFormatted[5] = ( bytesRaw.length >> 32 ) & 255;
        bytesFormatted[6] = ( bytesRaw.length >> 24 ) & 255;
        bytesFormatted[7] = ( bytesRaw.length >> 16 ) & 255;
        bytesFormatted[8] = ( bytesRaw.length >>  8 ) & 255;
        bytesFormatted[9] = ( bytesRaw.length       ) & 255;
    }
    for (var i = 0; i < bytesRaw.length; i++){
        bytesFormatted.push(bytesRaw.charCodeAt(i));
    }
    return bytesFormatted;
}

function decodeWebSocket (data){
    var datalength = data[1] & 127;
    var indexFirstMask = 2;
    if (datalength == 126) {
        indexFirstMask = 4;
    } else if (datalength == 127) {
        indexFirstMask = 10;
    }
    var masks = data.slice(indexFirstMask,indexFirstMask + 4);
    var i = indexFirstMask + 4;
    var index = 0;
    var output = "";
    while (i < data.length) {
        output += String.fromCharCode(data[i++] ^ masks[index++ % 4]);
    }
    return output;
}

反對(duì) 回復(fù) 2019-07-01

慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

發(fā)送消息

(換句話說(shuō)，服務(wù)器→瀏覽器)

您要發(fā)送的幀需要根據(jù)WebSocket框架格式進(jìn)行格式化。對(duì)于發(fā)送消息，此格式如下：

包含數(shù)據(jù)類型的一個(gè)字節(jié)(以及一些超出普通服務(wù)器范圍的附加信息)
包含長(zhǎng)度的字節(jié)
如果長(zhǎng)度不適合于第二個(gè)字節(jié)，則為兩個(gè)或八個(gè)字節(jié)(然后，第二個(gè)字節(jié)是表示長(zhǎng)度使用多少字節(jié)的代碼)。
實(shí)際(原始)數(shù)據(jù)

第一個(gè)字節(jié)是1000 0001(或129)用于文本幀。

第二個(gè)字節(jié)的第一個(gè)位設(shè)置為0因?yàn)槲覀儧](méi)有對(duì)數(shù)據(jù)進(jìn)行編碼(從服務(wù)器到客戶端的編碼不是強(qiáng)制性的)。

有必要確定原始數(shù)據(jù)的長(zhǎng)度，以便正確地發(fā)送長(zhǎng)度字節(jié)：

如果
0 <= length <= 125
，您不需要額外的字節(jié)
如果
126 <= length <= 65535
，您需要另外兩個(gè)字節(jié)，第二個(gè)字節(jié)是
126
如果
length >= 65536
，您需要額外的8個(gè)字節(jié)，第二個(gè)字節(jié)是
127

長(zhǎng)度必須被分割成單獨(dú)的字節(jié)，這意味著您需要將位移到右邊(數(shù)量為8位)，然后只保留最后的8位。AND 1111 1111(這是255).

在長(zhǎng)度字節(jié)之后是原始數(shù)據(jù)。

這將導(dǎo)致以下偽代碼：

bytesFormatted[0] = 129

indexStartRawData = -1 // it doesn't matter what value is
                       // set here - it will be set now:

if bytesRaw.length <= 125
    bytesFormatted[1] = bytesRaw.length

    indexStartRawData = 2

else if bytesRaw.length >= 126 and bytesRaw.length <= 65535
    bytesFormatted[1] = 126
    bytesFormatted[2] = ( bytesRaw.length >> 8 ) AND 255
    bytesFormatted[3] = ( bytesRaw.length      ) AND 255

    indexStartRawData = 4

else
    bytesFormatted[1] = 127
    bytesFormatted[2] = ( bytesRaw.length >> 56 ) AND 255
    bytesFormatted[3] = ( bytesRaw.length >> 48 ) AND 255
    bytesFormatted[4] = ( bytesRaw.length >> 40 ) AND 255
    bytesFormatted[5] = ( bytesRaw.length >> 32 ) AND 255
    bytesFormatted[6] = ( bytesRaw.length >> 24 ) AND 255
    bytesFormatted[7] = ( bytesRaw.length >> 16 ) AND 255
    bytesFormatted[8] = ( bytesRaw.length >>  8 ) AND 255
    bytesFormatted[9] = ( bytesRaw.length       ) AND 255

    indexStartRawData = 10

// put raw data at the correct index
bytesFormatted.put(bytesRaw, indexStartRawData)


// now send bytesFormatted (e.g. write it to the socket stream)

接收訊息

(換句話說(shuō)，瀏覽器→服務(wù)器)

您獲得的幀格式如下：

包含數(shù)據(jù)類型的一個(gè)字節(jié)。
包含長(zhǎng)度的字節(jié)
如果長(zhǎng)度不適合第二個(gè)字節(jié)，則增加兩個(gè)或八個(gè)字節(jié)。
四個(gè)字節(jié)，它們是掩碼(=解碼鍵)
實(shí)際數(shù)據(jù)

第一個(gè)字節(jié)通常并不重要-如果您只是發(fā)送文本，則只使用文本類型。它將是1000 0001(或129)在這種情況下。

第二個(gè)字節(jié)和額外的兩個(gè)或八個(gè)字節(jié)需要一些解析，因?yàn)槟枰篱L(zhǎng)度使用了多少字節(jié)(您需要知道實(shí)際數(shù)據(jù)的起始位置)。長(zhǎng)度本身通常是不必要的，因?yàn)槟呀?jīng)有了數(shù)據(jù)。

第二個(gè)字節(jié)的第一個(gè)位總是1這意味著數(shù)據(jù)被蒙住了(=編碼)。從客戶端到服務(wù)器的消息總是被屏蔽。你需要?jiǎng)h除第一位secondByte AND 0111 1111..有兩種情況下，結(jié)果字節(jié)不表示長(zhǎng)度，因?yàn)樗贿m合于第二個(gè)字節(jié)：

第二個(gè)字節(jié)
0111 1110
，或
126
，表示長(zhǎng)度使用以下兩個(gè)字節(jié)
第二個(gè)字節(jié)
0111 1111
，或
127
，表示長(zhǎng)度使用以下八個(gè)字節(jié)

這四個(gè)掩碼字節(jié)用于解碼已發(fā)送的實(shí)際數(shù)據(jù)。解碼算法如下：

decodedByte = encodedByte XOR masks[encodedByteIndex MOD 4]

哪里encodedByte是數(shù)據(jù)中的原始字節(jié)，encodedByteIndex是從第一個(gè)字節(jié)計(jì)數(shù)的字節(jié)的索引(偏移)。真實(shí)數(shù)據(jù)，其中有索引0. masks包含四個(gè)掩碼字節(jié)的數(shù)組。

這導(dǎo)致了用于解碼的下列偽碼：

secondByte = bytes[1]

length = secondByte AND 127 // may not be the actual length in the two special cases

indexFirstMask = 2          // if not a special case

if length == 126            // if a special case, change indexFirstMask
    indexFirstMask = 4

else if length == 127       // ditto
    indexFirstMask = 10

masks = bytes.slice(indexFirstMask, 4) // four bytes starting from indexFirstMask

indexFirstDataByte = indexFirstMask + 4 // four bytes further

decoded = new array

decoded.length = bytes.length - indexFirstDataByte // length of real data

for i = indexFirstDataByte, j = 0; i < bytes.length; i++, j++
    decoded[j] = bytes[i] XOR masks[j MOD 4]


// now use "decoded" to interpret the received data

反對(duì) 回復(fù) 2019-07-01