diff --git a/lib/devtools.js b/lib/devtools.js index 4262522..0ddf660 100644 --- a/lib/devtools.js +++ b/lib/devtools.js @@ -1,11 +1,12 @@ /* eslint-env browser */ import http from 'http' import { WebSocketServer } from 'ws' -import { Session } from '@holepunchto/pear-inspect' +import { Session } from 'pear-inspect' import b4a from 'b4a' customElements.define('developer-tooling', class extends HTMLElement { router = null + port = 9229 constructor () { super() @@ -150,71 +151,7 @@ customElements.define('developer-tooling', class extends HTMLElement { this.addApp(id) } - const devtoolsHttpServer = http.createServer() - const devToolsWsServer = new WebSocketServer({ noServer: true }) - - devtoolsHttpServer.listen(9229, () => console.log('[devtoolsHttpServer] running on port 9229')) - devtoolsHttpServer.on('request', (req, res) => { - if (req.url !== '/json/list') { - res.writeHead(404) - res.end() - return - } - - const targets = [...this.apps].map(([sessionId, app]) => ({ - description: 'node.js instance', // `Pear app: ${app.name}`, - devtoolsFrontendUrl: `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`, - devtoolsFrontendUrlCompat: `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`, - faviconUrl: 'https://nodejs.org/static/images/favicons/favicon.ico', - id: sessionId, - title: app.title, - type: 'node', - url: `file://${app.url}`, - webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}` - })) - - res.writeHead(200, { - 'Content-Type': 'application/json; charset=UTF-8', - 'Cache-Control': 'no-cache', - 'Content-Length': JSON.stringify(targets).length - }) - res.end(JSON.stringify(targets)) - }) - devtoolsHttpServer.on('upgrade', (request, socket, head) => { - console.log(`[devtoolsHttpServer] UPGRADE. url=${request.url}`) - const sessionId = request.url.substr(1) - const sessionIdExists = this.apps.has(sessionId) - if (!sessionIdExists) return socket.destroy() - - devToolsWsServer.handleUpgrade(request, socket, head, ws => devToolsWsServer.emit('connection', ws, request)) - }) - - devToolsWsServer.on('connection', (devtoolsSocket, request) => { - const sessionId = request.url.substr(1) - const app = this.apps.get(sessionId) - if (!app) return devtoolsSocket.destroy() - - const { inspectorSession } = app - - const onMessage = msg => { - const { pearInspectMethod } = msg - const isACDPMessage = !pearInspectMethod - - if (isACDPMessage) return devtoolsSocket.send(JSON.stringify(msg)) - } - inspectorSession.connect() - inspectorSession.on('message', onMessage) - devtoolsSocket.on('message', msg => inspectorSession.post(JSON.parse(msg))) - devtoolsSocket.on('close', () => { - inspectorSession.disconnect() - inspectorSession.off('message', onMessage) - app.connected = false - this.renderApps() - }) - - app.connected = true - this.renderApps() - }) + this.initServer() } renderApps () { @@ -223,7 +160,7 @@ customElements.define('developer-tooling', class extends HTMLElement { div.innerHTML = `
-
devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}
+
devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}
${app.title} (${app.url})
` @@ -274,6 +211,74 @@ customElements.define('developer-tooling', class extends HTMLElement { this.renderApps() } + initServer () { + const devtoolsHttpServer = http.createServer() + const devToolsWsServer = new WebSocketServer({ noServer: true }) + + devtoolsHttpServer.listen(this.port, () => console.log(`[devtoolsHttpServer] running on port ${this.port}`)) + devtoolsHttpServer.on('request', (req, res) => { + if (req.url !== '/json/list') { + res.writeHead(404) + res.end() + return + } + + const targets = [...this.apps].map(([sessionId, app]) => ({ + description: 'node.js instance', // `Pear app: ${app.name}`, + devtoolsFrontendUrl: `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}`, + devtoolsFrontendUrlCompat: `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}`, + faviconUrl: 'https://nodejs.org/static/images/favicons/favicon.ico', + id: sessionId, + title: app.title, + type: 'node', + url: `file://${app.url}`, + webSocketDebuggerUrl: `ws://127.0.0.1:${this.port}/${sessionId}` + })) + + res.writeHead(200, { + 'Content-Type': 'application/json; charset=UTF-8', + 'Cache-Control': 'no-cache', + 'Content-Length': JSON.stringify(targets).length + }) + res.end(JSON.stringify(targets)) + }) + devtoolsHttpServer.on('upgrade', (request, socket, head) => { + console.log(`[devtoolsHttpServer] UPGRADE. url=${request.url}`) + const sessionId = request.url.substr(1) + const sessionIdExists = this.apps.has(sessionId) + if (!sessionIdExists) return socket.destroy() + + devToolsWsServer.handleUpgrade(request, socket, head, ws => devToolsWsServer.emit('connection', ws, request)) + }) + + devToolsWsServer.on('connection', (devtoolsSocket, request) => { + const sessionId = request.url.substr(1) + const app = this.apps.get(sessionId) + if (!app) return devtoolsSocket.destroy() + + const { inspectorSession } = app + + const onMessage = msg => { + const { pearInspectMethod } = msg + const isACDPMessage = !pearInspectMethod + + if (isACDPMessage) return devtoolsSocket.send(JSON.stringify(msg)) + } + inspectorSession.connect() + inspectorSession.on('message', onMessage) + devtoolsSocket.on('message', msg => inspectorSession.post(JSON.parse(msg))) + devtoolsSocket.on('close', () => { + inspectorSession.disconnect() + inspectorSession.off('message', onMessage) + app.connected = false + this.renderApps() + }) + + app.connected = true + this.renderApps() + }) + } + load () { this.style.display = '' }