Add NoVNC and WebSokify libraries

To add the noVNC library, run the following command on the command line:

$ npm i @novnc/novnc
Copy the code

Then go to the Websockify-js github page and download the library as a ZIP file. I unpacked it into my project root folder/vNC-client /tools/websockify-js/.

➜ websockify-JS ├─ changes.txt ├─ readme.md ├─ docs │ ├─ License.gPL-3 │ ├─ lgPL-3 │ ├─ LICENSE. MPL - 2.0 │ ├ ─ ─ TODO │ ├ ─ ─ notes │ └ ─ ─ the TXT ├ ─ ─ the include │ ├ ─ ─ VT100. Js │ ├ ─ ─ keysym, js │ ├ ─ ─ util. Js │ ├ ─ ─ Websock. Js │ ├ ─ ─ webutil. Js │ ├ ─ ─ wsirc. Js │ └ ─ ─ wstelnet. Js ├ ─ ─ websockify │ ├ ─ ─ package. The json │ └ ─ ─ websockify. Js ├ ─ ─ Wsirc. HTML └ ─ ─ wstelnet. HTMLCopy the code

Execute these commands from this location to install websockify dependencies:

$ cd websockify
$ npm install
Copy the code

Now we can run the Websockify server:

$ ./websockify.js [options] SOURCE_ADDR:PORT TARGET_ADDR:PORT
Copy the code

For example, I would use these values to run commands to forward websocket traffic from port 5901 on the local machine (the default port of the VNC server) to port 6080:

$ ./websockify.js localhost:6080 localhost:5901

WebSocket settings:
    - proxying from localhost:6080 to localhost:5901
    - Running in unencrypted HTTP (ws://) mode
Copy the code

Now we can add an NPM script to package.json to start the Websockify server, go to the script section and add the following line: “websockify”: “node tools/websockify-js/websockify/websockify.js”

In the package. In json

{" name ":" VNC client - ", "version" : "0.0.0", "scripts" : {" ng ":" ng ", "start" : "ng serve", "build" : "ng build", "test" : "ng test", "lint": "ng lint", "e2e": "ng e2e", "websockify": "node tools/websockify-js/websockify/websockify.js" }, . . .Copy the code

So we can start the Websockify server from the project home folder using the following command:

$ npm run websockify localhost:6080 localhost:5901

> [email protected] websockify ~/vnc-client
> node tools/websockify-js/websockify/websockify.js "localhost:6080" "localhost:5901"

WebSocket settings:
    - proxying from localhost:6080 to localhost:5901
    - Running in unencrypted HTTP (ws://) mode
Copy the code

If you’re having problems with the Websockify Javascript version on Linux, download the Python version here and unzip it so you can run it with this command:

$ ./run localhost:6080 localhost:5901
Copy the code

Implement NoVNC in Angular components

Here, we will implement noVNC in app.component. Add a div to the HTML file to host the Vnc screen.

<div >
    <div id="screen">
      <! -- This is where the remote screen will appear -->
    </div>
</div>
Copy the code

At app.component.ts you can see the following:

import { Component } from "@angular/core";

import RFB from ".. /.. /node_modules/@novnc/novnc/core/rfb.js";

@Component({
  selector: "app-root".templateUrl: "./app.component.html".styleUrls: ["./app.component.css"],})export class AppComponent {
  title = "vnc-client";

  public rfb: RFB;

  startClient() {
    console.log("Starting !!!");

    // Read parameters specified in the URL query string
    // By default, use the host and port of server that served this file
    const host = window.location.hostname;
    const port = "6080";
    const password = "foobar"; // password of your vnc server
    const path = "websockify";
    // Build the websocket URL used to connect
    let url = "ws";

    if (window.location.protocol === "https:") {
      url = "wss";
    } else {
      url = "ws";
    }

    url += ": / /" + host;
    if (port) {
      url += ":" + port;
    }
    url += "/" + path;

    console.log("URL: ", url);

    // Creating a new RFB object will start a new connection
    this.rfb = new RFB(document.getElementById("screen"), url, {
      credentials: { password: password }, }); }}Copy the code

After that, restart the Angular application on another command line

$ ng serve
Copy the code

That’s it, your Vnc client is up and running.

Connect it

First, obtain the VNC URL from openstack

[root@hcloud-controller ~]# openstack console url show instance-b +-------+--------------------------------------------------------------------------------------------------+ | Field | Value | +-------+--------------------------------------------------------------------------------------------------+ | type | novnc | | url | http://hcloud-controller:6080/vnc_auto.html? path=%3Ftoken%3Dcbbe83a2-f8d3-4520-affb-321fe41fa0d0 | +-------+--------------------------------------------------------------------------------------------------+Copy the code

You can use this URL to directly access the VNC client. You need to replace hcloud-Controller with the IP address of openstack.

We can also build our own client

Here we do not need websockify for proxy

import { Component, OnInit } from '@angular/core';
// @ts-ignore
import RFB from '.. /.. /node_modules/@novnc/novnc/core/rfb.js';

@Component({
  selector: 'app-root'.templateUrl: './app.component.html'.styleUrls: ['./app.component.scss']})export class AppComponent implements OnInit{
  title = 'vnc-client';
  // Use openstack-generated loken
  url = 'ws://hcloud-controller:6080/? token=cbbe83a2-f8d3-4520-affb-321fe41fa0d0';
  public rfb: RFB;

  ngOnInit(): void {
    this.startClient();
    // @ts-ignore
    window.rfb = this.rfb;
  }

  startClient(): void {
    console.log('URL: '.this.url);

    // Creating a new RFB object will start a new connection
    this.rfb = new RFB(document.getElementById('screen'), this.url, {
      credentials: {},
      wsProtocols: ['binary'] / / agreement}); }}Copy the code