序

项目需求需要在浏览器端进行远程桌面访问，如图所示：

要实现远程桌面，我们需要依靠VNC协议：

VNC(虚拟网络计算)是一种使用RFB协议的屏幕共享和远程操作软件。通过网络，该软件可以发送键盘和鼠标动作以及即时屏幕图片。

相关参考文献很少。从谷歌搜索到的大多数文章都是关于如何使用客户端构建和访问VNC的，很少有嵌入到网络中的。腾讯云有相关功能，但是因为业务安全，我们看不到别人是怎么实现的。

再见，百度。直到用百度查了一下，才知道VNC是口红。

因此，通往VNC的道路实践如下：

根据你现有的知识和技能设计一个VNC方案。尝试分析可行性。根据可行性修改方案细节，或者推翻方案重新设计。

从整体的初步设计到最终的落地方案，经历了以下七个方案的迭代：

SpringBoot调用REALVNC的c类库，前后进行数据交互。失败，因为REALVNC太贵，客户买不起。在SpringBoot中，JavaViewer可以通过模仿tyxvnc来获取数据，前后可以进行数据交互。失败，因为TightVNC JavaViewer的源代码没有注释，无法理解。在SpringBoot中手写VNC客户端，前后数据交互。失败，因为从0实现协议太复杂，时间成本太高。浏览器只做VNC链接，使用本机客户端直接访问主机。失败，需要安装软件，只能访问局域网中的主机。本机客户端的Nginx数据转发。失败，需要安装软件，无法实现动态转发(nginx配置文件无法动态更改)。无vnc nginx数据转发。失败，无法实现动态转发(无法动态更改nginx配置文件)。No-vnc node.js数据转发。成功，完美实现。实现

想

整体思路如下图所示：nginx在前台转发websocket连接，为了实现外网转发，在传输层增加了开发的node.js服务器作为代理，将浏览器终端no-vnc的websocket数据报转发到目标主机。

为什么是nginx？

仔细想想，其实不用nginx也能实现功能。这里使用nginx主要是减少前台和后台架构的耦合。

添加一个网关来转发所有请求，并且只向前台公开一个端口，无论后台使用什么技术、架构或微服务，前台似乎都在访问单个应用程序。

就像现在的ChinaSoft项目，春季开机，net和node.js在后台使用。每种语言和框架都发挥各自的优势，每个模块都通过nginx转发连接。无论后台架构如何变化，对前台都没有影响。这应该是微服务架构的最佳实践。

这是spring推荐的微服务架构图。我们学习并实践了api gateway，spring推荐了网飞zuul，我们使用了nginx，它们在请求转发方面具有相同的性能。

随着业务需求的增长，我们肯定会拆分服务、注册服务、发现服务、对消息进行排队和调用RPC。然后使用eureka、zookeeper、hystrix、feign和其他优秀的开源组件来探索spring-cloud的最佳实践。

求转发到

以前不知道websocket，就是知道名字不知道细节。

Http协议：请求响应，客户端请求，服务器响应，一个请求结束。服务器无法主动将数据推送到客户端。

为了解决这个问题，websocket应运而生。如果显示了，就不详细描述了。

否-vnc

官网链接：noVNC

安装依赖项：

Npm安装@novnc/novnc前台组件

同时在组件中引用的空div。

div class=' container ' # container/div @ view child(' container ')私有容器： elementrefhtmldiverelement；核心代码实际上就是这些行，协议的所有细节都封装在no-vnc中的RFB类中。

所有描述以访问192.168.0.104主机的5900端口为例，websocket地址为：ws ://127。0 .0 .1:8013/VNC/192。168 .0 .13:9001

/** * VNC连接*/private VNCConnect(): void {/* * *访问/VNC/web socket */const URL=` ws :/$ { this。主持人}/VNC/$ {这个。IP } : $ { this。port } `；/** 新建远程控制对象*/this.rfb=新RFB(这。集装箱。本机元素，url，{凭据s : {密码： }此。密码，}，})；/** 添加连接事件监听器*/这个。rfb。addeventlistener(' connect '，()={ this。rfb。焦点()；});}nginx转发

服务器监听本地的8013端口。

ws3360/请求发给了nginx，根据前缀匹配，以/vnc/开头的转发给8112端口。

位置/VNC/{ proxy _ pass http://127。0 .0 .1:8112/;proxy _ http _ version 1.1 proxy _ set _ header Upgrade $ http _ Upgrade；代理集头连接$ connection _ upgrade}node.js转发

node.js监听8112端口，处理当前的求转发到请求。

/** 建立基于vnc_port的求转发到服务器*/const VNC _ server=http。CreateServer()；vnc_server.listen(vnc_port，function(){ const web _ socket _ server=new WebSocketServer({ server : VNC _ server })；web _ socket _ server。on(' connection '，web _ socket _ handler)；});转发的核心代码在方法web _套接字_处理程序中，以下是完整代码：

这里说一句，之前写的注释都不规范，所有注释都应该是文档注释，单行注释使用/** 内容*/的格式。

/** 引入超文本传送协议(超文本传输协议的缩写)包*/const http=require(' http ')；/** 引入网包*/const net=require(' net ')；/** 引入求转发到类*/const WebSocketserver=require(' ws ').服务器；/** 本机互联网协议(互联网协议的缩写)地址*/const localhost=' 127。0 .0 .1 ';/** 开放的vnc websocket转发端口*/const VNC _ port=' 8112 '；/** 打印提示信息*/控制台。日志(` 0成功创建WebSocket代理： $ { localhost } : $ { VNC _ port } `)；/** 建立基于vnc_port的求转发到服务器*/const VNC _ server=http。CreateServer()；vnc_server.listen(vnc_port，function(){ const web _ socket _ server=new WebSocketServer({ server : VNC _ server })；web _ socket _ server。on(' connection '，web _ socket _ handler)；});/** websocket处理器*/const web_socket_handler=函数（客户端，请求){ /**获取请求网址*/常量网址=请求。网址；/** 截取主机地址*/const host=URL。子字符串(URL。“/”1的索引，URL。的索引(' : ')；/** 截取端口号*/常量端口=号码(网址。子字符串(URL。indexof(' : ')1)；/** 打印日志*/console.log(`WebSocket连接： 版本${client.protocolVersion}，协议$ {客户端。protocol } `)；/** 连接到远程桌面服务器*/const target=net。createconnection(端口、主机、函数(){ console.log('连接至目标主机');});/** 数据事件*/target.on('data '，function(data){ try { client。发送(数据))；} catch(错误){ console.log('客户端已关闭，清理到目标主机的连接');目标。end()；} });/** 结束事件*/target.on('end '，function () { console.log('目标主机已关闭');客户。close()；});/** 错误事件*/target.on('error '，function () { console.log('目标主机连接错误');目标。end()；客户。close()；});/** 消息事件*/client.on('message '，function(msg){ target。写(msg)；});/** 关闭事件*/client.on('close '，函数（代码，原因){ console.log(`WebSocket客户端断开连接：$[code][$ { reason }]`)；目标。end()；});/** 错误事件*/client.on('error '，function(error){ console。日志(` WebSocket客户端出错：$ { error } `)；目标。end()；});};总结

为了这个功能犯愁了半个月，觉也睡不好，客户都在腾讯云上看到过的功能，写不出来就特别的难受，如今终于圆满解决。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。