Since Chrome updated to v14, they went from version three of the draft to version eight of the draft.
I have an internal chat application running on WebSocket, and although I've gotten the new handshake working, the data framing apparently has changed as well. My WebSocket server is based on Nugget.
Does anybody have WebSocket working with version eight of the draft and have an example on how to frame the data being sent over the wire?
The handshake starts with an HTTP request/response, allowing servers to handle HTTP connections as well as WebSocket connections on the same port. Once the connection is established, communication switches to a bidirectional binary protocol which does not conform to the HTTP protocol.
The websocket protocol communicates with frames. Frames are a header + application data. The frame header contains information about the frame and the application data. The application data is any and all stuff you send in the frame “body”.
WebSocket uses a unified TCP connection and needs one party to terminate the connection. Until it happens, the connection remains active. HTTP needs to build a distinct connection for separate requests. Once the request is completed, the connection breaks automatically.
(See also: How can I send and receive WebSocket messages on the server side?)
It's fairly easy, but it's important to understand the format.
The first byte is almost always 1000 0001
, where the 1
means "last frame", the three 0
s are reserved bits without any meaning so far and the 0001
means that it's a text frame (which Chrome sends with the ws.send()
method).
(Update: Chrome can now also send binary frames with an ArrayBuffer
. The last four bits of the first byte will be 0002
, so you can differ between text and binary data. The decoding of the data works exactly the same way.)
The second byte contains of a 1
(meaning that it's "masked" (encoded)) followed by seven bits which represent the frame size. If it's between 000 0000
and 111 1101
, that's the size. If it's 111 1110
, the following 2 bytes are the length (because it wouldn't fit in seven bits), and if it's 111 1111
, the following 8 bytes are the length (if it wouldn't fit in two bytes either).
Following that are four bytes which are the "masks" which you need to decode the frame data. This is done using xor encoding which uses one of the masks as defined by indexOfByteInData mod 4
of the data. Decoding simply works like encodedByte xor maskByte
(where maskByte
is indexOfByteInData mod 4
).
Now I must say I'm not experienced with C# at all, but this is some pseudocode (some JavaScript accent I'm afraid):
var length_code = bytes[1] & 127, // remove the first 1 by doing '& 127'
masks,
data;
if(length_code === 126) {
masks = bytes.slice(4, 8); // 'slice' returns part of the byte array
data = bytes.slice(8); // and accepts 'start' (inclusively)
} else if(length_code === 127) { // and 'end' (exclusively) as arguments
masks = bytes.slice(10, 14); // Passing no 'end' makes 'end' the length
data = bytes.slice(14); // of the array
} else {
masks = bytes.slice(2, 6);
data = bytes.slice(6);
}
// 'map' replaces each element in the array as per a specified function
// (each element will be replaced with what is returned by the function)
// The passed function accepts the value and index of the element as its
// arguments
var decoded = data.map(function(byte, index) { // index === 0 for the first byte
return byte ^ masks[ index % 4 ]; // of 'data', not of 'bytes'
// xor mod
});
You can also download the specification which can be helpful (it of course contains everything you need to understand the format).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With