websocket 重新连接 Node Inspector 代理实现实例教程(3)

对上面的 tcp 代理中的 pipe 逻辑的代码做一些小修改即可。

const through = require(through2);
...

client
   .pipe(through.obj((chunk, enc, done) => {
    if (chunk[0] === 0x47 && chunk[1] === 0x45 && chunk[2] === 0x54) {
     const content = chunk.toString();
     if (content.includes(__ws_proxy__)) {
      return done(null, Buffer.from(content.replace(__ws_proxy__, websocketId)));
     }
    }
    done(null, chunk);
   }))
   .pipe(server)
   .pipe(client);
...

通过 through2 创建一个 transform 流来对传输的数据进行一下更改。

简单判断一下 chunk 的头三个字节是否为GET，如果是 GET 说明这可能是个 http 请求，也就可能是 websocket 的协议升级请求。websocket 重新连接把请求头打印出来就是这个样子的：

GET /__ws_proxy__ HTTP/1.1
Host: 127.0.0.1:9229
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: chrome-devtools://devtools
Sec-WebSocket-Version: 13
...

然后将其中的路径/__ws_proxy替换成对应的 websocketId，然后转发到 node 的 inspector server 上，即可完成 websocket 的握手，接下来的 websocket 通信就不需要对数据做处理，直接转发即可。

接下来就算各种重启应用，或者更换 inspector 的端口，都不需要更换 debug 链接，只需要再 inspector server 重启的时候，在下图的弹窗中

点击一下 Reconnect DevTools 即可恢复 debug。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-59312-3.html