一种客户端程序嵌入浏览器的装置和方法与流程

1.本发明涉及浏览器领域，尤其涉及一种客户端程序嵌入浏览器的装置和方法。


背景技术：

2.术语解释：html5：简称h5，它是构建web内容的一种语言描述方式。html5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一;html5浏览器：支持html5技术的浏览器，目前主流浏览器都支持html5技术，如edge、火狐、谷歌等;canvas (绘图画布)元素：可以实现画布功能，该元素通过自带的api结合使用j进程avascript脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用javascript可以控制其每一个像素;textarea元素：html5文本输入元素；客户端程序：为客户提供本地服务的程序；gui：图形用户界面（graphical user interface，简称 gui，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面；
3.现有技术方案：传统客户端程序不能直接嵌入浏览器，必须按照不同浏览器插件接口规范要求，开发对应的插件模块，如ie浏览器支持activex插件，chrome浏览器支持ppapi插件，firefox浏览器支持npapi插件。近年来随着网络安全的重视，越来越多浏览器产品已经不再支持客户端插件，截止当前chrome及firefox浏览器都停止了客户端插件支持，曾经强大的ie浏览器也已经退出历史舞台；浏览器html5技术虽然强大，但是仍旧有一些功能实现不了，尤其涉及本地资源访问和复杂gui交互的应用，如访问计算机外部设备及pdf、ofd、office大型办公软件的应用。所以，虽然越来越多的企业转向开发基于h5网页版产品，但是，同时保留客户端产品，这样造成企业研发资源的重复投放，增加了软件产品开发资金和时间成本。此外，由于不同浏览器h5技术支持参差不齐，导致基于h5网页版产品在不同浏览器效果不一致，也限制了大型基于h5的网页版产品应用，总体来讲，基于h5的网页版产品相比客户端产品功能弱很多；基于h5的网页版产品源码安全性差，相比客户端程序，更容易被破解，不利于软件源码保护；专利《一种浏览器加载插件的装置和方法》(专利号：2022110742638)提供了一种存量浏览器插件如何在浏览器里使用的装置和方法。但其程序结构设计复杂，且需要实时采集窗口桌面图像，占用较多资源。此外插件开发需要满足不同浏览器插件规范，增加了学习和开发成本；传统客户端程序采用系统自带窗口来展示图形用户界面，在windows系统中，只有
当客户端程序窗口在前台展示，才可以通过设备dc获取窗口界面图像；当客户端程序窗口隐藏时，系统无法获取窗口界面图像。客户端程序嵌入浏览器应用中，客户端程序需要后台隐藏运行，导致采用常规方法无法获取客户端程序窗口界面图像；因此，急需一种保留客户端程序图形用户界面操作习惯，且客户端程序能够嵌入浏览器的装置和方法;尤其地，需要一种同时适应客户端嵌入不同浏览器的装置和方法;


技术实现要素：

4.本发明克服现有技术及专利《一种浏览器加载插件的装置和方法》(专利号：2022110742638)的不足，提供了一种客户端程序嵌入浏览器的装置和方法。
5.一种客户端程序嵌入浏览器的装置，其特征在于包括浏览器交互子系统、客户端管理服务子系统及客户端子系统；所述浏览器交互子系统运行在浏览器端，采用浏览器都支持的html5技术实现。采用html5canvas绘图元素展示客户端界面图像，监听canvas区域展示区域鼠标输入事件；利用textarea元素监听键盘输入事件；采用javascript技术调用客户端子系统接口方法和事件封装；采用websocket及http通信技术与所述客户端管理服务子系统通信；所述客户端管理服务子系统是所述浏览器交互子系统与所述客户端子系统的桥梁；维持客户端管理服务子系统与客户端子系统之间的对应关系，是整个装置的数据交互中枢；所述客户端子系统解析所述浏览器交互子系统发送过来的客户端接口调用命令数据包，并返回执行结果，实现客户端接口方法远程调用；解析所述浏览器交互子系统发送过来的鼠标键盘输入事件命令数据包，调用成客户端子系统的鼠标键盘响应函数；为所述浏览器交互子系统推送实时客户端界面局部更新图像，使用户操作所述浏览器交互子系统，就像操作客户端本身；推送客户端触发事件。
6.优选地，所述浏览器交互子系统包括gui界面展示模块、gui鼠标键盘监听模块、jsobj模块及网络模块。其特征如下：所述gui界面展示模块处理所述网络模块转发过来的客户端界面图像命令数据包p，并将其解析成图像及更新区域坐标。gui界面展示模块由浏览器html5canvas元素组成，利用canvas元素绘制图像的功能，将前述图像pic在指定区域展示出来，实现客户端界面在浏览器运行的效果；所述gui鼠标键盘监听模块由浏览器html5canvas和textarea元素组成，textarea元素依附在canvas之上，采集canvas区域鼠标和键盘输入事件，调用所述网络模块接口，将前述鼠标和键盘事件封装成鼠标键盘输入命令数据包，经所述客户端管理服务子系统，发送给所述客户端子系统；所述jsobj模块将客户端子系统的接口方法和事件封装成javascript类jsplugin，简化业务系统调用客户端子系统的难度。前述javascript类jsplugin将客户端对象标识、请求接口方法及其参数，封装客户端调用命令数据包，通过所述网络模块采用http网络请求发送给所述客户端管理服务子系统；处理所述网络模块接收客户端调用返回命令数据包，获取客户端程序接口方法返回结果；
所述网络模块提供网络数据的发送和接收接口。浏览器网络模块提供web socket通信及http通信。web socket提供异步通信机制，是客户端事件、客户端界面图像推送优先通信机制。http通信采用同步的方式，适用于所述jsobj模块调用客户端接口方法。
7.优选地，所述客户端管理服务子系统包括web服务、客户端程序管理模块、安全策略模块及i/o通信模块。其特征如下：所述web服务提供web socket及http服务。为所述客户端管理服务子系统和所述浏览器交互子系统建立网络链接；使命令数据包能在两者之间有序交互；所述客户端程序管理模块用于管理所述客户端子系统，实现所述客户端子系统启动、维护、调度和销毁；维持web服务链接与所述客户端子系统对应关系；维持所述浏览器交互子系统和所述客户端子系统之间数据包转发，将网络包转成i/o通信数据包，将i/o通信数据包转换成网络包；所述安全策略模块在客户端启动之前，对客户端程序安全性进行验证。只有通过安全策略验证的客户端程序才允许启动；未通过安全策略验证的客户端程序不允许启动；所述i/o通信模块采用管道或内存共享等方式，支持同步和异步通信方式，实现与所述客户端子系统之间数据包交互，其提供发送接口，实现数据包发送；其提供接收接口，实现数据包初步解封，转发给对应的处理模块。
8.优选地，所述客户端子系统包括客户端i/o通信模块、gui鼠标键盘响应模块、gui图形用户界面模块及功能接口模块。其特征如下：所述客户端i/o通信模块采用管道或内存共享等方式，支持同步和异步通信方式，实现与所述客户端管理服务子系统之间数据包交互。其提供发送接口，实现数据包发送；其提供接收接口，实现数据包初步解封，转发给对应的处理模块；所述gui鼠标键盘响应模块解析所述客户端i/o通信模块转发过来的鼠标键盘输入事件命令数据包，调用客户端对应的鼠标键盘输入事件响应函数；所述gui图形用户界面模块仅在用户界面更新时，获取更新区域界面图像，调用客户端i/o通信模块发送接口，将其推送给浏览器交互子系统，浏览器交互子系统展示图像，使客户端界面图像最终在浏览器页面渲染展示，从而用户能够通过浏览器网页查看客户端程序界面；进一步，所述gui图像用户界面模块在缓存位图内绘制用户界面。客户端程序独立运行时，响应窗口界面刷新消息，将缓存位图绘制到窗口；通过所述客户端管理服务子系统启动客户端子系统时，客户端子系统将在后台无窗口运行；当用户界面更新时，缓存位图更新局部区域图像，然后推送到浏览器交互子系统；所述功能接口模块负责客户端事件触发及客户端接口调用；解析所述客户端i/o通信模块转发过来的客户端接口调用命令数据包，调用客户端程序对应的接口方法，并将处理结果封装成数据包，原路返回所述客户端管理服务子系统；处理客户端触发事件，将其封装成客户端事件命令数据包，通过所述客户端i/o通信模块(i)推送给所述客户端管理服务子系统。
9.一种客户端程序嵌入浏览器的方法，其特征在于：浏览器展示客户端程序界面图像的方法。
10.优选地，所述浏览器展示客户端程序界面的方法，包括以下步骤：
步骤一、客户端界面更新：当用户界面更新时，图形用户界面直接在缓存位图内绘制，并记录绘制区域坐标、大小及更新图像内容；步骤二，更新区域图像数据包封装：将上述图像进行编码，生成图像编码数据。其将所述客户端子系统(cs)标识pid、界面图像命令类型、图像编码数据、更新区域坐标打包成数据包p10；步骤三，数据包路由：所述客户端i/o通信模块将数据包p10，发送给所述i/o通信模块。所述i/o通信模块解析数据包p10，根据界面图像命令类型，将数据包p10转发给所述客户端程序管理模块。所述客户端程序管理模块解析数据包p10，获取客户端子系统标识pid，通过客户端子系统标识pid，获取所述网络模块与所述web服务的web socket链接sock。 将数据包p10通过web socket链接sock发送给所述网络模块；步骤四，客户端界面图像展示：所述网络模块解析数据包p10之后，根据界面图像命令类型、坐标位置，调用所述gui界面展示模块显示方法，将图像编码数据渲染在浏览器canvas元素指定区域上，从而实现客户端在浏览器页面运行的效果。
本发明有益效果
11.由于主流浏览器都支持html5技术，所以本发明可以创造性的解决客户端程序嵌入浏览器页面，且保持原有客户端程序图形用户界面操作习惯。
12.客户端程序只需开发一套，即可以独立运行，也可以后台运行嵌入浏览器展示图形用户界面。减少了开发人员学习不同浏览器插件知识时间，降低了产品开发成本，提升开发效率。
13.客户端程序图形用户界面运转效率更高，不需要高频周期性截屏，仅需要在图形用户界面更新时，更新局部图像界面区域，提升了图形用户界面运转效率更高和稳定性。
14.避免同时开发多种形态（h5网页版和客户端版）的相似产品，降低公司产品成本开发投入。
附图说明
15.图1是本发明的结构原理图。
16.图2是本发明浏览器展示客户端界面图像的流程图。
实施方式
17.下面将结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
18.一种客户端程序嵌入浏览器的装置，其特征在于包括浏览器交互子系统(bs)、客户端管理服务子系统(cms)及客户端子系统(cs) 所述浏览器交互子系统(bs)运行在浏览器端，采用浏览器都支持的html5技术实现。采用html5 canvas绘图元素展示客户端界面图像，监听canvas区域展示区域鼠标输入事件；利用textarea元素监听键盘输入事件；采用javascript技术调用客户端子系统（cs）接口方法和事件封装；采用web socket及http通信技术与所述客户端管理服务子系统(cms)通信；
所述客户端管理服务子系统(cms)是所述浏览器交互子系统(bs)与所述客户端子系统(cs)的桥梁；维持客户端管理服务子系统(cms)与客户端子系统(cs)之间的对应关系，是整个装置的数据交互中枢；所述客户端子系统(cs)解析所述浏览器交互子系统(bs)发送过来的客户端接口调用命令数据包，并返回执行结果，实现客户端接口方法远程调用；解析所述浏览器交互子系统(bs)发送过来的鼠标键盘输入事件命令数据包，调用成客户端子系统的鼠标键盘响应函数；为所述浏览器交互子系统(bs)提供实时客户端界面图像，使用户操作所述浏览器交互子系统(bs)，就像操作客户端本身；推送客户端触发事件。
19.优选地，所述浏览器交互子系统(bs)包括gui界面展示模块(a)、gui鼠标键盘监听模块(b)、jsobj模块(c)及网络模块(d)。其特征如下：所述gui界面展示模块(a)处理所述网络模块(d)转发过来的客户端界面图像命令数据包p，并将其解析成图像pic。gui界面展示模块(a)由浏览器html5canvas元素组成，利用canvas元素绘制图像的功能，将前述图像pic在指定区域展示出来，实现客户端界面在浏览器运行的效果；所述gui鼠标键盘监听模块(b)由浏览器html5canvas和textarea元素组成，textarea元素依附在canvas之上，采集canvas区域鼠标和键盘输入事件，调用所述网络模块(d)接口，将前述鼠标和键盘事件封装成鼠标键盘输入命令数据包，经所述客户端管理服务子系统(cms)，发送给所述客户端子系统(cs)；所述jsobj模块(c)将客户端子系统(cs)的接口方法和事件封装成javascript类jsplugin，简化业务系统调用客户端子系统(cs)的难度。前述javascript类jsplugin将客户端对象标识、请求方法及其参数，封装客户端调用命令数据包，通过所述网络模块(d)采用http网络请求发送给所述客户端管理服务子系统(cms)；处理所述网络模块(d)接收客户端调用返回命令数据包，获取客户端接口方法返回结果；所述网络模块(d)提供网络数据的发送和接收接口。浏览器网络模块提供websocket通信及http通信。websocket提供异步通信机制，是客户端事件、客户端界面图像推送优先通信机制。http通信采用同步的方式，适用于所述jsobj模块调用客户端程序接口方法。
20.优选地，所述客户端管理服务子系统(cms)包括web服务（e）、客户端程序管理模块（f）、安全策略模块（g）及i/o通信模块（h）。其特征如下： 所述web服务（e）提供websocket及http服务。为所述客户端管理服务子系统(cms)和所述浏览器交互子系统(bs)建立网络链接；使命令数据包能在两者之间有序交互；所述客户端程序管理模块（f）用于管理所述客户端子系统(cs)，实现所述客户端子系统(cs)启动、维护、调度和销毁；维持web服务链接与所述客户端子系统(cs)对应关系；维持所述浏览器交互子系统(bs)和所述客户端子系统(cs)之间数据包转发；将网络包转成i/o通信数据包，将i/o通信数据包转换成网络包；所述安全策略模块（g）在客户端启动之前，对客户端程序安全性进行验证。只有通过安全策略验证的客户端程序才允许启动；未通过安全策略验证的客户端程序不允许启动；所述i/o通信模块（h）采用管道或内存共享等方式，支持同步和异步通信方式，实
现与所述客户端子系统(cs)之间数据包交互，其提供发送接口，实现数据包发送；其提供接收接口，实现数据包初步解封，转发给对应的处理模块。
21.优选地，所述客户端子系统(cs)包括客户端i/o通信模块(i)、gui鼠标键盘响应模块(j)、gui图形用户界面模块(k)及功能接口模块(l)。其特征如下：所述客户端i/o通信模块(i)采用管道或内存共享等方式，支持同步和异步通信方式，实现与所述客户端管理服务子系统(cms)之间数据包交互。其提供发送接口，实现数据包发送；其提供接收接口，实现数据包初步解封，转发给对应的处理模块；所述gui鼠标键盘响应模块(j)解析所述客户端i/o通信模块(i)转发过来的鼠标键盘输入事件命令数据包，调用客户端对应的鼠标键盘输入事件响应函数；所述gui图形用户界面模块(k) 仅在用户界面更新时，获取更新区域界面图像，调用客户端i/o通信模块(i)发送接口，将其推送给浏览器交互子系统(bs)，浏览器交互子系统(bs)展示图像，使客户端程序界面图像最终在浏览器页面渲染展示，从而用户能够通过浏览器网页查看客户端程序界面；具体地，在windows平台下，客户端程序窗口隐藏时，设备dc绘制失效，客户端程序无法获取更新区域界面图形；具体地，所述gui图像用户界面模块(k)在缓存位图内绘制用户界面。客户端程序独立运行时，响应窗口刷新消息，将缓存位图绘制到窗口；通过所述客户端管理服务子系统(cms)启动客户端子系统(cs)时，客户端子系统(cs)将在后台无窗口运行；当用户界面更新时，缓存位图更新局部区域图像，然后推送到浏览器交互子系统(bs)展示；具体地，所述gui图像用户界面模块(k)采用跨平台skia图形库作为图形界面引擎；所述功能接口模块(l)负责客户端事件触发及客户端接口调用；解析所述客户端i/o通信模块(i)转发过来的客户端接口调用命令数据包，调用客户端程序对应的接口方法，并将处理结果封装成数据包，原路返回所述客户端管理服务子系统(cms)；处理客户端程序触发事件，将其封装成客户端程序事件命令数据包，通过所述客户端i/o通信模块(i)推送给所述客户端管理服务子系统(cms)。
22.一种客户端程序嵌入浏览器的方法，其特征在于：包含浏览器展示客户端界面的方法。
23.优选地，所述浏览器展示客户端界面的方法，包括以下步骤：步骤一、客户端界面更新：当用户界面更新时，图形用户界面直接在缓存位图内绘制，并记录绘制区域坐标、大小及更新界面图像内容；步骤二，更新区域图像数据包封装：将上述图像进行编码，生成图像编码数据。其将所述客户端子系统(cs)标识pid、界面图像命令类型、图像编码数据、更新区域坐标打包成数据包p10；步骤三，数据包路由：所述客户端i/o通信模块(i)将数据包p10，发送给所述i/o通信模块（h）。所述i/o通信模块（h）解析数据包p10，根据界面图像命令类型，将数据包p10转发给所述客户端程序管理模块（f）。所述客户端程序管理模块（f）解析数据包p10，获取客户端子系统（cs）标识pid，通过客户端子系统（cs）标识pid，获取所述网络模块(d)与所述web服务(e)的web socket链接sock。 将数据包p10通过web socket链接sock发送给所述网络
模块(d)；步骤四，客户端界面图像展示：所述网络模块(d)解析数据包p10之后，根据界面图像命令类型、坐标位置，调用所述gui界面展示模块(a)显示方法，将图像编码数据渲染在浏览器canvas元素指定区域上，从而实现客户端在浏览器页面运行的效果。

技术特征：
1.一种客户端程序嵌入浏览器的装置，其特征在于包括：客户端子系统。2.根据权利要求1所述客户端子系统，其特征在于包括客户端i/o通信模块、gui鼠标键盘响应模块、gui图形用户界面模块及功能接口模块；根据权利要求2所述客户端i/o通信模块，其特征在于：支持同步和异步通信方式，实现与所述客户端管理服务子系统数据包交互；其提供发送接口，实现数据包发送；其提供接收接口，实现数据包初步解封，转发发给对应的处理模块；根据权利要求2所述gui鼠标键盘响应模块，其特征在于：解析所述客户端i/o通信模块命令，调用鼠标键盘输入事件响应处理函数；根据权利要求2所述gui图形用户界面模块，其特征在于：仅在用户界面更新时，绘制更新区域界面图像，将图像更新命令、更新区域图像及更新区域坐标封装成客户端界面图像命令数据包p，调用所述客户端i/o通信模块发送接口，将其推送给所述浏览器交互子系统;所述gui图像用户界面模块在缓存位图内绘制用户界面。客户端程序独立运行时，响应窗口刷新消息，将缓存位图绘制到窗口展示用户界面；通过所属客户端管理服务子系统启动客户端子系统时，客户端子系统将在后台无窗口运行；当用户界面更新时，缓存位图更新局部区域图像，获取更新区域坐标，将更新图像、坐标、界面图像命令类型封装成数据包。3.一种客户端程序嵌入浏览器的方法，其特征在于包括：浏览器展示客户端界面图像的方法。4.根据权利要求3所述浏览器展示客户端界面图像的方法，其特征在于，其步骤如下：步骤一、客户端界面更新：当用户界面更新时，图形用户界面直接在缓存位图内绘制，并记录绘制区域坐标、大小及更新图像内容;步骤二，更新区域图像数据包封装：将步骤一所述图像进行编码，生成图像编码数据。其将所述客户端子系统标识pid、界面图像命令类型、图像编码数据、更新区域坐标打包成数据包p10;步骤三，数据包路由：所述客户端i/o通信模块将数据包p10，发送给所述i/o通信模块。所述i/o通信模块解析数据包p10，根据界面图像命令类型，将数据包p10转发给所述客户端程序管理模块。所述客户端程序管理模块解析数据包p10，获取客户端子系统标识pid，通过客户端子系统标识pid，获取所述网络模块与所述web服务的web socket链接sock。 将数据包p10通过web socket链接sock发送给所述网络模块;步骤四，客户端界面图像展示：所述网络模块解析数据包p10之后，根据界面图像命令类型、坐标位置，调用所述gui界面展示模块显示方法，将图像编码数据渲染在浏览器canvas元素指定区域上，从而实现客户端在浏览器页面运行的效果。

技术总结
本发明公开了一种客户端程序嵌入浏览器的装置和方法，使客户端程序和浏览器实现完美融合在一起，通过JavaScript脚本调用客户端接口及保留浏览器插件原有的人机交互习惯。本发明装置包括：浏览器交互子系统、客户端管理服务子系统及客户端子系统；本发明方法包括：浏览器展示客户端程序界面图像的方法。览器展示客户端程序界面图像的方法。览器展示客户端程序界面图像的方法。


技术研发人员：郭云开
受保护的技术使用者：郭云开
技术研发日：2023.05.02
技术公布日：2023/7/12