Comment refléter le bureau distant noVNC dans le projet Vue

Cette fois, je vais vous montrer comment mapper le bureau distant noVNC dans le projet vue. Quelles sont les précautions pour mapper le bureau distant noVNC dans le projet vue. Ce qui suit est un cas pratique, prenons un. regarder.

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.

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

Deuxièmement, si vous utilisez webpack, vous pouvez le faire. utilisez npm. L'installation des dépendances est plus pratique.

npm install @novnc/novnc

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

HTML

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

Script

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'

Puisque la première méthode d'importation 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 importées, l'étape suivante consiste à savoir comment les utiliser, ce qui n'est en fait pas compliqué. Pas grand chose à dire, commençons.

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

Tout d'abord, une méthode est définie dans les méthodes

cycle de vie, et les opérations liées à l'initialisation y sont écrites. 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.

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

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

Vous pouvez définir certaines informations sur les paramètres après la connexion est réussie. Ou la taille de l'écran, etc.

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

Un simple bureau à distance peut être utilisé. Si vous avez d'autres paramètres ou exigences, veuillez vous référer au site officiel

Cliquez pour ouvrir le lien. Ou contactez-moi pour en discuter

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer un graphique dynamique 3D avec Canvas

Mise à l'échelle des pages mobiles H5

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!