Refactor to create server in its own method

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 = `
         <div class="app">
           <div class="remove" data-session-id="${sessionId}">✕</div>
-          <div>devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}</div>
+          <div>devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}</div>
           <div class="title">${app.title} (${app.url})</div>
         </div>
       `
@@ -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 = ''
   }