devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Apache Guacamole集成到spring boot、vue

作者：我家自动化 | 2024-05-07 19:07:42

赞

踩

apache guacamole

一、创建spring项目

引入依赖

  1.  <!-- Main Guacamole library -->
  2.         <dependency>
  3.             <groupId>org.apache.guacamole</groupId>
  4.             <artifactId>guacamole-common</artifactId>
  5.             <version>1.5.2</version>
  6.             <scope>compile</scope>
  7.         </dependency>
  8.  
  9.         <!-- Guacamole JavaScript library -->
  10.         <dependency>
  11.             <groupId>org.apache.guacamole</groupId>
  12.             <artifactId>guacamole-common-js</artifactId>
  13.             <version>1.5.2</version>
  14.             <type>zip</type>
  15.             <scope>runtime</scope>
  16.         </dependency>

二、创建http服务处理

  1.  
  2.  
  3. import org.apache.guacamole.GuacamoleException;
  4. import org.apache.guacamole.net.GuacamoleSocket;
  5. import org.apache.guacamole.net.GuacamoleTunnel;
  6. import org.apache.guacamole.net.InetGuacamoleSocket;
  7. import org.apache.guacamole.net.SimpleGuacamoleTunnel;
  8. import org.apache.guacamole.protocol.ConfiguredGuacamoleSocket;
  9. import org.apache.guacamole.protocol.GuacamoleConfiguration;
  10. import org.apache.guacamole.servlet.GuacamoleHTTPTunnelServlet;
  11.  
  12. import javax.servlet.annotation.WebServlet;
  13. import javax.servlet.http.HttpServletRequest;
  14.  
  15. /**
  16.  * @author 
  17.  * @program 
  18.  * @description http远程桌面请求
  19.  * @packagename 
  20.  * @date 2023-06-07 16:51
  21.  **/
  22. @WebServlet(urlPatterns = "/tunnel")
  23. public class TutorialGuacamoleTunnelServlet extends GuacamoleHTTPTunnelServlet {
  24.     /**
  25.      *
  26.      */
  27.     private static final long serialVersionUID = -3224942386695394818L;
  28.  
  29.     @Override
  30.     protected GuacamoleTunnel doConnect(HttpServletRequest request) throws GuacamoleException {
  31.  
  32.         //guacamole server地址
  33.         String hostname = "";
  34.         //guacamole server端口
  35.         int port = 4822;
  36.         GuacamoleConfiguration configuration = new GuacamoleConfiguration();
  37.         // 远程连接协议
  38.         configuration.setProtocol("rdp");
  39.         configuration.setParameter("hostname", "");
  40.         configuration.setParameter("port", "3389");
  41.         configuration.setParameter("username", "");
  42.         configuration.setParameter("password", "");
  43.         configuration.setParameter("ignore-cert", "true");
  44.  
  45.         GuacamoleSocket socket = new ConfiguredGuacamoleSocket(
  46.                 new InetGuacamoleSocket(hostname, port),
  47.                 configuration
  48.         );
  49.         GuacamoleTunnel tunnel = new SimpleGuacamoleTunnel(socket);
  50.         return tunnel;
  51.     }
  52. }

三、将guacamole-common-js压缩包解压复制到vue，guacamole-common-js压缩包在依赖下载路径下找

在vue的index.html同目录下创建static目录 将解压的guacamole-common-js目录复制到该目录下

四、显示远程界面

  1. <!--
  2.  * @Descripttion: 远程桌面
  3.  * @Author: 
  4.  * @Date: 
  5.  * @LastEditors: 
  6.  * @LastEditTime: 
  7. -->
  8. <template>
  9.   <div
  10.     class="remote-desktop"
  11.     style="height: calc(100vh - 130px); margin: 0px 16px 8px; overflow-x: auto"
  12.   >
  13.     <div id="display"></div>
  14.   </div>
  15. </template>
  16. <script>
  17. export default {
  18.   props: {},
  19.   data() {
  20.     return {};
  21.   },
  22.   mounted: function () {
  23.     this.$nextTick(function () {
  24.       this.show();
  25.     });
  26.   },
  27.   methods: {
  28.     // 失活页面时
  29.     deactivated() {},
  30.     // 激活页面时
  31.     activated() {},
  32.     show() {
  33.       // Get display div from document
  34.       var display = document.getElementById("display");
  35.  
  36.       // Instantiate client, using an HTTP tunnel for communications.
  37.       // tunnel
  38.       //访问地址  这里我做了转发 请按自己服务填写 如 http://192.168.6.14:8080/tunnel
  39.       var guac = new Guacamole.Client(
  40.         new Guacamole.HTTPTunnel("/guacamole/tunnel")
  41.       );
  42.       // Add client to display div
  43.       display.appendChild(guac.getDisplay().getElement());
  44.  
  45.       // Error handler
  46.       guac.onerror = function (error) {
  47.         console.log(error);
  48.       };
  49.  
  50.       // Connect
  51.       guac.connect();
  52.  
  53.       // Disconnect on close
  54.       window.onunload = function () {
  55.         guac.disconnect();
  56.       };
  57.  
  58.       // Mouse
  59.       var mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
  60.  
  61.       mouse.onmousedown =
  62.         mouse.onmouseup =
  63.         mouse.onmousemove =
  64.           function (mouseState) {
  65.             guac.sendMouseState(mouseState);
  66.           };
  67.  
  68.       // Keyboard
  69.       var keyboard = new Guacamole.Keyboard(document);
  70.  
  71.       keyboard.onkeydown = function (keysym) {
  72.         guac.sendKeyEvent(1, keysym);
  73.       };
  74.  
  75.       keyboard.onkeyup = function (keysym) {
  76.         guac.sendKeyEvent(0, keysym);
  77.       };
  78.     },
  79.   },
  80. };
  81. </script>
  82.  
  83.  <style>
  84. #display{
  85.   z-index:999 ;
  86.   position: absolute;
  87. }
  88. </style>

五、http协议会导致一直有请求，建议使用webSocket。修改如下

  1. import org.apache.guacamole.GuacamoleException;
  2. import org.apache.guacamole.net.GuacamoleSocket;
  3. import org.apache.guacamole.net.GuacamoleTunnel;
  4. import org.apache.guacamole.net.InetGuacamoleSocket;
  5. import org.apache.guacamole.net.SimpleGuacamoleTunnel;
  6. import org.apache.guacamole.protocol.ConfiguredGuacamoleSocket;
  7. import org.apache.guacamole.protocol.GuacamoleClientInformation;
  8. import org.apache.guacamole.protocol.GuacamoleConfiguration;
  9. import org.apache.guacamole.websocket.GuacamoleWebSocketTunnelEndpoint;
  10. import org.springframework.stereotype.Component;
  11.  
  12. import javax.websocket.EndpointConfig;
  13. import javax.websocket.Session;
  14. import javax.websocket.server.ServerEndpoint;
  15.  
  16. /**
  17.  * @author 
  18.  * @program 
  19.  * @description WebSocket远程桌面请求
  20.  * @packagename 
  21.  * @date 2023-06-08 09:18
  22.  **/
  23. @ServerEndpoint(value = "/webSocket", subprotocols = "guacamole")
  24. @Component
  25. public  class WebSocketTunnel extends GuacamoleWebSocketTunnelEndpoint {
  26.  
  27.     private static String host;
  28.     private static int port;
  29.  
  30.     @Value("${guacamole.host:127.0.0.1}")
  31.     public void setHost(String host) {
  32.         WebSocketTunnel.host = host;
  33.     }
  34.  
  35.     @Value("${guacamole.port:4822}")
  36.     public void setPort(int port) {
  37.         WebSocketTunnel.port = port;
  38.     }
  39.     /**
  40.      * Returns a new tunnel for the given session. How this tunnel is created
  41.      * or retrieved is implementation-dependent.
  42.      *
  43.      * @param session        The session associated with the active WebSocket
  44.      *                       connection.
  45.      * @param endpointConfig information associated with the instance of
  46.      *                       the endpoint created for handling this single connection.
  47.      * @return A connected tunnel, or null if no such tunnel exists.
  48.      * @throws GuacamoleException If an error occurs while retrieving the
  49.      *                            tunnel, or if access to the tunnel is denied.
  50.      */
  51.     @Override
  52.     protected GuacamoleTunnel createTunnel(Session session, EndpointConfig endpointConfig) throws GuacamoleException {
  53.         System.out.println("sessionMap:" + session.getRequestParameterMap());
  54.         // 获取url的值
  55.         Integer height = Integer.valueOf(session.getRequestParameterMap().get("height").get(0));
  56.         Integer width = Integer.valueOf(session.getRequestParameterMap().get("width").get(0));
  57.         GuacamoleClientInformation information = new GuacamoleClientInformation();
  58.         information.setOptimalScreenHeight(height);
  59.         information.setOptimalScreenWidth(width);
  60.  
  61.         //--------------------------windows远程桌面测试--------------------------
  62.         GuacamoleConfiguration configuration = new GuacamoleConfiguration();
  63.         configuration.setProtocol("rdp");
  64.         configuration.setParameter("hostname", "");
  65.         configuration.setParameter("port", "3389");
  66.         configuration.setParameter("username", "");
  67.         configuration.setParameter("password", "123456");
  68.         //忽略证书
  69.         configuration.setParameter("ignore-cert", "true");
  70.  
  71.         //domain 域
  72.         //security 安全模式 any-任意  nla-网络级别认证  nla-ext-扩展网络级身份验证  tls-TLS加密  vmconnect-Hyper-V / VMConnect  rdp-RDP加密
  73.         //disable-auth 禁用认证 true false
  74.         //显示设置
  75.         //color-depth 色彩深度 8-256色 16-低色（16位） 24-真彩（24位） 32-真彩（32位）
  76.         //width 宽
  77.         //height 高
  78.         //dpi 分辨率
  79.         //resize-method 缩放方法 display-update-显示更新  reconnect-重新连接
  80.         //read-only 只读 true false
  81.  
  82.         //vnc 参考地址https://guacamole.apache.org/doc/gug/configuring-guacamole.html#vnc
  83.         //autoretry 在放弃并返回错误之前重试连接的次数
  84.         //显示设置
  85.         //color-depth 色彩深度 8-256色 16-低色（16位） 24-真彩（24位） 32-真彩（32位）
  86.         //swap-red-blue 交换红/蓝成分 true false
  87.         //cursor 光标 local-本地 remote-远程
  88.         //read-only 只读 true false
  89.         //force-lossless true false
  90.         //代理设置
  91.         //dest-host
  92.         //dest-port
  93.  
  94.         //--------------------------windows远程桌面测试--------------------------
  95.  
  96.         GuacamoleSocket socket = new ConfiguredGuacamoleSocket(
  97.                 new InetGuacamoleSocket(host, port),
  98.                 configuration,
  99.                 information
  100.         );
  101.  
  102.         GuacamoleTunnel tunnel = new SimpleGuacamoleTunnel(socket);
  103.         return tunnel;
  104.     }
  105. }
  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  4.  
  5. /**
  6.  * @author 
  7.  * @program 
  8.  * @description
  9.  * @packagename 
  10.  * @date 2023-06-08 18:01
  11.  **/
  12. @Configuration
  13. public class WebSocketConfig {
  14.  
  15.     @Bean
  16.     public ServerEndpointExporter serverEndpointExporter(){
  17.         return new ServerEndpointExporter();
  18.     }
  19. }
  20.

vue修改如下

  1. // Instantiate client, using an HTTP tunnel for communications.
  2.       // tunnel
  3.       // Instantiate client, using an HTTP tunnel for communications.
  4.       // tunnel
  5.       //访问地址  这里我做了转发 请按自己服务填写 如 http://192.168.6.14:8080/tunnel
  6.       //var guac = new Guacamole.Client(
  7.        // new Guacamole.HTTPTunnel("/guacamole/tunnel")
  8.       //);
  9.        var guac = new Guacamole.Client(
  10.                 new Guacamole.WebSocketTunnel("ws://192.168.6.14:8088/guacamole/webSocket")
  11.              );
  12.      // 如果需要传参 在连接出编写
  13.       guac.connect("height=" +
  14.             display.clientHeight +
  15.             "&width=" +
  16.             display.clientWidth +
  17.             "&id=" +
  18.             this.record.id);

整体代码

  1. <!--
  2.  * @Descripttion: 远程桌面
  3.  * @Author: 
  4.  * @Date: 
  5.  * @LastEditors: 
  6.  * @LastEditTime: 
  7. -->
  8. <template>
  9.   <div
  10.     class="remote-desktop"
  11.     style="height: calc(100vh - 130px); margin: 0px 16px 8px; overflow-x: auto"
  12.   >
  13.     <BasicBreadcrumb :data="breadcrumbData" @click="cancel" @back="cancel" />
  14.     <div
  15.       id="display"
  16.       style="height: calc(-194px + 100vh); width: calc(-280px + 100vw)"
  17.     >
  18.       <a-result status="warning" :title="resultTitle" v-if="showResult">
  19.         <template #extra>
  20.           <a-button key="console" type="primary" @click="cancel">
  21.             返回
  22.           </a-button>
  23.         </template>
  24.       </a-result>
  25.     </div>
  26.   </div>
  27. </template>
  28. <script>
  29. export default {
  30.   props: {
  31.     menu: {},
  32.     btnItem: {},
  33.     record: {},
  34.   },
  35.   data() {
  36.     return {
  37.       guac: null,
  38.       showResult: false,
  39.       keyboard: null,
  40.       resultTitle: "",
  41.       breadcrumbData: [],
  42.     };
  43.   },
  44.   mounted: function () {
  45.     this.$nextTick(function () {
  46.       this.show();
  47.     });
  48.   },
  49.   destroyed: function () {
  50.     this.guac.disconnect();
  51.     this.keyboard.onkeydown = null;
  52.     this.keyboard.onkeyup = null;
  53.   },
  54.   methods: {
  55.     // 失活页面时
  56.     deactivated() {
  57.       if (this.keyboard != null) {
  58.         this.keyboard.onkeydown = null;
  59.         this.keyboard.onkeyup = null;
  60.       }
  61.     },
  62.     // 激活页面时
  63.     activated() {
  64.       var _this = this;
  65.       if (_this.keyboard != null) {
  66.         _this.keyboard.onkeydown = function (keysym) {
  67.           _this.guac.sendKeyEvent(1, keysym);
  68.         };
  69.  
  70.         _this.keyboard.onkeyup = function (keysym) {
  71.           _this.guac.sendKeyEvent(0, keysym);
  72.         };
  73.       }
  74.     },
  75.     cancel() {
  76.       this.$emit("cancel");
  77.     },
  78.     show() {
  79.       // Get display div from document
  80.       var display = document.getElementById("display");
  81.       var _this = this;
  82.       // Instantiate client, using an HTTP tunnel for communications.
  83.       // tunnel
  84.       // 192.168.6.14:8080/tunnel
  85.       //var guac = new Guacamole.Client(
  86.       //new Guacamole.HTTPTunnel("/guacamole/tunnel")
  87.       //);
  88.       this.guac = new Guacamole.Client(
  89.         new Guacamole.WebSocketTunnel(
  90.           "/guacamole/webSocket"
  91.         )
  92.       );
  93.       // Add client to display div
  94.       display.appendChild(this.guac.getDisplay().getElement());
  95.  
  96.       // Error handler message
  97.       this.guac.onerror = function (error) {
  98.         console.log(error);
  99.         _this.resultTitle = error.message;
  100.         _this.showResult = true;
  101.       };
  102.  
  103.       // Connect
  104.       this.guac.connect("height=" +
  105.             display.clientHeight +
  106.             "&width=" +
  107.             display.clientWidth +
  108.             "&id=" +
  109.             this.record.id);
  110.  
  111.       // Disconnect on close
  112.       window.onunload = function () {
  113.         _this.guac.disconnect();
  114.       };
  115.  
  116.       this.guac.onstatechange = function (state) {
  117.         console.log(state);
  118.         if (state == 3) {
  119.           // Mouse
  120.           var mouse = new Guacamole.Mouse(_this.guac.getDisplay().getElement());
  121.  
  122.           mouse.onmousedown =
  123.             mouse.onmouseup =
  124.             mouse.onmousemove =
  125.               function (mouseState) {
  126.                 _this.guac.sendMouseState(mouseState);
  127.               };
  128.  
  129.           // Keyboard
  130.           _this.keyboard = new Guacamole.Keyboard(document);
  131.  
  132.           _this.keyboard.onkeydown = function (keysym) {
  133.             _this.guac.sendKeyEvent(1, keysym);
  134.           };
  135.  
  136.           _this.keyboard.onkeyup = function (keysym) {
  137.             _this.guac.sendKeyEvent(0, keysym);
  138.           };
  139.         }
  140.       };
  141.     },
  142.   },
  143. };
  144. </script>
  145.  
  146.  <style>
  147. #display {
  148.   z-index: 999;
  149.   position: absolute;
  150. }
  151. </style>

连接vnc时 vnc服务修改配置 不然连接不上 原因未知

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/550729
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号