CN103533038A

CN103533038A - 一种基于html5的远程控制系统及其远程控制方法

Info

Publication number: CN103533038A
Application number: CN201310460158.2A
Authority: CN
Inventors: 齐德昱; 林正青; 赵亮星云; 黄俏丹
Original assignee: South China University of Technology SCUT
Current assignee: South China University of Technology SCUT
Priority date: 2013-09-30
Filing date: 2013-09-30
Publication date: 2014-01-22

Abstract

本发明公开的一种基于HTML5开发的远程控制系统，其包括服务器端的，基于远程控制协议的控制服务器1，基于超文本传输协议的代理服务器2和客户端的浏览器3。所述服务器端的控制服务器1提供基于远程控制协议的服务；所述服务器端的代理服务器2连接控制服务器1，提供HTML5远程控制系统界面的相关数据，接受、解析和执行客户端浏览器3的命令；所述客户端的浏览器3，为支持HTML5和AJAX技术的网页浏览器，其通过代理服务器2获取HTML5远程控制系统界面的相关数据，并基于浏览器展示控制界面，向代理服务器2发送命令，控制被控终端。

Description

一种基于HTML5的远程控制系统及其远程控制方法

技术领域

本发明涉及一种远程控制技术，特别涉及一种基于HTML5的远程控制系统及其远程控制方法。

背景技术

随着网络的高度发展，终端的管理及技术支持的需要，远程操作及控制技术越来越引起人们的关注。远程控制软件一般使用TCP协议或UDP协议来实现远程控制。使用TCP协议的远程控制软件的优势是稳定、连接成功率高；缺陷是双方必须有一方具有公网IP（或在同一个内网中），否则就需要在路由器上做端口映射。使用UDP协议远程控制软件的优势是可以利用UDP的打洞原理穿透内网；缺陷是不稳定、连接成功率低。

目前大部分的远程控制软件都必须把远程控制软件分别安装在控制端与被控端，才能达到远程控制的目的。部分远程控制软件提供浏览器来控制终端，然而也需要在浏览器安装必要的插件。

发明内容

本发明的首要目的在于克服现有技术的缺点与不足，提供一种基于HTML5的远程控制系统，该系统大幅度简化了用户进行远程控制的门槛，只需要一个公网的IP地址，就能用远程控制软件控制同一个内网中的电脑。

本发明的另一目的在于克服现有技术的缺点与不足，提供一种实现基于HTML5的远程控制系统的远程控制方法，该方法大幅度简化了用户进行远程控制的门槛，有效避免了不同平台不同设备的限制。

本发明的首要目的通过下述技术方案实现：一种基于HTML5的远程控制系统，包括服务器端的，基于远程控制协议的控制服务器1，基于超文本传输协议的代理服务器2和客户端的浏览器3，基于远程控制协议的控制服务器1，用于提供基于远程控制协议的服务；

基于超文本传输协议的代理服务器2，连接控制服务器1，提供HTML5远程控制系统界面的相关数据，接受、解析和执行浏览器3的命令；

客户端的浏览器3，为支持HTML5和AJAX技术的网页浏览器，其通过代理服务器2获取HTML5远程控制系统界面的相关数据，并基于浏览器展示控制系统界面，向代理服务器2发送命令，控制被控终端。

进一步，所述客户端的浏览器3包括：

基于HTML5开发的网页程序组件4，用于构建和显示基于HTML5开发的远程控制系统界面；

基于JavaScript开发的网页程序组件5，用于与接口服务器进行通信，获取用于显示远程控制系统界面的相关数据；

基于层叠样式表单（CSS）开发的网页程序组件6，用于与基于JavaScript开发的网页程序组件协同控制在浏览器中进行远程控制时系统界面。

进一步，所述基于HTML5开发的网页程序组件4通过和基于层叠样式表单（CSS）开发的网页程序组件6联合使用以适应不同显示分辨率的设备。

本发明的另一目的通过以下技术方案实现：一种实现基于HTML5的远程控制系统的远程控制方法，包括如下步骤：

步骤一、在被控终端安装基于远程控制协议的控制服务器,提供基于远程控制协议的服务；

步骤二、将基于超文本传输协议的代理服务器连接基于远程控制协议的控制服务器并提供HTML5远程控制系统界面的相关数据，接受、解析和执行客户端浏览器的命令；

步骤三、通过客户端的浏览器访问基于超文本传输协议的代理服务器，通过代理服务器获取HTML5远程控制系统界面的相关数据，并基于浏览器展示控制系统界面，向代理服务器发送命令，控制被控终端。

进一步，在步骤一中，控制服务器提供的远程控制协议服务为RFB协议服务或RDP协议服务。

进一步，在步骤二中，代理服务器连接基于远程控制协议的控制服务器，将控制服务器的数据流以png格式图片的方式进行编码，提供HTML5控制系统用户界面的相关数据为Base64编码的png格式图片数据；代理服务器接受客户端浏览器的命令为xml格式。

进一步，在步骤三中，用客户端的浏览器中基于JavaScript开发的网页程序组件与接口服务器进行通信，获取用于显示远程控制系统界面的相关数据；使用基于HTML5开发的网页程序组件构建和显示基于HTML5开发的远程控制系统界面；并使用基于层叠样式表单（CSS）开发的网页程序组件与基于JavaScript开发的网页程序组件协同控制在浏览器中进行远程控制时系统界面。

进一步，本通过联合使用基于HTML5开发的网页程序组件和基于层叠样式表单（CSS）开发的网页程序组件以适应不同显示分辨率的设备。

本发明相对于现有技术具有如下的优点及效果：

1、本发明通过使用代理服务器技术，只需要一个公网的IP地址（或在同一个内网中），就能用远程控制软件控制同一个内网中的电脑。

2、本发明还可以通过利用代理服务器对数据进行加工处理，降低客户端的复杂性，提高响应速度。客户端只需要一个支持HTML5和AJAX技术的网页浏览器，无需安装插件，这大幅度简化了用户进行远程控制的门槛，有效避免不同平台不同设备的限制。

附图说明

图1是本发明所述基于HTML5协议的远程控制系统的整体功能架构图。

图2是本发明所述基于HTML5协议的远程控制客户端的架构图。

具体实施方式

下面结合实施例及附图对本发明作进一步详细的描述，但本发明的实施方式不限于此。

实施例

HTML5本身是由W3C推荐出来的，是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本，它希望能够减少浏览器对于需要插件的丰富网络应用服务的需求，并且提供更多能有效增强网络应用的标准集。这个技术最大的好处在于它是一个公开的技术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。使用HTML5的优点在于，这个技术可以进行多设备、跨平台的使用。

代理服务器其功能就是代理网络用户去取得网络信息。代理服务器是介于浏览器和控制服务器之间的一台服务器，有了它之后，浏览器不是直接访问控制服务器而是向代理服务器发出请求，请求信号会先送到代理服务器，由代理服务器来取回浏览器所需要的信息并传送给浏览器。使用代理服务器的优点是可以增加缓冲器，对数据进行预处理，提高访问速度；可以连接内网与Internet，充当防火墙；可以节省IP开销，只需代理服务器上有一个公网的IP地址，内网的其他用户可以使用私有的IP地址。

本发明正是基于现有的HTML5技术、CSS技术以及JavaScript脚本技术以及代理服务器来实现的基于HTML5开发的远程控制系统以及基于HTML5技术进行远程控制的方法，其允许用户可以通过浏览器访问代理服务器控制内网所有终端。而一般的远程控制软件一般需要远程控制软件分别安装在控制端与被控端，且一个被控终端需要一个公网的IP地址。

为使本发明的上述目的、特征和优点更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明：

如图1所示，是本发明所述基于HTML5协议的远程控制系统的整体功能架构图，基于HTML5协议的远程控制系统的整体架构包括服务器端的，基于远程控制协议的控制服务器1，基于超文本传输协议的代理服务器2和客户端的浏览器3，其中：

基于远程控制协议的控制服务器1，提供基于远程控制协议的服务,远程控制协议为RFB协议或RDP协议。

基于超文本传输协议的代理服务器2，连接控制服务器1，将控制服务器的数据流以png格式图片的方式进行编码，以Base64编码格式返回客户端浏览器；接受客户端浏览器xml格式的命令，解析、转换为控制服务器1相应的命令格式，调用控制服务器1执行命令控制终端。通过使用代理服务器技术，使得只需要一个公网的IP地址（或在同一个内网中），就能用远程控制软件控制同一个内网中的电脑。除此之外，还可以通过利用代理服务器对数据进行加工处理，降低客户端的复杂性，提高响应速度。

客户端为Web浏览器4，属于在本地应用程序中访问Web的内置程序组件（控件），其包括：JavaScript组件5，用来与接口服务器进行通信，获取用于显示控制系统界面的相关数据或资源；CSS组件6，用来与JavaScript组件协同控制在浏览器中进行HTML5进行远程控制时系统界面；HTML组件4，用于构建和显示基于HTML5开发的远程控制系统界面，通过和CSS组件6联合使用，可以对不同显示分辨率的设备均有良好的显示效果。

如图2所示，是本发明所述基于HTML5协议的远程控制客户端的架构图，整个客户端使用WEB技术构建，UI交互使用HTML、CSS、JavaScript技术来实现。控制系统界面使用HTML5的Canvas标签实现绘制。Canvas标签是HTML5标准的组成部分之一。浏览器如果支持HTML5的Canvas标签，就可以在浏览器中直接绘制图像。浏览器控件一般是开发套件自带的控件，不用额外进行开发，通过浏览器直接使用，不用进行任何安装，更新，配置，具有良好的设备兼容性和跨平台特性，同时在多种设备兼容和适配方面有更好的表现。HTML5是一个开放的标准，只要浏览器遵循这个标准理论上就可以正常使用。

本发明具体应用方式如下：

1、用户打开浏览器，输入HTML5远程控制系统的URL地址。

2、HTML5远程控制系统启动开始，显示启动控制验证界面。

3、在控制验证界面输入验证码，即可直接获得连接，同时通过代理服务器获得显示主页界面的相关初始化数据。

4、数据初始化完毕进入主显示界面，同时提示用户可以把该入口URL地址，添加到桌面主屏幕或书签以便更方便的使用。

5、在主显示界面查看终端信息或输入命令控制终端。

本发明的具体应用案例如下：

用户使用HTML5远程控制客户端控制终端：

服务器端包括：基于远程控制协议控制服务器，提供基于远程控制协议的服务；超文本传输协议的代理服务器，连接控制服务器，将控制服务器的数据流以png格式图片的方式进行编码，以Base64编码格式返回客户端浏览器；接受客户端浏览器xml格式的命令，解析、转换为控制服务器相应的命令格式，调用控制服务器执行命令控制终端。对于HTML5远程控制系统，可以先在终端安装控制服务器，在终端的内网中选择一台机器安装代理服务器，代理服务器连接控制服务器，并将该代理服务器接入Internet。

客户端（手机，平板PAD）：用于支持浏览器应用，并设置好wlan或3G连接网络。

交互使用过程如下：

用户通过客户端的浏览器访问HTML5远程控制系统的URL地址，代理服务器收到客户端的请求将控制服务器器的数据加工处理，通过Internet传输给客户端的浏览器，在浏览器端通过HTML5的Canvas标签绘制图像。用户选择输入某一控制命令，控制系统通过JavaScript及Ajax向代理服务器发送请求，代理服务器调用控制服务器执行相应命令并将控制服务器的执行结果返回客户端。

以上是对本发明的优选实施例进行的详细描述，但本领域的普通技术人员应该意识到，在本发明的范围内和精神指导下，各种改进、添加和替换都是可能的，例如调整接口调用顺序、使用不同的编程语言（如C、C#、Java等）实现等，这些都在本发明的权利要求所限定的保护范围内。

上述实施例为本发明较佳的实施方式，但本发明的实施方式并不受上述实施例的限制，其他的任何未背离本发明的精神实质与原理下所作的改变、修饰、替代、组合、简化，均应为等效的置换方式，都包含在本发明的保护范围之内。

Claims

1.一种基于HTML5的远程控制系统，包括基于远程控制协议的控制服务器（1），基于超文本传输协议的代理服务器（2）和客户端的浏览器（3），其特征在于：

所述控制服务器（1）用于提供基于远程控制协议的服务；

所述代理服务器（2）与控制服务器（1）相连接，用于提供HTML5远程控制系统界面的相关数据，接受、解析和执行浏览器（3）的命令；

所述浏览器（3）为支持HTML5和AJAX技术的网页浏览器，所述浏览器（3）通过代理服务器（2）获取HTML5远程控制系统界面的相关数据，并基于浏览器展示控制系统界面，向代理服务器（2）发送命令，控制被控终端。

2.根据权利要求1所述的基于HTML5的远程控制系统，其特征在于，所述浏览器（3）包括：

基于HTML5开发的网页程序组件（4），用于构建和显示基于HTML5开发的远程控制系统界面；

基于JavaScript开发的网页程序组件（5），用于与接口服务器进行通信，获取用于显示远程控制系统界面的相关数据；

基于层叠样式表单开发的网页程序组件（6），用于与基于JavaScript开发的网页程序组件协同控制在浏览器中进行远程控制时的系统界面。

3.根据权利要求1所述的基于HTML5的远程控制系统，其特征在于，所述网页程序组件（4）通过和网页程序组件（6）联合使用以适应不同显示分辨率的设备。

4.一种实现权利要求1所述的基于HTML5的远程控制系统的远程控制方法，其特征在于，包括如下步骤：

步骤二、将代理服务器连接上控制服务器，并提供HTML5远程控制系统界面的相关数据，接受、解析和执行客户端浏览器的命令；

步骤三、通过客户端的浏览器访问代理服务器，通过代理服务器获取HTML5远程控制系统界面的相关数据，并基于浏览器展示控制系统界面，向代理服务器发送命令，控制被控终端。

5.根据权利要求4所述的远程控制方法，其特征在于，在步骤一中，控制服务器提供的远程控制协议服务为RFB协议服务或RDP协议服务。

6.根据权利要求4所述的远程控制方法，其特征在于，在步骤二中，代理服务器连接控制服务器，将控制服务器的数据流以png格式图片的方式进行编码，提供HTML5控制系统用户界面的相关数据为Base64编码的png格式图片数据；代理服务器接受客户端浏览器的命令为xml格式。

7.根据权利要求4所述的远程控制方法，其特征在于，在步骤三中，用客户端的浏览器中基于JavaScript开发的网页程序组件与接口服务器进行通信，获取用于显示远程控制系统界面的相关数据；使用基于HTML5开发的网页程序组件构建和显示基于HTML5开发的远程控制系统界面；并使用基于层叠样式表单开发的网页程序组件与基于JavaScript开发的网页程序组件协同控制在浏览器中进行远程控制时系统界面。

8.根据权利要求7所述的远程控制方法，其特征在于，通过联合使用基于所述HTML5开发的网页程序组件和基于层叠样式表单开发的网页程序组件以适应不同显示分辨率的设备。