vueプロジェクトにnoVNCリモートデスクトップを反映させる方法-H5 チュートリアル-php.cn

vueプロジェクトにnoVNCリモートデスクトップを反映させる方法

php中世界最好的语言

リリース： 2018-03-27 14:54:06

オリジナル

4653 人が閲覧しました

今回は、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ライブラリを導入します。導入には 2 つの方法があります。1 つは、ソースコードを独自のプロジェクトに直接ダウンロードする方法です。この方法の問題点については、以下で詳しく説明します。2 つ目は、webpack を使用する場合は、npm を使用して依存関係をインストールします。どちらの方が便利です。

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>

ログイン後にコピー

最初のimportメソッドを使用するため、リソースの導入にはimportメソッドを使用します。なお、特定のファイルを導入する場合、プロジェクトは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'

ログイン後にコピー

まず、methodライフサイクルでメソッドを定義し、その中に初期化関連の操作を記述します。次に、マウントされたライフサイクルで this.connectVnc() を呼び出します。このライフサイクル内で呼び出す必要があります。そうしないと、キャンバスが初期化されていない場合に DOM 構造を取得できません。

簡単に説明すると、使用されるメソッドや属性を含むオブジェクトをインスタンス化し、connect メソッドを呼び出し、ホスト、ポート、パスワード、およびパスのパラメーターを渡して接続を確立します。

接続成功後のコールバック_.onCompleteHandlerと接続成功後のコールバック_disconnectedの2つのメソッドがあります

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);
 })
 },

ログイン後にコピー

接続成功後にパラメータ情報や画面サイズを設定することができます。

上記の操作が完了すると、Webページにリモートデスクトップ画面が表示されます。

簡単なリモートデスクトップが操作可能です。その他のパラメータや要件がある場合は、公式 Web サイトを参照してくださいクリックしてリンクを開きます