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

今回は、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 サイトを参照してくださいクリックしてリンクを開きます

。または、議論のために私に連絡してください

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Canvas を使用して 3D 動的チャートを作成する方法

H5 モバイル ページ ズーム

以上がvueプロジェクトにnoVNCリモートデスクトップを反映させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。