noVNC リモート デスクトップを vue プロジェクトに導入する手順は何ですか?

以下では、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 メソッドが使用されます。なお、特定のファイルを導入する場合、プロジェクトは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 構造を取得できません。

簡単に説明すると、使用されるメソッドや属性を含むオブジェクトをインスタンス化し、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(&#39;sHost:&#39; + sHost + &#39;--nPort:&#39; + nPort)
  cRfb.connect(sHost, nPort, sPassword, sPath);
 })
 },

接続は成功しました。

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

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

vueでjointjsを使用する方法

VueでBaiduマップを使用してニュース放送のスクロールとフェードインおよびフェードアウト効果の例を実装するためのVue

jQueryの簡単な方法についての簡単な説明

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