WebSocket 'Invalid WebSocket frame: RSV1 must be clear' Error with 'ws' Library - Node.js & Vue.js

Question

I'm encountering an issue with WebSocket connections in my Node.js and Vue.js project. I've integrated the 'ws' library for WebSocket functionality, but I'm consistently receiving the error message "Invalid WebSocket frame: RSV1 must be clear." The problem occurs when I'm running my Vue.js application locally, and I can't seem to pinpoint the root cause of this error.

Here are some additional details about my setup:

Node.js version: v18.18.2 'ws' library version: 8.14.2 Vue.js version: @vue/cli 5.0.8

I've reviewed my code, project dependencies, and WebSocket setup, but I'm struggling to identify what's causing this issue. The error message points to 'ws/lib/receiver.js,' but I'm not sure where to start with debugging. I've attempted to upgrade and downgrade 'ws' versions, but the problem persists.

If anyone has experienced a similar issue or can provide guidance on how to troubleshoot this WebSocket error, I'd greatly appreciate your insights. Thank you!

node:events:495
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: RSV1 must be clear
    at Receiver.getInfo (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:199:14)
    at Receiver.startLoop (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:146:22)
    at Receiver._write (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:84:10)
    at writeOrBuffer (node:internal/streams/writable:392:12)
    at _write (node:internal/streams/writable:333:10)
    at Writable.write (node:internal/streams/writable:337:10)
    at Socket.socketOnData (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/websocket.js:1278:35)
    at Socket.emit (node:events:517:28)
    at addChunk (node:internal/streams/readable:335:12)
    at readableAddChunk (node:internal/streams/readable:308:9)
    at Readable.push (node:internal/streams/readable:245:10)
    at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
Emitted 'error' event on WebSocket instance at:
    at Receiver.receiverOnError (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/websocket.js:1164:13)
    at Receiver.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'WS_ERR_UNEXPECTED_RSV_1',
  [Symbol(status-code)]: 1002
}

Node.js v18.18.2

1. Upgrading and downgrading the 'ws' library to different versions.
2. Reviewing my code for any WebSocket-related issues.
3. Checking my project's dependencies and configurations.
4. Changing my Node.js version to match the project requirements.
5. Researching similar issues on forums like StackOverflow.

I was expecting to identify the root cause of the WebSocket error and resolve it. My goal was to run my Vue.js application successfully without encountering the "Invalid WebSocket frame" error, both locally and on my network, ensuring that the WebSocket connections work as expected.

Answer 1

If you are on MAC and on OS version 14+ (Sonoma), try changing the port of the socket. The default port 'ws' uses is 8080 and apple is using this port on this OS version.