| 1 | /**
|
| 2 | * Contains the code relevant for creating and managing Guacamole connections.
|
| 3 | *
|
| 4 | * Only on guacamole connection can exists at a time for a given connection ID
|
| 5 | */
|
| 6 |
|
| 7 | import Guacamole from 'guacamole-common-js'
|
| 8 |
|
| 9 | export default{
|
| 10 | methods: {
|
| 11 | /**
|
| 12 | * Creates the connection string to be appended as query parameters
|
| 13 | * when creating a new Tunnel
|
| 14 | *
|
| 15 | * The hard codes the resolution of the VM, but scaling to make sure it fits in the
|
| 16 | * browser will be handled elsewhere
|
| 17 | */
|
| 18 | connectionString (id) {
|
| 19 | return 'ID=' + encodeURIComponent(id) +
|
| 20 | '&GUAC_WIDTH=1920' +
|
| 21 | '&GUAC_HEIGHT=1080' +
|
| 22 | '&GUAC_DPI=96'
|
| 23 | },
|
| 24 |
|
| 25 | /**
|
| 26 | * Attempts to open a new Guacamole connection
|
| 27 | *
|
| 28 | * Requires Connection ID to be provided
|
| 29 | *
|
| 30 | * Will create new tunnel and client
|
| 31 | *
|
| 32 | * Will assign handlers for keyboard, mouse, error
|
| 33 | * and state changes, and clipboard changes
|
| 34 | */
|
| 35 | connect () {
|
| 36 | // Do not proceed unless connection ID is provided
|
| 37 | const identifier = this.connectionID
|
| 38 | if (!identifier) return
|
| 39 |
|
| 40 | // Existing connection, if it exists, must be cleaned up
|
| 41 | // Failure to clean up will cause errors between conflicting
|
| 42 | // event handlers
|
| 43 | this.disconnect()
|
| 44 |
|
| 45 | this.getTunnel()
|
| 46 | this.client = new Guacamole.Client(this.tunnel)
|
| 47 | this.getDisplay()
|
| 48 | this.initErrorHandlers()
|
| 49 | this.initClipboard()
|
| 50 | this.initStateChangeHandlers()
|
| 51 | this.initMouse()
|
| 52 | this.initKeyboard()
|
| 53 |
|
| 54 | // Connect
|
| 55 | this.client.connect( this.connectionString(identifier) )
|
| 56 | },
|
| 57 |
|
| 58 | /**
|
| 59 | * Attempts to cleanup an existing Guacamole connection
|
| 60 | *
|
| 61 | * Will destroy tunnel, client, and event handlers
|
| 62 | *
|
| 63 | * Must be called before new connections are made or keyboard event
|
| 64 | * handlers will conflict with previous connection.
|
| 65 | */
|
| 66 | disconnect () {
|
| 67 | if (this.display && this.$refs.display) this.$refs.display.innerHTML = ''
|
| 68 |
|
| 69 | try {
|
| 70 | if (this.client) this.client.disconnect()
|
| 71 | } catch (err) {
|
| 72 | // Do nothing
|
| 73 | } finally {
|
| 74 |
|
| 75 | if (this.client) this.client.disconnect()
|
| 76 |
|
| 77 | if (this.keyboard) {
|
| 78 | this.keyboard.onkeydown = this.keyboard.onkeyup = null
|
| 79 | }
|
| 80 |
|
| 81 | if (this.mouse) {
|
| 82 | this.mouse.onmousedown = this.mouse.onmouseup = this.mouse.onmousemove = null
|
| 83 | }
|
| 84 |
|
| 85 | this.client = null
|
| 86 | this.display = null
|
| 87 | this.tunnel = null
|
| 88 | }
|
| 89 | },
|
| 90 |
|
| 91 | /**
|
| 92 | * Create new tunnel for guac connection
|
| 93 | *
|
| 94 | * Attempts to create a web-socket (preferred)
|
| 95 | * If browser doesn't support web-socket tunnel or WS tunnel fails it will fall back to HTTP
|
| 96 | */
|
| 97 | getTunnel () {
|
| 98 | if (window.WebSocket && this.webSocketTunnel && this.httpTunnel) {
|
| 99 | this.tunnel = new Guacamole.ChainedTunnel(
|
| 100 | new Guacamole.WebSocketTunnel( this.webSocketTunnel ),
|
| 101 | new Guacamole.HTTPTunnel( this.httpTunnel, true )
|
| 102 | )
|
| 103 | } else if ( window.WebSocket && this.webSocketTunnel) {
|
| 104 | this.tunnel = new Guacamole.ChainedTunnel(
|
| 105 | new Guacamole.WebSocketTunnel( this.webSocketTunnel )
|
| 106 | )
|
| 107 | } else {
|
| 108 | this.tunnel = new Guacamole.HTTPTunnel( this.httpTunnel, true )
|
| 109 | }
|
| 110 | }
|
| 111 | },
|
| 112 |
|
| 113 | /**
|
| 114 | * Reconnect if connection id changes
|
| 115 | *
|
| 116 | * Attempts to disconnect and reconnect if the connection id changes
|
| 117 | */
|
| 118 | watch: {
|
| 119 | 'connectionID': function(){
|
| 120 | this.connect()
|
| 121 | }
|
| 122 | }
|
| 123 | }
|