vue-guacamole-client/src/components/GuacState.js

A Vue.js based Guacamole client

/**
 * Code for managing and reacting to changes in state for the
 * Guacamole client and tunnel
 */

/**
 * Used to map Guac Tunnel and Client status to meaningful value
 * Index in array corresponds with status code
 * I.E  Guac tunnel returns status of 1 which indicated TUNNEL_STATE[1] or 'CONNECTED'
 */
const CONNECTING_STATUS = ['IDLE', 'CONNECTING', 'WAITING']
const TUNNEL_STATE = ['CONNECTING', 'CONNECTED', 'CLOSED']
const CLIENT_STATE = ['IDLE', 'CONNECTING', 'WAITING', 'CONNECTED', 'DISCONNECTING', 'DISCONNECTED']

import Vue from 'vue'
import GuacErrors from './GuacErrors'

export default {
  methods: {
    /**
     * Adds error handlers for the tunnel and client
     *
     * These error handlers will be called when ever an error is detected
     * and will save the error back to the main client object
     */
    initErrorHandlers () {
      this.tunnel.onerror = this.client.onerror = (error) => {
        this.disconnect()
        const guacError = GuacErrors.ERRORS[error.code]
        this.error = guacError ? guacError : {reconnect: false, message: `An unknown error occurred.  Code ${error.code}`}
      }
    },

    /**
     * Adds state change handlers for the tunnel and client
     *
     * These state change handlers will keep options synchronized
     * with the state of the Guacamole tunnel and client
     */
    initStateChangeHandlers () {
      this.tunnel.onstatechange = (state) => {
        Vue.set(this.options, 'tunnelState', TUNNEL_STATE[state])
      }

      // Update connection state as client state changes
      this.client.onstatechange = (clientState) => {
        Vue.set(this.options, 'clientState', CLIENT_STATE[clientState])
        this.$emit('clientStateChanged', CLIENT_STATE[clientState])
      }
    }
  },
  computed: {

    /**
     * Creates simplified overall status for Guacamole connection
     *
     * Combines the status for the tunnel and client in to one
     * status suitable for dispalying to end user
     */
    status () {
      const options = this.options
      if (options.tunnelState === 'Not Connected' || options.clientState === 'Not Connected') return 'Not Connected'

      if (options.tunnelState === 'CLOSED') return 'Disconnected'
      if (options.tunnelState === 'CONNECTING') return 'Connecting'

      if (CONNECTING_STATUS.includes(options.clientState)) return 'Connecting'
      if (options.clientState === 'CONNECTED') return 'Connected'
      if (options.clientState === 'DISCONNECTING') return 'Disconnecting'
      if (options.clientState === 'DISCONNECTED') return 'Disconnected'

      return options.clientState
    }
  }
}