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

上面实现了比较简单的一个代理服务，通过 pipe 方法将两个服务的数据连通起来。client 有数据的时候会被转发到 server 中，server 有数据的时候也会转发到 client 中。

当完成这个 Tcp 代理功能之后，就已经可以实现 vscode 的调试需求了，在 vscode 中项目下 launch.json 中指定端口为代理端口，在 configurations 中添加配置

{
 "type": "node",
 "request": "attach",
 "name": "Attach",
 "protocol": "inspector",
 "restart": true,
 "port": 9229
}

那么当应用重启，或者更换 inspect 的端口，vscode 都能自动重新通过代理端口 attach 到你的应用。

二、获取 websocketId

这一步开始，就是为了解决 devtools 链接不变的情况下能够重新 attach 的问题了，在启动 node inspector server 的时候，inspector 服务还提供了一个 /json 的 http 接口用来获取 websocket id。

这个就相当简单了，直接发个 http 请求到目标端口的 /json，就可以获取到数据了：

[ { description: node.js instance,
  devtoolsFrontendUrl: ...,
  faviconUrl: https://nodejs.org/static/favicon.ico,
  id: e7ef6313-1ce0-4b07-b690-d3cf5274d8b0,
  title: /Users/wanghx/Workspace/larva-team/vscode-log/index.js,
  type: node,
  url: file:///Users/wanghx/Workspace/larva-team/vscode-log/index.js,
  webSocketDebuggerUrl: ws://127.0.0.1:5858/e7ef6313-1ce0-4b07-b690-d3cf5274d8b0 } ]

上面数据中的 id 字段，就是我们需要的 websocket id 了。

三、Inspector 代理

拿到了 websocket id 后，就可以在 tcp 代理中做 websocket id 的动态替换了，首先我们需要固定链接，因此先定一个代理链接，比如我的代理服务端口是 9229，那么 chrome devtools 的代理链接就是：

chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/__ws_proxy__

上面除了最后面的 ws=127.0.0.1:9229/__ws_proxy__ 其他都是固定的，而最后这个也一眼就可以看出来是 websocket 的链接。其中 __ws_proxy__则是用来占位的，用于在 chrome devtools 向这个代理链接发起 websocket 握手请求的时候，将 __ws_proxy__ 替换成 websocket id 然后转发到 node 的 inspector 服务上。

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