Quelles sont les étapes pour introduire le bureau à distance noVNC dans le projet vue ?

Ce qui suit partagera avec vous une méthode pour introduire le bureau à distance noVNC dans le projet vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. Tout d’abord, présentons brièvement le concept.

VNCServer est un service démarré sur le serveur pour satisfaire les utilisateurs distribués partageant les ressources du serveur. Le logiciel client correspondant inclut le client graphique VNCViewer, tandis que noVNC est un client HTML5 VNC, qui est implémenté en utilisant HTML. 5 WebSocket, Canvas et JavaScript.

noVNC est largement utilisé dans les principaux panneaux de contrôle du cloud computing et des machines virtuelles. noVNC est implémenté à l'aide de WebSockets, mais la plupart des serveurs VNC actuels ne prennent pas en charge les WebSockets, donc noVNC ne peut pas se connecter directement au serveur VNC. Au lieu de cela, un proxy doit être activé pour effectuer la conversion entre WebSockets et sockets TCP. Ce proxy s'appelle websockify.

2. Il existe une telle exigence dans le projet. Il existe plusieurs pages de fonctions dans le système, mais les fonctions incluent également les fonctions d'origine sur le terminal physique (Y compris le dernier client de terminal virtuel sur l'ordinateur), qui utilise noVNC. L'avantage est que vous pouvez intégrer d'autres systèmes fonctionnels (ou pages) dans de nouveaux projets, et vous pouvez également cliquer pour faire fonctionner les fonctions ci-dessus, etc., ce qui peut résoudre temporairement certains problèmes.

3. Puisque le cadre du projet est vue, voici les parties d'implémentation frontales

Tout d'abord, présentez la bibliothèque noVNC. Il existe deux façons de l'introduire. La première consiste à télécharger directement le code source dans votre propre projet. Certains problèmes liés à cette méthode sont présentés en détail ci-dessous ;

La seconde est que si vous utilisez webpack, vous pouvez utiliser npm pour installer des dépendances, ce qui est plus pratique.

git clone git://github.com/novnc/noVNC

Ce qui suit est la partie détaillée du code

npm install @novnc/novnc

HTML

Script

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

Puisque la première méthode d'introduction est utilisée, la méthode d'importation est utilisée pour introduire les ressources. Il convient de noter que lors de l'introduction de certains fichiers, le projet est basé sur la syntaxe es6, donc la manière d'introduire des js externes est légèrement différente. Par exemple, lors de l'introduction du fichier webutil.js, vous devez ajouter la valeur par défaut d'exportation avant de pouvoir l'utiliser correctement. Vous pouvez légèrement modifier le fichier lors de l'importation. Il y a des notes et des descriptions correspondantes dans le fichier.

Une fois les ressources introduites, l'étape suivante consiste à savoir comment les utiliser, ce qui n'est en fait pas compliqué. Pas grand chose à dire, commençons.

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'

Tout d'abord, définissez une méthode dans le cycle de vie des méthodes et écrivez-y les opérations liées à l'initialisation. Appelez ensuite this.connectVnc() dans le cycle de vie monté. Il doit être appelé dans ce cycle de vie, sinon la structure DOM ne peut pas être obtenue si le canevas n'est pas initialisé.

Une description simple consiste à instancier un objet, y compris certaines méthodes ou attributs utilisés, puis à appeler la méthode connect et à transmettre les paramètres d'hôte, de port, de mot de passe et de chemin pour établir une connexion.

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

Il existe deux méthodes, l'une est le callback_.onCompleteHandler une fois la connexion réussie, et l'autre est le callback_disconnected

Vous pouvez définir certaines informations sur les paramètres ou la taille de l'écran une fois la connexion établie.

Après avoir effectué les opérations ci-dessus, vous pouvez voir un écran de bureau à distance sur la page Web.

// 远程桌面连接成功后的回调函数 
 _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); 
 
 }

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser jointjs dans vue

Une brève discussion sur la méthode simple d'utilisation de la carte Baidu sous Vue

Exemple de jQuery implémentant des effets de défilement et de fondu des actualités

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!