CODEWITHSUNDEEP
node.jswebsocket
user1873073
user1873073

Reputation: 3670

How do you process a basic Websocket frame

I am writing my own implementation for web sockets instead of socket.io and the like.

I have a good handshake but when the client sends to the server I can't figure out how to turn that data into anything useful. Is it an object? Is it a string? Docs say it is an array of raw memory locations outside the V8 heap. ...?

enter image description here

FUNCTIONING EXAMPLE (client is hard coded string)

var http = require("http");
var crypto = require("crypto");
var server = http.createServer();
server.on("upgrade", function (req, socket, upgradeHead) {
    var crypto = require("crypto");
    var shasum = crypto.createHash("sha1");
    shasum.update(req.headers["sec-websocket-key"]);
    shasum.update("258EAFA5-E914-47DA-95CA-C5AB0DC85B11");
    var hash = shasum.digest("hex");
    var myVal = new Buffer(hash, "hex").toString('base64');

    var head = "";
    head += "HTTP/1.1 101 Switching Protocols\r\n";
    head += "Connection: Upgrade\r\n";
    head += "Upgrade: WebSocket\r\n";
    head += "Sec-WebSocket-Accept: " + myVal + "\r\n\r\n";

    socket.setEncoding("utf8");
    socket.write(head);

    socket.ondata = function (data, start, end) {
        var data = data.toString("utf8", start, end);
        console.log(" start: " + start + "\n end: " + end + "\n data: " + data);
    };
});
server.on("request", function (req, res) {
    if (req.url === "/e")
        process.exit();
    if (req.url.indexOf("favicon") !== -1)
        return;

    var html = "\
                <!DOCTYPE html>\r\n\
                <html>\r\n\
                    <head>\r\n\
                        <script>\r\n\
                            var connection = new WebSocket('ws:localhost:80');\r\n\
                            connection.onopen = function () {\r\n\
                                console.log('OPEN SUCCESS');\r\n\
                                connection.send('I am a message from the client.');\r\n\
                            };\
                            connection.onmessage = function(msg) {\r\n\
                                console.log(msg);\r\n\
                            }\r\n\
                            connection.onerror = function (e) { console.log('ERROR'); console.log(e); };\r\n\
                            connection.onclose = function (e) { console.log('CLOSE'); console.log(e);};\r\n\
                        </script>\r\n\
                    </head>\r\n\
                </html>";
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write(html);
    res.end();
});
server.listen(80);

node docs - socket.on(data, myFunc);

node docs - Buffer object

Tutorial I am using

Detailed WebSocket Documentation

eazy-peezy wikipedia handshake explanation

Upvotes: 4

Views: 3229

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161647

The main issue is that the WebSocket protocol has evolved a lot since that tutorial was written. If you read the spec that you linked to, section 5.2 talks about the data framing.

https://www.rfc-editor.org/rfc/rfc6455#page-28

The main issue that makes your data gibberish is that the data is automatically masked when sent, so you need to process the frame.

Here's an example to decode your sample code. You will need to expand it to cover larger lengths, and handle other parts of the spec.

socket.ondata = function (data, start, end) {
  var message = data.slice(start, end);
  var FIN = (message[0] & 0x80);
  var RSV1 = (message[0] & 0x40);
  var RSV2 = (message[0] & 0x20);
  var RSV3 = (message[0] & 0x10);
  var Opcode = message[0] & 0x0F;
  var mask = (message[1] & 0x80);
  var length = (message[1] & 0x7F);

  var nextByte = 2;
  if (length === 126) {
    // length = next 2 bytes
    nextByte += 2;
  } else if (length === 127){
    // length = next 8 bytes
    nextByte += 8;
  }

  var maskingKey = null;
  if (mask){
    maskingKey = message.slice(nextByte, nextByte + 4);
    nextByte += 4;
  }

  var payload = message.slice(nextByte, nextByte + length);

  if (maskingKey){
    for (var i = 0; i < payload.length; i++){
      payload[i] = payload[i] ^ maskingKey[i % 4];
    }
  }

  console.log(payload.toString());
};

Upvotes: 13

Related Questions