vue 프로젝트에 noVNC 원격 데스크톱을 반영하는 방법-H5 튜토리얼-php.cn

vue 프로젝트에 noVNC 원격 데스크톱을 반영하는 방법

php中世界最好的语言

풀어 주다： 2018-03-27 14:54:06

원래의

4582명이 탐색했습니다.

이번에는 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

로그인 후 복사

둘째, webpack을 사용하는 경우 npm을 사용하여 종속 항목을 설치할 수 있습니다. 더 편리합니다.

npm install @novnc/novnc

로그인 후 복사

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

HTML

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

로그인 후 복사

Script

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'

로그인 후 복사

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

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

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('sHost:' + sHost + '--nPort:' + nPort)
  cRfb.connect(sHost, nPort, sPassword, sPath);
 })
 },

로그인 후 복사

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

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

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

// 远程桌面连接成功后的回调函数 
 _onCompleteHandler (rfb, fbu) { 
 // 清除 onComplete 的回调。 
 rfb.set_onFBUComplete(function () { 
 }); 
 
 var oDisplay = rfb.get_display(), 
  nWidth = oDisplay.get_width(), 
  nHeight = oDisplay.get_height(), 
 
  oView = oDisplay.get_target(), 
  nViewWidth = oView.clientWidth, 
  nViewHeight = oView.clientHeight 
 ; 
 
 // 设置当前与实际的比例。 
 oDisplay.setScale(nWidth / nViewWidth, nHeight / nViewHeight); 
 
 }

로그인 후 복사

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

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