基于消息队列的页面组件更新方法及其系统与流程

1.本技术涉及页面数据更新领域，具体涉及基于消息队列的页面组件更新方法及其系统。


背景技术：

2.基于b/s架构的应用和项目中的数据刷新是最基本的功能，通过脚本方式或通过浏览器的操作都可以实现，可以满足大部分的业务需求。但是有些特殊的业务场景就无法单纯的靠刷新机制来获得实时性的数据体验，在实际使用情况中，这些业务场景常使用刷新整个页面或者通过脚本定时获取数据这两种方式来刷新前端组件的数据。
3.其中的第一种方式，即刷新整个页面的方式，是业界目前使用最普遍的业务数据刷新技术的应用，依靠浏览器的刷新可以达到最新数据的展示效果。但是这种方式对用户来说体验不佳，且用户也无法感知何时刷新页面才能展示最新数据，只能不断尝试刷新页面。
4.其中的第二种方式，具体依靠脚本不断轮询服务器获取最新数据，并将轮询到的数据更新到页面组件进行渲染。这种方式存在轮询时间间隔的问题，轮询间隔时间设置太久会导致用户无法及时获得最新的数据；轮询间隔时间设置太短会对服务器造成不必要的访问压力，而且在访问高峰期极有可能导致服务直接挂起，引起生产事故。
5.基于上述，有必要提供一种技术方案，以解决上述痛点问题。


技术实现要素：

6.鉴于上述问题，本技术提供了一种基于消息队列的页面组件更新方法及其系统，能够实现终端用户的页面组件单元具备数据动态刷新功能。
7.为实现上述目的，发明人提供了一种基于消息队列的页面组件更新方法，包括：
8.一组件更新后，发送对应所述一组件的更新消息至消息队列；
9.消息队列广播所述更新消息；
10.接收到所述更新消息的应用系统，通过其与浏览器的通信链路广播所述更新消息；
11.接收到所述更新消息的浏览器，依据所述更新消息对所述一组件进行更新。
12.区别于现有技术，上述技术方案通过消息队列结合浏览器与应用系统之间的实时双向通信链路，实现用户终端页面组件单元无刷新的动态获取数据，在提升用户体验的同时，又能节省服务器资源。
13.在一些实施例中，所述一组件更新后，之后，还包括：
14.存储对应所述一组件的更新数据至数据库；
15.所述依据所述更新消息对所述一组件进行更新，包括：
16.依据所述更新消息，通过调用脚本从所述数据库获取所述一组件的更新数据，并依据所述更新数据刷新所述一组件。
17.在这些实施例中，各应用系统将依据更新消息直接从数据库中获取更新数据，做到高效地差量更新组件。
18.在一些实施例中，所述一组件更新后，包括：
19.通过浏览器登录系统；
20.浏览器接收对应系统一组件的编辑结果，并依据所述编辑结果生成对应所述一组件的更新数据；
21.发送所述更新数据至浏览器对应的应用系统。
22.在这些实施例中，用户可以通过任一浏览器登录系统对任一组件进行编辑，实现了便捷地执行组件更新。
23.在一些实施例中，所述通信链路为基于websocket技术的通信链路。
24.在这些实施例中，直接利用浏览器与应用系统之间进行实时双向通信的websocket技术将更新消息传递到当前每一个登录系统的浏览器，以主动“提醒”其需要进行组件更新，不仅无需对应用系统造成访问压力，而且能够兼具传递更新消息的即时性。
25.在一些实施例中，所述接收到所述更新消息的应用系统，通过其与浏览器的通信链路广播所述更新消息，包括：
26.接收到所述更新消息的应用系统，若其当前与浏览器建立通信链路，则通过所述通信链路广播所述更新消息。
27.在这些实施例中，只针对当前登录系统的浏览器进行页面组件更新，以此节省数据传输资源。
28.为实现上述目的，发明人还提供了一种基于消息队列的页面组件更新系统，包括多个的应用系统、浏览器和一消息队列；
29.所述应用系统，用于一组件更新后，发送对应所述一组件的更新消息至消息队列；以及用于接收到所述更新消息的应用系统，通过其与浏览器的通信链路广播所述更新消息；
30.所述浏览器，用于对一组件更新，以及接收到所述更新消息后，依据所述更新消息对所述一组件进行更新；
31.所述消息队列，用于消息队列广播所述更新消息。
32.在一些实施例中，所述应用系统，还用于存储对应所述一组件的更新数据至数据库；
33.所述浏览器，还用于依据所述更新消息，通过调用脚本从所述数据库获取所述一组件的更新数据，并依据所述更新数据刷新所述一组件。
34.在一些实施例中，所述浏览器，还用于登录系统；以及用于接收对应系统一组件的编辑结果，并依据所述编辑结果生成对应所述一组件的更新数据；以及用于发送所述更新数据至浏览器对应的应用系统。
35.在一些实施例中，所述通信链路为基于websocket技术的通信链路。
36.在一些实施例中，所述应用系统，还用于接收到所述更新消息后，若其当前与浏览器建立通信链路，则通过所述通信链路广播所述更新消息。
37.区别于现有技术，上述技术方案通过消息队列结合浏览器与应用系统之间的实时双向通信链路，实现用户终端页面组件单元无刷新的动态获取数据，在提升用户体验的同
时，又能节省服务器资源。
38.上述发明内容相关记载仅是本技术技术方案的概述，为了让本领域普通技术人员能够更清楚地了解本技术的技术方案，进而可以依据说明书的文字及附图记载的内容予以实施，并且为了让本技术的上述目的及其它目的、特征和优点能够更易于理解，以下结合本技术的具体实施方式及附图进行说明。
附图说明
39.附图仅用于示出本技术具体实施方式以及其他相关内容的原理、实现方式、应用、特点以及效果等，并不能认为是对本技术的限制。
40.在说明书附图中：
41.图1为本技术实施例一种基于消息队列的页面组件更新方法的流程示意图；
42.图2为本技术具体实施例一种基于消息队列的页面组件更新方法的信息交互示意图；
43.图3为本技术实施例一种基于消息队列的页面组件更新系统的结构组成与连接示意图。
44.上述各附图中涉及的附图标记说明如下：
45.101、应用系统；102、浏览器；103、消息队列。
具体实施方式
46.为详细说明本技术可能的应用场景，技术原理，可实施的具体方案，能实现目的与效果等，以下结合所列举的具体实施例并配合附图详予说明。本文所记载的实施例仅用于更加清楚地说明本技术的技术方案，因此只作为示例，而不能以此来限制本技术的保护范围。
47.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中各个位置出现的“实施例”一词并不一定指代相同的实施例，亦不特别限定其与其它实施例之间的独立性或关联性。原则上，在本技术中，只要不存在技术矛盾或冲突，各实施例中所提到的各项技术特征均可以以任意方式进行组合，以形成相应的可实施的技术方案。
48.除非另有定义，本文所使用的技术术语的含义与本技术所属技术领域的技术人员通常理解的含义相同；本文中对相关术语的使用只是为了描述具体的实施例，而不是旨在限制本技术。
49.在本技术的描述中，用语“和/或”是一种用于描述对象之间逻辑关系的表述，表示可以存在三种关系，例如a和/或b，表示：存在a，存在b，以及同时存在a和b这三种情况。另外，本文中字符“/”一般表示前后关联对象是一种“或”的逻辑关系。
50.在本技术中，诸如“第一”和“第二”之类的用语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何实际的数量、主次或顺序等关系。
51.在没有更多限制的情况下，在本技术中，语句中所使用的“包括”、“包含”、“具有”或者其他类似的表述，意在涵盖非排他性的包含，这些表述并不排除在包括所述要素的过
程、方法或者产品中还可以存在另外的要素，从而使得包括一系列要素的过程、方法或者产品中不仅可以包括那些限定的要素，而且还可以包括没有明确列出的其他要素，或者还包括为这种过程、方法或者产品所固有的要素。
52.与《审查指南》中的理解相同，在本技术中，“大于”、“小于”、“超过”等表述理解为不包括本数；“以上”、“以下”、“以内”等表述理解为包括本数。此外，在本技术实施例的描述中“多个”的含义是两个以上(包括两个)，与之类似的与“多”相关的表述亦做此类理解，例如“多组”、“多次”等，除非另有明确具体的限定。
53.在本技术实施例的描述中，所使用的与空间相关的表述，诸如“中心”“纵向”“横向”“长度”“宽度”“厚度”“上”“下”“前”“后”“左”“右”“竖直”“水平”“垂直”“顶”“底”“内”“外”“顺时针”“逆时针”“轴向”“径向”“周向”等，所指示的方位或位置关系是基于具体实施例或附图所示的方位或位置关系，仅是为了便于描述本技术的具体实施例或便于读者理解，而不是指示或暗示所指的装置或部件必须具有特定的位置、特定的方位、或以特定的方位构造或操作，因此不能理解为对本技术实施例的限制。
54.除非另有明确的规定或限定，在本技术实施例的描述中，所使用的“安装”“相连”“连接”“固定”“设置”等用语应做广义理解。例如，所述“连接”可以是固定连接，也可以是可拆卸连接，或成一体设置；其可以是机械连接，也可以是电连接，也可以是通信连接；其可以是直接相连，也可以通过中间媒介间接相连；其可以是两个元件内部的连通或两个元件的相互作用关系。对于本技术所属技术领域的技术人员而言，可以根据具体情况理解上述用语在本技术实施例中的具体含义。
55.请参阅图1，图1示出了本技术实施例一种基于消息队列的页面组件更新方法的流程示意图。如图1所示，方法可以包括以下步骤：
56.s01：一组件更新后，发送对应所述一组件的更新消息至消息队列；
57.所述组件更新指的是对系统的任一组件进行编辑。
58.在一些具体实施例中，进行组件更新的方式为：用户可以通过任意终端登录系统，通过在系统的组件编辑表单页面上操作以对任一组件进行编辑，并在编辑完成后生成更新数据并进行存储。
59.优选地，所述终端为浏览器；编辑完成后，浏览器将接收编辑结果并生成对应目标更新组件的更新数据，然后请求与其连接的应用系统保存更新数据；应用系统接收到该请求后，将更新数据存储至数据库中。
60.s02：消息队列广播所述更新消息；
61.在此，通过消息队列来广播更新消息，既能在更新消息的传输过程中保存更新消息，又能确保更新消息成功地被广播到各个应用系统；更重要地是，通过消息队列来广播更新消息可以不受网络类型和联机与否的限制，以此确保各个应用系统都能接收到更新消息。
62.s03：接收到所述更新消息的应用系统，通过其与浏览器的通信链路广播所述更新消息；
63.即言，凡是接收到消息队列广播的更新消息，并且当前又与浏览器建立有通信链路的应用系统，便将接收到的更新消息通过该通信链路广播更新消息。由此，与应用系统通过该链路保持实时双向通信连接关系的浏览器便能即刻接收到应用系统所广播的更新消
息。
64.在一些具体实施例中，所述通信链路为基于websocket技术的通信链路，即浏览器与应用系统之间基于websocket技术建立通信连接关系。相应地，应用系统在接收到广播的更新消息后，将从websocket的连接中获取匹配用户的连接进行广播，所述匹配用户特指当前登录系统的用户。
65.在此，通过应用系统与浏览器之间建立实时双向通信连接关系的websocket技术来广播更新消息，能确保更新消息主动地被推送至浏览器，使得更新消息的送达变得即时、简单、便捷又有保证；并且无需占用额外资源，不对服务器造成负担。
66.在另外一些具体实施例中，所述通信链路还可以是http链路方式。
67.s04：接收到所述更新消息的浏览器，依据所述更新消息对所述一组件进行更新。
68.即言，浏览器将依据更新消息主动进行组件更新，从而实现动态更新。
69.具体地，浏览器将依据所述更新消息，通过调用脚本从存储有更新数据的数据库中获取目标更新组件的更新数据，并依据该更新数据刷新目标更新组件。
70.可见，本实施例通过websocket结合消息队列实现了用户浏览器页面的数据动态感知技术，相较于浏览器刷新方式而言显著了提升用户体验；相较于轮询服务器获取更新数据方式而言，大大降低给服务器带来的压力。
71.本技术特别适用于微服务模式，特别是微服务的应用划分较多的情况下。通过消息队列可以高效地通知到所有的微服务应用，通过websocket能即时通知浏览器主动获取更新数据，最终实现终端用户的页面组件单元的数据动态刷新。
72.请参阅图2，图2示出了本技术具体实施例一种基于消息队列的页面组件更新方法的信息交互示意图。
73.本具体实施例中，不同用户登录系统，通过系统提供的界面进行数据的操作。其中，用户1所在页面需要展示组件单元1、组件单元2、组件单元3和组件单元4的数据；用户2所在页面是组件单元1的编辑表单页面。
74.本具体实施例能够实现用户2编辑完表单后，用户1所在页面会自动刷新组件单元1的数据并展示。具体操作流程如下：
75.1、用户1通过浏览器登录系统，展示组件单元1、组件单元2、组件单元3和组件单元4的页面组件，并展示相关数据；用户2通过浏览器登录系统，进入组件单元1的编辑表单页面进行编辑，用户2触发保存编辑后，浏览器将更新数据发送给对应的应用系统，即图2中的应用3进行保存；
76.2、应用3接收到用户2发送的更新数据保存请求，将更新数据保存至其数据库中；
77.3、应用3在保存更新数据至数据库后，发送对应组件单元1的更新消息到消息队列；
78.4、消息队列将更新消息进行广播，所有应用系统接收到消息队列的广播后，从websocket的连接中获取匹配用户的连接进行广播，在此，所述匹配用户为用户1，所述连接为当前登录系统的浏览器，因此，图2中具备广播条件的只有应用1；
79.5、用户1的浏览器接收到通过websocket广播的更新消息后，调用脚本从数据库(即图2中的应用3的数据库)获取组件单元1的更新数据，并刷新对应的页面组件单元，即组件单元1。
80.可见，本具体实施例通过websocket结合消息队列能够实现页面组件单元的无刷新动态获取更新数据。
81.请参阅图3，图3示出本技术实施例一种基于消息队列的页面组件更新系统的结构组成与连接示意图。
82.如图3所示，本实施例的一种基于消息队列的页面组件更新系统包括多个的应用系统101、多个的浏览器102和一消息队列103；各个浏览器102分别连接有一应用系统101；
83.所述应用系统101，用于一组件更新后，发送对应所述一组件的更新消息至消息队列；以及用于接收到所述更新消息的应用系统，通过其与浏览器的通信链路广播所述更新消息；
84.所述浏览器102，用于对一组件更新，以及接收到所述更新消息后，依据所述更新消息对所述一组件进行更新；
85.所述消息队列103，用于消息队列广播所述更新消息。
86.在一些具体实施例中，所述应用系统，还用于存储对应所述一组件的更新数据至数据库；
87.所述浏览器，还用于依据所述更新消息，通过调用脚本从所述数据库获取所述一组件的更新数据，并依据所述更新数据刷新所述一组件。
88.在一些具体实施例中，所述浏览器，还用于登录系统；以及用于接收对应系统一组件的编辑结果，并依据所述编辑结果生成对应所述一组件的更新数据；以及用于发送所述更新数据至浏览器对应的应用系统。
89.在一些具体实施例中，所述通信链路为基于websocket技术的通信链路。
90.在一些具体实施例中，所述应用系统，还用于接收到所述更新消息后，若其当前与浏览器建立通信链路，则通过所述通信链路广播所述更新消息。
91.本实施例所述的基于消息队列的页面组件更新系统，能够实现终端用户的页面组件单元具备数据动态刷新功能。
92.最后需要说明的是，尽管在本技术的说明书文字及附图中已经对上述各实施例进行了描述，但并不能因此限制本技术的专利保护范围。凡是基于本技术的实质理念，利用本技术说明书文字及附图记载的内容所作的等效结构或等效流程替换或修改产生的技术方案，以及直接或间接地将以上实施例的技术方案实施于其他相关的技术领域等，均包括在本技术的专利保护范围之内。