WebSockets_API/Writing_WebSocket_servers - Need thorough example for “If the MASK bit was set… read the next 4 octets (32 bits)”

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers

What specific section or headline is this issue about?

Reading and Unmasking the Data

What information was incorrect, unhelpful, or incomplete?

An example is given in which a string is attempted to be mutated:

var DECODED = "";
for (var i = 0; i < ENCODED.length; i++) {
    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
}

This would do nothing, or throw an exception in strict mode.

Update: This was fixed, but ideally we should use the WebSocket API to adequately explain and document what the page shows.

What did you expect to see?

Possibly a functional example, or as it is described in the article, a "pseudo-code" example, that's intentionally not (invalid) JavaScript.

Do you have any supporting links, references, or citations?

N/A.

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/websockets_api/writing_websocket_servers
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/websockets_api/writing_websocket_servers/index.md
• Last commit: 0df41fd
• Document last modified: 2022-06-28T05:17:50.000Z

[Josh-Cena]

No strong feelings how we should do it—let's just change it to string concatenation to make it valid JS instead.

Well just using string concatenation won't work - it's using bytes, so it would probably need to use TextDecoder/TextEncoder.
Regardless, still a trivial change.

[husnulhamidiah]

we can update it to use a functional example like

const MASK = [1, 2, 3, 4]                   // 4-byte mask
const ENCODED = [105, 103, 111, 104, 110]   // encoded string "hello"

const DECODED = []                          // byte array of decoded payload
for (let i = 0; i < ENCODED.length; i++) {
  DECODED.push(ENCODED[i] ^ MASK[i % 4])
}

if you good with that example, i'll create a pull request for this

Personally, I'd support an example that handles this, and uses the API that the article is about?

[sideshowbarker]

if you good with that example, i'll create a pull request for this

@husnulhamidiah I’ve gone ahead and assigned this one to you