@ibm-aspera/sdk 0.2.2

package/src/helpers/ws.ts

@@ -0,0 +1,215 @@
+import {errorLog, generatePromiseObjects, getWebsocketUrl} from './helpers';
+import {messages} from '../constants/messages';
+import {asperaSdk} from '../index';
+import {TransferResponse} from '../models/aspera-sdk.model';
+import {WebsocketEvent, WebsocketMessage, WebsocketTopics} from '../models/models';
+
+export class WebsocketService {
+  /** The main websocket connection to Aspera App*/
+  private globalSocket: WebSocket;
+  /** A map of requested subscription names and the callback for them */
+  private sockets: Map<WebsocketTopics, Function> = new Map();
+  /** The callback for websocket events */
+  private eventListener: Function;
+  /** Indicator if the websocket is already connected */
+  private isConnected = false;
+  /** Global promise object that resolves when init completes */
+  private initPromise = generatePromiseObjects();
+
+  /** Log call for not being ready */
+  private handleNotReady(): void {
+    errorLog(messages.websocketNotReady);
+  }
+
+  /**
+   * This function handles when a connection is opened
+   */
+  private handleOpen = (): void => {
+    if (this.isConnected || !this.joinChannel()) {
+      return;
+    }
+
+    this.isConnected = true;
+    this.updateRpcPort();
+    this.notifyEvent('RECONNECT');
+  };
+
+  /**
+   * This function handles completed subscription
+   */
+  private handleClose = (): void => {
+    if (this.isConnected) {
+      this.isConnected = false;
+      this.notifyEvent('CLOSED');
+    }
+
+    if (!this.globalSocket) {
+      this.handleNotReady();
+      return;
+    }
+
+    this.reconnect();
+  };
+
+  /**
+   * This function handles errors received from the websocket
+   */
+  private handleError = (): void => {
+    errorLog(messages.websocketClosedError);
+  };
+
+  /**
+   * This function handles messages received from the websocket
+   */
+  private handleMessage = (message: MessageEvent<string>): void => {
+    let data: WebsocketMessage|undefined;
+
+    try {
+      data = JSON.parse(message.data);
+    } catch (error) {
+      errorLog('Unable to parse Websocket message', {error, message});
+    }
+
+    // Message we get on subscription
+    if (data && data.id === 1) {
+      this.initPromise.resolver(data);
+
+      return;
+    }
+
+    const socket = this.sockets.get(data.method);
+
+    if (socket && data.params) {
+      socket(data.params);
+    }
+  };
+
+  /**
+   * This function joins the channel to be able to subscribe to events
+   */
+  private joinChannel(): boolean {
+    if (!this.globalSocket) {
+      this.handleNotReady();
+      return false;
+    }
+
+    this.globalSocket.send(JSON.stringify({jsonrpc: '2.0', method: 'subscribe_transfer_activity', params: [asperaSdk.globals.appId], id: 1}));
+
+    return true;
+  }
+
+  /**
+   * This function registers clients to listen to a certain message name. Returns any to allow functions to declare proper type
+   *
+   * @param messageName - the name of messages to listen to (one message name per subscription)
+   * @param callback - the callback function
+   */
+  registerMessage(messageName: WebsocketTopics, callback: Function): void {
+    if (!this.sockets.get(messageName)) {
+      this.sockets.set(messageName, (data: {result: TransferResponse}) => {
+        callback(data.result);
+      });
+    }
+  }
+
+  /**
+   *
+   * @param callback This function registers clients to a certain WebSocket event.
+   *
+   * @param callback - the callback function to call with the event name.
+   */
+  registerEvent(callback: Function): void {
+    this.eventListener = callback;
+    this.eventListener(this.isConnected ? 'RECONNECT': 'CLOSED');
+  }
+
+  /**
+   * This function starts the websocket subscription with the websocket provider
+   *
+   * @returns a promise that resolves when the websocket connection is established
+   */
+  init(): Promise<unknown> {
+    this.connect();
+
+    return this.initPromise.promise;
+  }
+
+  private connect() {
+    this.getWebSocketConnection(33024, 33029)
+      .then((webSocket) => {
+        this.globalSocket = webSocket;
+        this.globalSocket.onerror = this.handleError;
+        this.globalSocket.onclose = this.handleClose;
+        this.globalSocket.onopen = this.handleOpen;
+        this.globalSocket.onmessage = this.handleMessage;
+
+        this.handleOpen();
+      }).catch(() => {
+        this.reconnect();
+      });
+  }
+
+  private reconnect() {
+    if (this.globalSocket) {
+      this.globalSocket.close();
+    }
+
+    setTimeout(() => {
+      this.connect();
+    }, 1000);
+  }
+
+  private getWebSocketConnection(startPort: number, endPort: number): Promise<WebSocket> {
+    const webSocketUrl = getWebsocketUrl(asperaSdk.globals.asperaAppUrl);
+
+    const checkPort = (port: number): Promise<WebSocket> => {
+      return new Promise((resolve, reject) => {
+        const webSocket = new WebSocket(`${webSocketUrl}:${port}`);
+
+        webSocket.onopen = () => {
+          resolve(webSocket);
+        };
+
+        webSocket.onerror = () => {
+          reject(`Connection failed on port ${port}`);
+        };
+      });
+    };
+
+    return new Promise((resolve, reject) => {
+      const connectPort = (port: number) => {
+        if (port > endPort) {
+          return reject('No available WebSocket connection found');
+        }
+
+        checkPort(port)
+          .then(ws => resolve(ws))
+          .catch((error) => {
+            connectPort(port + 1);
+          });
+      };
+
+      connectPort(startPort);
+    });
+  }
+
+  private notifyEvent(event: WebsocketEvent) {
+    if (typeof this.eventListener === 'function') {
+      this.eventListener(event);
+    }
+  }
+
+  private updateRpcPort() {
+    if (!this.globalSocket) {
+      return;
+    }
+
+    const url = new URL(this.globalSocket.url);
+
+    asperaSdk.globals.rpcPort = Number(url.port);
+  }
+}
+
+export const websocketService = new WebsocketService();
+
+export default WebsocketService;

package/src/index.html

@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="aspera-sdk.js"></script>
+    <title>JavaScript SDK Test Server</title>
+    <style>
+      body {
+        padding: 30px;
+      }
+      .test-buttons {
+        margin: 30px 0;
+      }
+      .test-buttons button {
+        margin: 0 10px;
+        padding: 10px;
+      }
+      .flex-page {
+        display: flex;
+      }
+      .text-area, .transfer-monitor {
+        flex: 1;
+        padding-right: 20px;
+      }
+      .text-area * {
+        display: block;
+      }
+      .text-area textarea {
+        width: 600px;
+        padding: 3px;
+        font-size: 16px;
+        font-family: monospace;
+        height: 300px;
+      }
+      .text-area input {
+        font-size: 16px;
+        font-family: monospace;
+        padding: 3px;
+        width: 600px;
+      }
+      label {
+        font-weight: bold;
+        margin-top: 25px;
+      }
+      .transfer {
+        display: block;
+        margin-bottom: 20px;
+        position: relative;
+      }
+      .transfer .progress {
+        background-color: grey;
+        width: 100%;
+        height: 30px;
+      }
+
+      .transfer .bar {
+        background-color: green;
+        height: 100%;
+      }
+
+      .transfer .status {
+        position: absolute;
+        top: 5px;
+        left: 10px;
+        color: white;
+        font-weight: bold;
+      }
+
+      .drop-area {
+        height: 80px;
+        background-color: rgba(0,0,255,0.3);
+        text-align: center;
+        padding-top: 40px;
+        font-size: 18px;
+        margin-bottom: 20px;
+        font-weight: bold;
+      }
+
+      .loader {
+        border: 16px solid #f3f3f3;
+        border-top: 16px solid #3498db;
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        animation: spin 2s linear infinite;
+        margin: 0 auto;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      .error {
+        color: red;
+        margin: 15px 0;
+        text-align: center;
+        font-size: 32px;
+      }
+
+      .docs {
+        color: #343a40;
+        text-decoration: none;
+        font-family: Arial, sans-serif;
+        font-size: 16px;
+        border-bottom: 1px dashed #343a40;
+        transition: color 0.3s ease, border-bottom-color 0.3s ease;
+      }
+
+      .doc-link:hover {
+        color: #1d2124;
+        border-bottom-color: #1d2124;
+      }
+    </style>
+    <script>
+      function bytesCalc(value) {
+        if (value === null || value === '' || value === undefined) {
+          return '\u2014';
+        }
+        const base = 1024;
+        const units = [
+          'B',
+          'KB',
+          'MB',
+          'GB',
+          'TB'
+        ];
+
+        let unitIndex = 0;
+
+        if (Math.abs(value) > base) {
+          do {
+            value /= base;
+            ++unitIndex;
+          } while ( Math.abs(value) >= base && unitIndex < units.length - 1 );
+        }
+        value = value.toFixed(2);
+        return `${value} ${units[unitIndex]}`;
+      }
+
+      function generateObjectText() {
+        const text = JSON.stringify(asperaSdk, undefined, 2);
+        document.querySelector('#test-output').value = text;
+        setTimeout(() => {
+          generateObjectText();
+        }, 1000);
+      }
+
+      function init(supportMultipleUsers) {
+        console.log('INITIALIZING...');
+
+        const appId = document.querySelector('#app-id').value;
+        const options = {appId, supportMultipleUsers};
+
+        asperaSdk.init(options).then(() => {
+          console.log('INIT SUCCESS');
+
+          asperaSdk.getAllTransfers().then(response => {
+            monitorTransfers({ transfers: response });
+          }).catch(error => {
+            console.log('GET ALL TRANSFERS FAIL', error);
+          });
+        }).catch(error => {
+          console.log('INIT FAIL', error);
+        })
+      }
+
+      function testServer() {
+        asperaSdk.testConnection().then(response => {
+          console.log('TEST SUCCESS', response);
+        }).catch(error => {
+          console.log('TEST FAIL', error);
+        })
+      }
+
+      function getInfo() {
+        asperaSdk.getInfo().then(response => {
+          console.log('GET INFO SUCCESS', response);
+        }).catch(error => {
+          console.log('GET INFO FAIL', error);
+        })
+      }
+
+      function transfer() {
+        const asperaSpec = {
+          use_absolute_destination_path: false
+        };
+
+        try {
+          const transferSpec = JSON.parse(document.querySelector('#test-input').value);
+          asperaSdk.startTransfer(transferSpec, asperaSpec).then(response => {
+            console.log('TRANSFER SUCCESS', response);
+          }).catch(error => {
+            console.log('TRANSFER FAIL', error);
+          })
+        } catch (error) {
+          console.log('Unable to parse transferSpec', error);
+        }
+      }
+
+      function remove(id) {
+        asperaSdk.removeTransfer(id).then(response => {
+          console.log('REMOVE SUCCESS', response);
+        }).catch(error => {
+          console.log('REMOVE FAIL', error);
+        })
+      }
+
+      function stopTransfer(id) {
+        asperaSdk.stopTransfer(id).then(response => {
+          console.log('STOP SUCCESS', response);
+        }).catch(error => {
+          console.log('STOP FAIL', error);
+        })
+      }
+
+      function resumeTransfer(id) {
+        try {
+          const transferSpec = JSON.parse(document.querySelector('#test-input').value);
+          asperaSdk.resumeTransfer(id, transferSpec).then(response => {
+            console.log('RESUME SUCCESS', response);
+          }).catch(error => {
+            console.log('RESUME FAIL', error);
+          })
+        } catch (error) {
+          console.log('Unable to parse transferSpec for resume', error);
+        }
+      }
+
+      function getAllTransfers() {
+        asperaSdk.getAllTransfers().then(response => {
+          console.log('GET ALL TRANSFERS SUCCESS', response);
+        }).catch(error => {
+          console.log('GET ALL TRANSFERS FAIL', error);
+        });
+      }
+
+      function getTransfer(id) {
+        asperaSdk.getTransfer(id).then(response => {
+          console.log('GET TRANSFER SUCCESS', response);
+        }).catch(error => {
+          console.log('GET TRANSFER FAIL', error);
+        });
+      }
+
+      function showDirectory(id) {
+        asperaSdk.showDirectory(id).then(response => {
+          console.log('SHOW DIRECTORY SUCCESS', response);
+        }).catch(error => {
+          console.log('SHOW DIRECTORY FAIL', error);
+        });
+      }
+
+      function showSelectFileDialog() {
+        asperaSdk.showSelectFileDialog().then(response => {
+          console.log('SHOW FILE DIALOG SUCCESS', response);
+        }).catch(error => {
+          console.log('SHOW FILE DIALOG FAIL', error);
+        });
+      }
+
+      function showSelectFolderDialog() {
+        asperaSdk.showSelectFolderDialog().then(response => {
+          console.log('SHOW FOLDER DIALOG SUCCESS', response);
+        }).catch(error => {
+          console.log('SHOW FOLDER DIALOG FAIL', error);
+        });
+      }
+
+      function openPreferences() {
+        asperaSdk.showPreferences().then(response => {
+          console.log('SHOW PREFERENCES SUCCESS', response);
+        }).catch(error => {
+          console.log('SHOW PREFERENCES FAIL', error);
+        });
+      }
+
+      function modifyTransfer(id) {
+        const options = {
+          target_rate_kbps: 10,
+        };
+
+        asperaSdk.modifyTransfer(id, options).then(response => {
+          console.log('MODIFY TRANSFER SUCCESS', response);
+        }).catch(error => {
+          console.log('MODIFY TRANSFER FAIL', error);
+        });
+      }
+
+      function testDrop() {
+        const callback = files => {
+          console.log('DROP ZONE CALLBACK', files);
+        }
+
+        asperaSdk.createDropzone(callback, '#drop-area');
+      }
+
+      function getInstallerInfo() {
+        asperaSdk.getInstallerInfo().then(response => {
+          console.log('INSTALLER INFO SUCCESS', response);
+        }).catch(error => {
+          console.log('INSTALLER INFO FAIL', error);
+        })
+      }
+
+      function monitorRemovedTransfers(transfer) {
+        console.log('TRANSFER WAS REMOVED', transfer);
+      }
+
+      function monitorTransfers(transfers) {
+        const transferDom = document.querySelector('#transfer');
+        while (transferDom.firstChild) {
+          transferDom.removeChild(transferDom.firstChild);
+        }
+        if (!transfers.transfers.length) {
+          const element = document.createElement('div');
+          element.setAttribute('class', 'transfer');
+          element.innerHTML = `
+            <div class="name">No transfers</div>
+          `;
+          transferDom.appendChild(element);
+          return;
+        }
+        transfers.transfers.forEach(transfer => {
+          const element = document.createElement('div');
+          element.setAttribute('class', 'transfer-item');
+          element.innerHTML = `
+            <div class="progress">
+              <div class="bar" style="width: ${(transfer.percentage * 100).toFixed(2)}%;"></div>
+            </div>
+            <div class="status">${transfer.status} - ${bytesCalc(transfer.bytes_written)} / ${bytesCalc(transfer.bytes_expected)}</div>
+            <button onclick=remove("${transfer.uuid}")>Remove</button>
+            <button onclick=stopTransfer("${transfer.uuid}")>Stop</button>
+            <button onclick=resumeTransfer("${transfer.uuid}")>Resume</button>
+            <button onclick=getTransfer("${transfer.uuid}")>Info</button>
+            <button onclick=showDirectory("${transfer.uuid}")>Show</button>
+            <button onclick=modifyTransfer("${transfer.uuid}")>Modify</button>
+          `;
+          transferDom.appendChild(element);
+        });
+      }
+
+      function launch() {
+        asperaSdk.launch();
+      }
+
+      function initDragDrop() {
+        asperaSdk.initDragDrop();
+      }
+
+      setTimeout(() => {
+        generateObjectText();
+      }, 3000);
+
+      asperaSdk.registerActivityCallback(monitorTransfers);
+      asperaSdk.registerRemovedCallback(monitorRemovedTransfers);
+
+      asperaSdk.registerStatusCallback((status) => {
+        console.log('Websocket status changed to:', status);
+      });
+
+      if (asperaSdk.isSafari()) {
+        asperaSdk.registerSafariExtensionStatusCallback((status) => {
+          console.log('Safari extension status changed to:', status);
+        });
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Aspera SDK Test Server</h1>
+    <a href="/aspera-sdk-js/docs/index.html" class="docs" target="_blank">Documentation</a>
+    <div class="test-buttons">
+      <button onclick="init(false)" type="button">Init SDK</button>
+      <button onclick="init(true)" type="button">Init SDK with session</button>
+      <button onclick="testServer()" type="button">Test desktop</button>
+      <button onclick="getInfo()" type="button">Get Info</button>
+      <button onclick="transfer()" type="button">Start transfer</button>
+      <button onclick="getAllTransfers()" type="button">Get transfers</button>
+      <button onclick="showSelectFileDialog()" type="button">Select File</button>
+      <button onclick="showSelectFolderDialog()" type="button">Select Folder</button>
+      <button onclick="openPreferences()" type="button">Open Preferences</button>
+      <button onclick="launch()" type="button">Launch</button>
+      <button onclick="testDrop()" type="button">Set dropzone</button>
+      <button onclick="getInstallerInfo()" type="button">Installers</button>
+      <button onclick="initDragDrop()" type="button">Init drag-drop</button>
+    </div>
+    <div class="flex-page">
+      <div class="text-area">
+        <label for="app-id">App ID</label>
+        <input type="text" id="app-id" value="test1"></input>
+        <label for="test-input">transferSpec for download/upload</label>
+        <textarea id="test-input"></textarea>
+        <label for="test-output">Current values in asperaSdk</label>
+        <textarea id="test-output" readonly></textarea>
+      </div>
+      <div id="transfer-monitor" class="transfer-monitor">
+        <br />
+        <hl />
+        <p>Drop test</p>
+        <div class="drop-area" id="drop-area">Drop area</div>
+        <div id="transfer" class="transfer"><div class="name">No transfers</div></div>
+      </div>
+    </div>
+  </body>
+</html>