How to integrate WebAccess in a custom application

The VNC, HTTP, and WebSocket WebAccess can be integrated into your own application by using the IXON API and information below.

Some practical use cases:

  • Remote access over VNC to HMI screens to control machine panels
  • HTTP for web-based insight into machine settings or access to webcams
  • Use WebSocket to monitor specific traffic

Embed VNC WebAccess

This chapter explains how you can embed VNC WebAccess in your application.

You'll need a library that supports VNC over a WebSocket connection, making us usable in web applications. IXON uses Apache Guacamole.

image
  1. Send a POST request to endpoint WebAccess.

  2. In the received URL, change https into wss and add display settings.

    1. Example TypeScript code:

      export function getTunnelUrl(server: AgentServer, webAccessUrl: string, window: Window) {
        const urlParts = webAccessUrl.replace('https:', 'wss:').split('/?');
        const baseUrl = urlParts[0];
        const colorDepth = getColorDepth(server);
        const queryParams = urlParts[1];
        return `${baseUrl}/vnc/${window.innerHeight}/${window.innerWidth}/${colorDepth}?${queryParams}&a=b`;
      }
      
      export function getColorDepth(server: AgentServer) {
        switch (server.connectionQuality) {
          case 'high':
            return 32;
          case 'normal':
          default:
            return 16;
          case 'low':
            return 8;
        }
      }
      

      The VNC screen size height is based on the Window.innerHeight property and the width is based on the Window.innerWidth property. The color depth is based on the AgentServer endpoint's property server.connectionQuality.

    2. Example url: wss://guacamole-controlpaneltest-7ibqmxvgo7h8se4bpc2sasvvqzt7rin6-rsc.sf01.rsc.dal.dkn.ayayot.com:443/vnc/937/1227/32?auth=qpvZzzl08jZt
      Here 937 is the height of the VNC client screen in pixels, 1227 the width, and 32 the color depth in bits.

  3. Set up the VNC connection to the URL from step 2 using your VNC library (e.g. Apache Guacamole).

Use HTTP WebAccess

This chapter explains how you can open an HTTP WebAccess in a new browser tab.

image
  1. Send a POST request to endpoint WebAccess.
  2. Open a new browser tab and go to the received URL, including /?auth=....
    1. The browser will handle the redirect and authorization cookie.

Embed HTTP WebAccess

This chapter explains how you can fully embed HTTP WebAccess in your application.

image
  1. Send a POST request to endpoint WebAccess.
  2. Send a GET request to the received URL, including /?auth=....
    1. The API response contains a redirect URL and 2x a header set-cookie. One with value route=... and the other with _webacces-token=.... You'll need these later.
  3. In the received URL, replace ?auth=... with the landing page.
    1. If you have no landing page, simply remove ?auth=....
  4. Add a header Cookie with the values of the set-cookie headers from step 2, separated by a semicolon.
    1. For example: 'Cookie':'route=REDACTED;_webacces-token=REDACTED'
  5. Open the HTTP server by sending a GET request to the URL from step 3, including the Cookie header from step 4.

Embed WebSocket WebAccess

This chapter explains how you can embed WebSocket WebAccess in your application.

You'll need a WebSocket client in your application.

image
  1. Send a POST request to endpoint WebAccess.
  2. Set up a WS connection to the received URL.