vue 프로젝트에 noVNC 원격 데스크톱을 도입하는 단계는 무엇입니까?

다음은 vue 프로젝트에서 noVNC 원격 데스크톱을 도입하는 방법을 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. 먼저 개념을 간단히 소개하겠습니다.

VNCServer는 서버 리소스를 공유하는 분산 사용자를 만족시키기 위해 서버에서 시작되는 서비스입니다. 해당 클라이언트 소프트웨어에는 그래픽 클라이언트 VNCViewer가 포함되어 있으며 noVNC는 HTML 5 WebSocket, Canvas 및 JavaScript 구현을 사용하는 HTML5 VNC 클라이언트입니다. .

noVNC는 주요 클라우드 컴퓨팅 및 가상 머신 제어판에서 널리 사용됩니다. noVNC는 WebSocket을 사용하여 구현되지만 대부분의 최신 VNC 서버는 WebSocket을 지원하지 않으므로 noVNC는 VNC 서버에 직접 연결할 수 없습니다. 대신 WebSocket과 TCP 소켓 간에 변환하려면 프록시를 활성화해야 합니다. 이 프록시를 websockify라고 합니다.

2. 프로젝트에는 이러한 요구 사항이 있습니다. 시스템에는 여러 기능 페이지가 있지만 기능에는 물리적 터미널 장치의 원래 기능도 포함됩니다(컴퓨터의 최신 가상 터미널 클라이언트 포함) . 이 NoVNC가 사용됩니다. 장점은 다른 기능 시스템(또는 페이지)을 새 프로젝트에 포함할 수 있고 클릭하여 위 기능 등을 작동할 수도 있어 일부 문제를 일시적으로 해결할 수 있다는 것입니다.

3. 프로젝트 프레임워크가 vue이므로 다음은 모두 프론트엔드 구현 부분입니다

먼저 noVNC 라이브러리를 소개합니다. 이를 도입하는 방법에는 두 가지가 있습니다. 하나는 소스 코드를 자신의 프로젝트에 직접 다운로드하는 것입니다. 이 방법의 몇 가지 문제점은 아래에 자세히 소개되어 있습니다. 종속성을 설치하는 것이 더 편리합니다.

git clone git://github.com/novnc/noVNC

자세한 코드 부분은 다음과 같습니다

HTML

npm install @novnc/novnc

Script

<template> 
 <p class="page-home" ref="canvas"> 
 <canvas id="noVNC_canvas" width="800" height="600"> 
 Canvas not supported. 
 </canvas> 
 </p> 
</template>

첫번째 도입방식을 채택하고 있으므로, 가져오기 방법은 리소스를 소개하는 데 사용됩니다. 참고로 특정 파일을 도입할 때 해당 프로젝트는 es6 구문을 기반으로 하기 때문에 외부 js를 도입하는 방식이 조금씩 다릅니다. 예를 들어 webutil.js 파일을 도입할 때 내보내기 기본값을 추가해야 올바르게 사용할 수 있습니다. 가져올 때 파일을 약간 수정할 수 있습니다. 파일에는 해당 메모와 설명이 있습니다.

리소스를 소개한 후 다음 단계는 리소스를 사용하는 방법이며 실제로는 복잡하지 않습니다. 할 말이 많지 않습니다. 시작해 보겠습니다.

import WebUtil from '../../noVNC/app/webutil.js' 
 
import Base64 from '../../noVNC/core/base64.js' 
import Websock from '../../noVNC/core/websock.js' 
import '../../noVNC/core/des.js' 
import '../../noVNC/core/input/keysymdef.js' 
import '../../noVNC/core/input/xtscancodes.js' 
import '../../noVNC/core/input/util.js' 
import {Keyboard, Mouse} from '../../noVNC/core/input/devices.js' 
import Display from '../../noVNC/core/display.js' 
import '../../noVNC/core/inflator.js' 
import RFB from '../../noVNC/core/rfb.js' 
import '../../noVNC/core/input/keysym.js'

먼저 메소드 라이프사이클에서 메소드를 정의하고 그 안에 초기화 관련 작업을 작성합니다. 그런 다음 마운트된 라이프 사이클에서 this.connectVnc()를 호출하십시오. 이 라이프사이클 내에 호출해야 합니다. 그렇지 않으면 캔버스가 초기화되지 않으면 DOM 구조를 얻을 수 없습니다.

간단한 설명은 사용된 일부 메소드 또는 속성을 포함하여 객체를 인스턴스화한 다음 연결 메소드를 호출하고 호스트, 포트, 비밀번호 및 경로 매개변수를 전달하여 연결을 설정하는 것입니다.

두 가지 방법이 있습니다. 하나는 연결 성공 후 _.onCompleteHandler 콜백이고, 다른 하나는 연결 성공 후 _disconnected 콜백입니다.

connectVNC () {
 var
  DEFAULT_HOST = '',
  DEFAULT_PORT = '',
  DEFAULT_PASSWORD = "",
  DEFAULT_PATH = "websockify"
 ;
 var cRfb = null;
 var oTarget = document.getElementById("noVNC_canvas");
 let that = this
 if (!this.currentEquipment) {
  return
 }
 let novncPort = this.currentEquipment.novncPort
 getNovncIp().then(function (resData) {
  WebUtil.init_logging(WebUtil.getConfigVar("logging", "warn"));
  var sHost = resData.data.content.ip || DEFAULT_HOST,
  nPort = novncPort || DEFAULT_PORT,
  sPassword = DEFAULT_PASSWORD,
  sPath = DEFAULT_PATH
  ;
  cRfb = new RFB({
  "target": oTarget,<span class="space" style="white-space:pre;display:inline-block;text-indent:2em;line-height:inherit;"> // 目标</span>
  "focusContainer": top.document, // 鼠标焦点定位
  "encrypt": WebUtil.getConfigVar("encrypt", window.location.protocol === "https:"),
  "repeaterID": WebUtil.getConfigVar("repeaterID", ""),
  "true_color": WebUtil.getConfigVar("true_color", true),
  "local_cursor": WebUtil.getConfigVar("cursor", true),
  "shared": WebUtil.getConfigVar("shared", true),
  "view_only": WebUtil.getConfigVar("view_only", false),
  "onFBUComplete": that._onCompleteHandler, // 回调函数
  "onDisconnected": that._disconnected // 断开连接
  });
  // console.log(&#39;sHost:&#39; + sHost + &#39;--nPort:&#39; + nPort)
  cRfb.connect(sHost, nPort, sPassword, sPath);
 })
 },

다음에 일부 매개변수 정보나 화면 크기를 설정할 수 있습니다. 연결이 성공했습니다.

위 작업을 완료하면 웹페이지에서 원격 데스크톱 화면을 볼 수 있습니다.

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Vue에서 Jointjs를 사용하는 방법

Vue

jQuery에서 Baidu 지도를 사용하여 뉴스 방송 스크롤링 및 페이드 인 및 아웃 효과 예제를 구현하는 간단한 방법에 대한 간략한 설명입니다.

위 내용은 vue 프로젝트에 noVNC 원격 데스크톱을 도입하는 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!