Handle disconnections, keep only one connection live

michalsnik · michalsnik · commit e3757d494d50 · 2018-01-22T19:31:04.000+01:00
diff --git a/shells/electron/README.md b/shells/electron/README.md
@@ -6,14 +6,14 @@
 
 Install the package globally:
 ```bash
-npm install -g vue-remote-devtools
+npm install -g @vue/devtools
 ```
 
 ### :rocket: Usage
 
 Once you installed the package globally, run:
 ```bash
-vue-remote-devtools
+vue-devtools
 ```
 
 Then add:
@@ -23,14 +23,14 @@ Then add:
 To the `<head>` section of your app. 
 **(Don't forget to remove it before deploying to production!)**
 
-Alternatively you can also install `vue-remote-devtools` as project dependency:
+Alternatively you can also install `@vue/devtools` as project dependency:
 ```bash
-npm install vue-remote-devtools --save-dev
+npm install @vue/devtools --save-dev
 ```
 
 And then directly import it in your app:
 ```js
-import devtools from 'vue-remote-devtools'
+import devtools from '@vue/devtools'
 
 if (process.env.NODE_ENV === 'development') {
   devtools.connect()
diff --git a/shells/electron/app.html b/shells/electron/app.html
@@ -4,7 +4,8 @@
   <meta charset="UTF-8">
   <title>Vue Developer Tools</title>
   <style>
-    #app {
+    #app,
+    #intro {
       display: flex;
       flex-direction: column;
       position: absolute;
@@ -17,13 +18,19 @@
     }
 
     #intro {
+      z-index: 100;
+      justify-content: center;
+      align-items: center;
       background-color: #fff;
-      margin: auto;
       text-align: center;
       font-family: Roboto, sans-serif;
       color: #484848;
     }
 
+    #intro.hidden {
+      display: none;
+    }
+
     #intro .logo {
       width: 120px;
     }
@@ -63,33 +70,32 @@
   </style>
 </head>
 <body>
-  <div id="app">
-    <div id="intro">
-      <img src="icons/128.png" alt="" class="logo">
-      <h2 class="title">
-        Waiting for connection...
-      </h2>
-      <div class="content">
-        <div class="content-row">
-          <label for="script-localhost">Add</label>
-          <input type="text" id="script-localhost">
-        </div>
-        <div class="content-row">
-          <label for="script-byip">Or</label>
-          <input type="text" id="script-byip">
-        </div>
-        to the top of the page you want to debug.
+  <div id="intro">
+    <img src="icons/128.png" alt="" class="logo">
+    <h2 class="title">
+      Waiting for connection...
+    </h2>
+    <div class="content">
+      <div class="content-row">
+        <label for="script-localhost">Add</label>
+        <input type="text" id="script-localhost">
+      </div>
+      <div class="content-row">
+        <label for="script-byip">Or</label>
+        <input type="text" id="script-byip">
       </div>
+      to the top of the page you want to debug.
     </div>
   </div>
+  <div id="app">
+  </div>
   <script>
     const port = process.env.PORT || 8098
     const localIp = require('ip').address();
     const $ = document.querySelector.bind(document)
 
     const $localhost = $('#script-localhost')
     const $byIp = $('#script-byip')
-    const $intro = $('#intro')
 
     $localhost.value = '<' + 'script src="http://localhost:' + port + '"><' + '/script>'
     $byIp.value = '<' + 'script src="http://' + localIp + ':' + port + '"><' + '/script>'
diff --git a/shells/electron/package.json b/shells/electron/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue-remote-devtools",
+  "name": "@vue/devtools",
   "version": "0.0.1",
   "description": "StandAlone vue-devtools",
   "repository": {
diff --git a/shells/electron/server.js b/shells/electron/server.js
@@ -14,6 +14,15 @@ app.get('/', function (req, res) {
 
 // Middleman
 io.on('connection', function (socket) {
+  // Disconnect any previously connected apps
+  socket.broadcast.emit('vue-devtools-disconnect-backend')
+
+  socket.on('disconnect', (reason) => {
+    if (reason.indexOf('client')) {
+      socket.broadcast.emit('vue-devtools-disconnect-devtools')
+    }
+  })
+
   socket.on('vue-message', data => {
     socket.broadcast.emit('vue-message', data)
   })
diff --git a/shells/electron/src/backend.js b/shells/electron/src/backend.js
@@ -1,6 +1,19 @@
 import io from 'socket.io-client'
 import { initBackend } from 'src/backend'
 import Bridge from 'src/bridge'
+import { installToast } from 'src/backend/toast'
+
+const connectedMessage = () => {
+  if (window.__VUE_DEVTOOLS_TOAST__) {
+    window.__VUE_DEVTOOLS_TOAST__('Remote Devtools Connected', 'normal')
+  }
+}
+
+const disconnectedMessage = () => {
+  if (window.__VUE_DEVTOOLS_TOAST__) {
+    window.__VUE_DEVTOOLS_TOAST__('Remote Devtools Disconnected', 'error')
+  }
+}
 
 (function () {
   const port = process.env.PORT || 8098
@@ -9,6 +22,10 @@ import Bridge from 'src/bridge'
   const bridge = new Bridge({
     listen (fn) {
       socket.on('vue-message', data => fn(data))
+      socket.on('vue-devtools-disconnect-backend', () => {
+        socket.disconnect()
+        disconnectedMessage()
+      })
     },
     send (data) {
       socket.emit('vue-message', data)
@@ -17,8 +34,11 @@ import Bridge from 'src/bridge'
 
   bridge.on('shutdown', () => {
     socket.disconnect()
+    disconnectedMessage()
   })
 
+  installToast(window)
   initBackend(bridge)
   socket.emit('vue-devtools-init')
+  connectedMessage()
 }())
diff --git a/shells/electron/src/devtools.js b/shells/electron/src/devtools.js
@@ -4,10 +4,19 @@ import Bridge from 'src/bridge'
 
 const port = process.env.PORT || 8098
 const socket = io('http://localhost:' + port)
+const $ = document.querySelector.bind(document)
+const $intro = $('#intro')
 
 let reload = null
 
+socket.on('vue-devtools-disconnect-devtools', () => {
+  $intro.classList.remove('hidden')
+})
+
 socket.on('vue-devtools-init', () => {
+  socket.off('vue-message')
+  $intro.classList.add('hidden')
+
   // If new page is opened reload devtools
   if (reload) return reload()
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "vue-remote-devtools",`
	`2`	`+ "name": "@vue/devtools",`
`3`	`3`	`"version": "0.0.1",`
`4`	`4`	`"description": "StandAlone vue-devtools",`
`5`	`5`	`"repository": {`