Fix WebSocket config for connect + disconnect. Check for connect error

src/App.vue

@@ -98,19 +98,16 @@ export default {
     ...mapGetters(['isHostConfigured', 'areScenesLoaded'])
   },
   watch: {
-    isHostConfigured(value) {
-      if (value) this.loadAppData()
+    isHostConfigured(isConfigured) {
+      if (isConfigured) this.loadScenes()
     }
   },
-  mounted() {
-    this.loadAppData()
+  async mounted() {
+    if (this.isHostConfigured) await this.loadWebSocket()
+    if (this.isHostConfigured && !this.areScenesLoaded) await this.loadScenes()
   },
   methods: {
     ...mapActions(['loadScenesList', 'connectToWs']),
-    async loadAppData() {
-      if (this.isHostConfigured) await this.loadWebSocket()
-      if (this.isHostConfigured && !this.areScenesLoaded) await this.loadScenes()
-    },
 
     async load(fn, loadingMessage) {
       try {

src/components/HostConfig.vue

@@ -98,6 +98,7 @@ export default {
       }
       catch (err) {
         this.configErrorMessage = err.message
+        console.error(err)
         return
       }
       finally {

src/components/ResetAppButton.vue

@@ -115,7 +115,8 @@ export default {
         this.showDialog = false
       }
       catch (err) {
-        this.$refs.toast.show(err.message, 'error', 10000)
+        console.error('Error while resetting the app', err)
+        this.$refs.toast.show('Error while resetting the app. ' + err.message, 'error', 10000)
       }
       this.$router.push('/')
     }

src/main.js

@@ -11,7 +11,7 @@ Vue.use(VueNativeSock, 'ws://example.com', {
   store,
   connectManually: true,
   reconnection: true,
-  reconnectionAttempts: 5,
+  reconnectionAttempts: 2,
   reconnectionDelay: 1000
 })
 store.$socket = Vue.prototype.$socket

src/store/actions.js

@@ -1,12 +1,12 @@
 import Vue from 'vue'
-import { API_ROUTES, buildURI, buildWsURI } from '../functions'
+import { API_ROUTES, buildURI, buildWsURI, delay } from '../functions'
 
 export default {
   resetApp({ commit }, { hostConfig = false, progression = false }) {
     commit('resetApp', { hostConfig, progression })
   },
 
-  async setHostConfig({ commit }, { ssl, host, port }) {
+  async setHostConfig({ state, commit }, { ssl, host, port }) {
     // Timeout after 1s
     const controller = new AbortController()
     const signal = controller.signal
@@ -22,6 +22,11 @@ export default {
 
         this._vm.$connect(buildWsURI(ssl, host, port))
 
+        // $connect does not return a Promise, so we wait to know if it worked
+        await delay(300)
+        if (!state.socket.isConnected)
+          throw new Error('Could not connect to remote WebSocket server.')
+
         // Configuration is valid
         commit('setHostConfig', { ssl, host, port })
       })
@@ -35,6 +40,10 @@ export default {
     if (state.socket.isConnected) return /*eslint-disable-line */
     else if (getters.isHostConfigured) {
       this._vm.$connect(getters.getHostWsURI)
+      // $connect does not return a Promise, so we wait to know if it worked
+      await delay(300)
+      if (!state.socket.isConnected)
+        throw new Error('Could not connect to remote WebSocket server.')
     }
     else throw new Error('Could not connect to WebSocket server. Host is not configured.')
   },

src/store/mutations.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { defaultState } from '@/store/state'
+import defaultState from '@/store/state'
 import Experiments from '@/router/experiments'
 
 const checkProgression = (state, experimentName, sceneName) => {
@@ -11,8 +11,12 @@ const checkProgression = (state, experimentName, sceneName) => {
 
 export default {
   resetApp(state, { hostConfig, progression }) {
-    if (hostConfig) state.hostConfig = defaultState.hostConfig
-    if (progression) state.progression = defaultState.progression
+    if (hostConfig) {
+      if (state.socket.isConnected)
+        this._vm.$disconnect()
+      state.hostConfig = defaultState().hostConfig
+    }
+    if (progression) state.progression = defaultState().progression
   },
 
   setHostConfig(state, newConfig) {
@@ -46,14 +50,17 @@ export default {
   },
 
   SOCKET_ONOPEN(state, event) {
+    console.info('Connected to WebSocket server')
     Vue.prototype.$socket = event.currentTarget
     state.socket.isConnected = true
   },
-  SOCKET_ONCLOSE(state, event) {
+  SOCKET_ONCLOSE(state, _event) {
+    console.info('Disconnected from WebSocket server')
+    state.hostConfig = defaultState().hostConfig
     state.socket.isConnected = false
   },
   SOCKET_ONERROR(state, event) {
-    console.error(state, event)
+    console.error('WebSocket connection error', state, event)
   },
   // default handler called for all methods
   SOCKET_ONMESSAGE(state, { data: rawMessage }) {
@@ -62,9 +69,10 @@ export default {
   },
   // mutations for reconnect methods
   SOCKET_RECONNECT(state, count) {
-    console.info(state, count)
+    console.info('Reconnect to WebSocket server', state, count)
   },
   SOCKET_RECONNECT_ERROR(state) {
+    console.error('Could not reconnect to WebSocket server')
     state.socket.reconnectError = true
   }
 }