今回は、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
<template> <p class="page-home" ref="canvas"> <canvas id="noVNC_canvas" width="800" height="600"> Canvas not supported. </canvas> </p> </template>
リソースを紹介したら、次のステップはそれらを使用する方法ですが、これは実際には複雑ではありません。言うことはあまりありません。始めましょう。
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'
簡単に説明すると、使用されるメソッドや属性を含むオブジェクトをインスタンス化し、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 サイトを参照してくださいクリックしてリンクを開きます
。または、議論のために私に連絡してくださいこの記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:Canvas を使用して 3D 動的チャートを作成する方法
以上がvueプロジェクトにnoVNCリモートデスクトップを反映させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。