no-vnc和node.js实现web远程桌面的完整步骤

no-vnc和实现web远wps分页 程桌⾯的完整步骤

引⾔

项⽬需求，要求在浏览器端进⾏远程桌⾯的访问，如图所⽰：

实现远程桌⾯，需要依赖VNC协议：

VNC（Virtual Network Computing），为⼀种使⽤RFB协议的屏幕画⾯分享及远程操作软件。此软件借由⽹络，可发送键盘

与⿏标的动作及即时的屏幕画⾯。

相关的参考⽐较少，去⾕歌搜索出来的⽂章⼤多都是如何使⽤客户端进⾏VNC的搭建与访问，很少有将其内嵌到web⾥的，

腾讯云有相关的功能，但因为业务安全性，咱也看不着⼈家咋实现的。

再见，百度。⽤百度查了⼀次之后，我才知道原来VNC是⼝红。

所以VNC实践之路就是如下流程：

1. 根据⾃⼰已有的知识与技能，设计⼀个VNC⽅案。

2. 尝试，分析可⾏性。

3. 根据可⾏性修改⽅案细节，或推翻⽅案重新设计。

从整体的最开始设计，到最终落地⽅案，⼤约经历了以下七个⽅案的迭代：

1. SpringBoot调⽤REALVNC的C++类库，前后台进⾏数据交互。失败，因为REALVNC太贵了，客户承受不起。

2. SpringBoot中模仿TightVNC实现JavaViewer获取数据，前后台进⾏数据交互。失败，因为TightVNC JavaViewer的源

码没注释，看不懂。

3. SpringBoot中⼿写VNC客户端，前后台数据交互。失败，因为从0实现⼀个协议太复杂了，时间成本太⾼。

4. 浏览器端只做VNC链接，使⽤原⽣客户端，直接访问主机。失败，需要安装软件，且只能访问局域⽹中的主机。

5. 原⽣客户端 + nginx数据转发。失败，需要安装软件，⽆法实现动态转发(⽆法动态变更nginx配置⽂件)。

6. no-vnc + nginx数据转发。失败，⽆法实现动态转发(⽆法动态变更nginx配置⽂件)。

7. no-vnc + 数据转发。成功，完美实现。

实现

思想

整体思想如下图所⽰：nginx转发前台的websocket连接，为了实现外⽹转发，添加开发的服务器作为代理，将浏览器

端no-vnc的websocket数据报在运输层转发给⽬标主机。

why nginx ?

如果思考过的话，其实发现不⽤nginx也能实现功能，这⾥使⽤nginx主要是减少了前台对后台架构的耦合。

添加⽹关转发所有请求，对前台只暴露⼀个端⼝，不管后台⽤什么技术，⽤什么架构，⽤什么微服务，在前台看来，就好像在

访问单体应⽤⼀样。

就像⽬前的华软项⽬⼀样，后台⽤了spring-boot、、，各语⾔各框架发挥各⾃的优势，通过nginx的转发将各模块

连接起来，⽆论后台的架构怎么变，对前台毫⽆影响，这应该是微服务架构的最佳实践。

这是spring官⽅推荐的微服务架构图，我们学习并实践了api⽹关，spring推荐netflix zuul，我们⽤的n增肥好方法 ginx，在请求转发上，

⼆者性能不相上下。

随着业务需求的增长，我们肯定也会服务拆分，服务注册，服务发现，消息队列，RPC调⽤。然后⽤上eureka、zookeeper、

hystrix、feign等⼀个个优秀的开源组件，⼀起探索spring-cloud的最佳实践。

websocket

之前⼀直不了解websocket，就是知道个名，具体细节没有学习。

http协议：请求响应，客户端请求，服务器响应，⼀次请求就结束。服务端⽆法主动向客户端推送数据。

为了解决这个问题，websocket应运⽽⽣。如果所⽰，不做赘述。

no-vnc

官⽹链接：

安装依赖：

npm install @novnc/novnc

前台组件

⼀个空div，同时在组件中引⽤。

@ViewChild('container')

private container: ElementRef从容不迫的反义词 ;

核⼼的代码其实就这⼏⾏，所有协议的细节都被封装在no-vnc中的RFB类中了。

所有描述以访问192.168.0.104主机的5900端⼝为例，websocket地址为：ws://127.0.0.1:8013/vnc/192.168.0.104:5900。

/**

* VNC连接

*/

private VNCConnect(): void {

/** 访问 /vnc/ websocket */

const url = `ws://${}/vnc/${}:${}`;

/** 新建远程控制对象 */

= new RFB(Element, url, {

credentials: {

password: rd,

},

});

/** 添加connect事件监听器 */

ntListener('connect', () => {

();

});

}

nginx 转发

nginx监听本地的8013端⼝。

ws://127.0.0.1:8013/vnc/192.168.0.104:5900请求发给了nginx，根据前缀匹配，以/vnc/开头的转发给8112端⼝。

location /vnc/ {

proxy_pass 127.0.0.1:8112/;

proxy_http_version 1.1;

proxy_t_header Upgrade $http_upgrade;

proxy_t_header Connection $connection_upgrade;七上生物

}

转发

监听8112端⼝，处理当前的websocket请求。

/**关于坚持的故事 建⽴基于 vnc_port 的 websocket 服务器 */

const vnc_rver = Server();

vnc_(vnc_port, function () {

const web_socket_rver = new WebSocketServer({rver: vnc_rver});

web_socket_('connection', web_socket_handler);

});

转发的核⼼代码在⽅法web_socket_handler中，以下是完整代码：

这⾥说⼀句，之前写的注释都不规范，所有注释都应该是⽂档注释，单⾏注释使⽤/**自制山楂酱 内容 */的格式。

/** 引⼊ http 包 */

const http = require('http');

/** 引⼊ net 包 */

const net = require('net');

/** 引⼊ websocket 类 */

const WebSocketServer = require('ws').Server;

/** 本机 ip 地址 */

const localhost = '127.0.0.1';

/** 开放的 vnc websocket 转发端⼝ */

const vnc_port = '8112';

/** 打印提⽰信息 */

(`成功创建 WebSocket 代理 : ${localhost} : ${vnc_port}`);

/** 建⽴基于 vnc_port 的 w万圣节简介 ebsocket 服务器 */

const vnc_rver = Server();

vnc_(vnc_port, function () {

const web_socket_rver = new WebSocketServer({秋天的怀念教案 rver: vnc_rver});

web_socket_('connection', web_socket_handler);

});

/** websocket 处理器 */

const web_socket_handler = function (client, req) {

/** 获取请求url */

const url = ;

/** 截取主机地址 */

const host = ing(f('/') + 1, f(':'));

/** 截取端⼝号 */

const port = Number(ing(f(':') + 1));

/** 打印⽇志 */

(`WebSocket 连接 : 版本 ${olVersion}, 协议 ${ol}`);

/** 连接到 VNC Server */

const target = Connection(port, host, function () {

('连接⾄⽬标主机');

});

/** 数据事件 */

('data', function (data) {

try {

(data);

} catch (error)extra {

('客户端已关闭，清理到⽬标主机的连接');

();

}

});

/** 结束事件 */

('end', function () {

('⽬标主机已关闭');

();

});

/** 错误事件 */

('error', function () {

('⽬标主机连接错误');

();

();

});

/** 消息事件 */

('message', function (msg) {

(msg);

});

/** 关闭事件 */

('clo', function (code, reason) {

(`WebSocket 客户端断开连接：$[code] [${reason}]`);

();

});

/** 错误事件 */

('error', function (error) {

(`WebSocket 客户端出错：${error}`);

();

});

};

总结

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

好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀

持。