Node.js+Vue.js中使用ws库遇WebSocket错误：RSV1必须置空

环境配置 #

• Node.js版本：v18.18.2
• 'ws'库版本：8.14.2
• Vue.js版本：@vue/cli 5.0.8

错误堆栈信息 #

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

已尝试的排查手段 #

• 升级和降级'ws'库至不同版本
• 检查代码中所有WebSocket相关逻辑
• 核查项目依赖与配置
• 更换Node.js版本以匹配项目要求
• 在技术论坛搜索类似问题

解决方案思路 #

这个错误的核心原因是WebSocket帧的RSV1保留位被意外设置，而服务端的ws库未启用对应的扩展（通常是permessage-deflate压缩扩展），导致无法解析帧。以下是针对性的排查和解决步骤：

1. 统一服务端与客户端的压缩配置 #

如果服务端不需要WebSocket消息压缩，直接在ws服务器配置中显式禁用perMessageDeflate，避免与客户端的压缩协商冲突：

const WebSocket = require('ws');
const wss = new WebSocket.Server({
  port: 8080,
  perMessageDeflate: false // 强制关闭压缩扩展
});

如果需要压缩，确保客户端支持permessage-deflate（原生WebSocket在现代浏览器中默认支持），且服务端配置保持默认（perMessageDeflate: true）。

2. 检查Vue开发服务器的代理配置 #

Vue的devServer代理如果处理WebSocket请求时开启了HTTP压缩，会破坏WebSocket帧结构。在vue.config.js中关闭代理的compress选项：

module.exports = {
  devServer: {
    proxy: {
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true,
        compress: false // 必须关闭，避免代理修改WebSocket帧
      }
    }
  }
};

3. 清理客户端WebSocket初始化代码 #

确保客户端没有手动添加干扰压缩协商的Headers或配置，原生WebSocket初始化保持简洁：

// Vue组件中正确的WebSocket初始化方式
const socket = new WebSocket('ws://localhost:8080/ws');
// 不要手动设置Accept-Encoding等可能触发压缩的请求头

如果使用第三方WebSocket库（如vue-native-websocket），检查是否开启了压缩选项，如有则关闭或与服务端配置同步。

4. 排除浏览器插件干扰 #

部分浏览器插件（如广告拦截器、VPN、代理工具）会修改WebSocket帧内容，导致RSV1位被意外设置。暂时禁用所有插件后重新测试，确认是否解决问题。

5. 调试WebSocket帧内容 #

使用浏览器开发者工具的Network面板，找到WebSocket连接并切换到Frames标签，检查发送/接收的帧是否异常。也可以用抓包工具分析帧结构，定位是客户端、服务端还是中间代理导致的RSV1位异常。

内容的提问来源于stack exchange，提问作者VriesemaRS