npm install @novnc/novnc

<div class="container" #container>
</div>

@ViewChild('container')
private container: ElementRef<HTMLDivElement>;

/**
 * VNC連接
 */
private VNCConnect(): void {
  /** 訪問 /vnc/ websocket */
  const url = `ws://${this.host}/vnc/${this.ip}:${this.port}`;

  /** 新建遠程控制對象 */
  this.rfb = new RFB(this.container.nativeElement, url, {
    credentials: {
      password: this.password,
    },
  });

  /** 添加connect事件監(jiān)聽器 */
  this.rfb.addEventListener('connect', () => {
    this.rfb.focus();
  });
}

location /vnc/ {
  proxy_pass http://127.0.0.1:8112/;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection $connection_upgrade;
}

/** 建立基于 vnc_port 的 websocket 服務器 */
const vnc_server = http.createServer();
vnc_server.listen(vnc_port, function () {
  const web_socket_server = new WebSocketServer({server: vnc_server});
  web_socket_server.on('connection', web_socket_handler);
});

/** 引入 http 包 */
const http = require('http');

/** 引入 net 包 */
const net = require('net');

/** 引入 websocket 類 */
const WebSocketServer = require('ws').Server;

/** 本機 ip 地址 */
const localhost = '127.0.0.1';

/** 開放的 vnc websocket 轉(zhuǎn)發(fā)端口 */
const vnc_port = '8112';

/** 打印提示信息 */
console.log(`成功創(chuàng)建 WebSocket 代理 : ${localhost} : ${vnc_port}`);

/** 建立基于 vnc_port 的 websocket 服務器 */
const vnc_server = http.createServer();
vnc_server.listen(vnc_port, function () {
  const web_socket_server = new WebSocketServer({server: vnc_server});
  web_socket_server.on('connection', web_socket_handler);
});

/** websocket 處理器 */
const web_socket_handler = function (client, req) {
  /** 獲取請求url */
  const url = req.url;

  /** 截取主機地址 */
  const host = url.substring(url.indexOf('/') + 1, url.indexOf(':'));

  /** 截取端口號 */
  const port = Number(url.substring(url.indexOf(':') + 1));

  /** 打印日志 */
  console.log(`WebSocket 連接 : 版本 ${client.protocolVersion}, 協(xié)議 ${client.protocol}`);

  /** 連接到 VNC Server */
  const target = net.createConnection(port, host, function () {
    console.log('連接至目標主機');
  });

  /** 數(shù)據(jù)事件 */
  target.on('data', function (data) {
    try {
      client.send(data);
    } catch (error) {
      console.log('客戶端已關閉，清理到目標主機的連接');
      target.end();
    }
  });

  /** 結(jié)束事件 */
  target.on('end', function () {
    console.log('目標主機已關閉');
    client.close();
  });

  /** 錯誤事件 */
  target.on('error', function () {
    console.log('目標主機連接錯誤');
    target.end();
    client.close();
  });

  /** 消息事件 */
  client.on('message', function (msg) {
    target.write(msg);
  });

  /** 關閉事件 */
  client.on('close', function (code, reason) {
    console.log(`WebSocket 客戶端斷開連接：$[code] [${reason}]`);
    target.end();
  });

  /** 錯誤事件 */
  client.on('error', function (error) {
    console.log(`WebSocket 客戶端出錯：${error}`);
    target.end();
  });
};