一种实时预览的实现方法、装置、系统及存储介质与流程

本说明书涉及计算机通信领域，尤其涉及一种实时预览的实现方法、装置、系统及存储介质。

背景技术：

随着当前人民生活水平的提高，对于生活需求度越来越高，互联网的出现在一定程度上满足了人民生活需求。在互联网中的网页编辑方面，目前主要的编辑工作是通过计算机编辑终端对网页进行编辑，在编辑完成之后将编辑好网页进行发布。计算机编辑终端发布的网页可以适用计算机终端和移动终端(手机终端)，由于计算机终端和移动终端在一定程度上存在差异，所以在存在差异的部分在编辑时可能会出现问题。而且出现的问题通常是在移动终端访问计算机编辑终端发布后的网页时才会发现。

技术实现要素：

为了解决以上技术问题，本发明的主要目的在于提供一种实时预览的实现方法、装置、系统及存储介质，以解决现有技术中在计算机编辑终端对网页进行编辑时不能实时预览编辑的网页是否适配移动终端的技术问题。

本发明的技术方案是通过以下方式实现的：

一种实时预览的实现方法，包括：

建立网页编辑终端与服务器之间的连接；

建立网页预览终端与所述服务器之间的连接；

所述服务器接收所述网页编辑终端发送的编辑信息，并将所述网页编辑信息发送至所述网页预览终端，以实现所述网页预览终端对所述网页编辑终端中网页编辑状态的实时预览。

优选地，在所述建立网页编辑终端与服务器之间的连接之后，还包括：

生成用于建立网页预览终端与所述服务器之间的连接的连接信息，所述连接信息包括二维码和链接地址。

优选地，所述建立网页预览终端与所述服务器之间的连接，具体为：

根据所述连接信息建立网页预览终端与所述服务器之间的连接。

优选地，所述建立网页编辑终端与所述服务器之间的连接，具体为：建立所述网页编辑终端与所述服务器之间的websocket连接；

所述根据所述连接信息建立网页预览终端与所述服务器之间的连接，具体为：根据所述连接信息建立网页预览终端与所述服务器之间的websocket连接。

优选地，在实现所述网页预览终端对所述网页编辑终端中网页编辑状态的实时预览的步骤之前，还包括：

判断所述预览终端是否为预览状态，当所述预览终端为预览状态时执行所述实时预览的步骤。

优选地，在实现所述网页预览终端对所述网页编辑终端中网页编辑状态的实时预览的步骤之后，还包括：

当所述网页预览终端的预览网页中出现内容显示异常时，通过所述网页预览终端对所述网页编辑终端中的网页编辑状态进行反馈。

优选地，通过所述网页预览终端对所述网页编辑终端中的网页编辑状态进行反馈的步骤，具体包括：

通过点击所述预览网页中显示异常的组件产生反馈信息，所述网页预览终端将所述反馈信息发送至所述服务器，所述服务器接收所述反馈信息并将所述反馈信息发送至所述网页编辑终端，以实现所述网页预览终端对所述网页编辑终端的反馈。

优选地，所述网页编辑终端在接收到所述反馈信息后，对所述反馈信息进行响应，所述响应包括对所述组件高亮显示或者弹出设置窗。

优选地，在所述建立网页编辑终端与服务器之间的连接之前，还包括：

所述网页编辑终端从网络中加载第一控制文件和第二控制文件，其中：

所述第一控制文件，用于编辑网页；

所述第二控制文件，用于控制编辑网页中供预览终端预览的区域。

优选地，在根据所述连接信息建立网页预览终端与所述服务器之间的连接之前，还包括：

所述网页预览终端根据所述连接信息从网络中加载第三控制文件和第二控制文件，其中：

所述第三控制文件，用于控制编辑网页中供预览终端预览的区域的信息；

所述第二控制文件，用于控制所述预览终端预览的区域。

优选地，所述网页编辑终端为计算机编辑终端，所述预览终端为移动预览终端。

一种实时预览的实现装置，包括：

网页编辑终端，用于对网页进行编辑；

网页预览终端，用于对网页编辑终端编辑的网页进行预览；

服务器，用于用于存储和传输网页编辑终端和网页预览终端发送的信息；

第一连接模块，用于建立网页编辑终端与服务器之间的连接；

第二连接模块，用于建立网页预览终端与所述服务器之间的连接；

所述第一连接模块和第二连接模块中分别设置有第一通信模块和第二通信模块，所述服务器通过所述第一通信模块接收所述网页编辑终端发送的编辑信息，并通过所述第二通信模块将所述网页编辑信息发送至所述网页预览终端，以实现所述网页预览终端对所述网页编辑终端中网页编辑状态的实时预览。

一种实时预览的实现系统，包括：

存储器，用于存储程序指令；

处理器，用于执行所述程序指令，以实现上述实时预览的实现方法。

一种存储介质，所述存储介质存储有可读指令，所述可读指令可被处理器执行时实现上述实现预览的实现方法。

相比于现有技术，本发明实时预览的实现方法、装置、系统及存储介质至少具有以下有益效果：

1)本发明通过将网页编辑终端、网页预览终端分别通过websocket协议与服务器连接，网页编辑终端将编辑网页的信息通过服务器实时发送到网页预览终端，网页预览终端可以实时预览网页编辑终端对网页的编辑状态。

2)当网页预览终端在对网页编辑终端编辑的网页进行实时预览时，发现网页存在有问题的组件，可以通过网页预览终端点击当前预览的网页中出现问题的组件。然后网页预览终端将点击的反馈信息通过websocket协议以及服务器发送至网页编辑终端的编辑网页，将出现问题的组件以特殊方式显示(例如高亮等)，以提示网页编辑终端的编辑者该组件在预览终端出现问题，方便修改，避免了将网页发布之后用户终端在使用时出现问题。

3)网页编辑终端、网页预览终端、用户使用终端使用相同的预览网页展示文件，该文件为网络中公用的文件，避免了多次对预览网页展示文件进行开发，减少了开发成本。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一种实施例提供的实时预览的实现方法的流程示意图；

图2为本发明另一实施例提供的实时预览的实现方法的流程示意图；

图3为本发明一种实施例提供的实时预览装置的结构示意图；

图4为本发明另一实施例提供的实时预览装置的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

结合附图对本发明进行进一步说明。

实施例一

如图1所示，为本发明一种实施例提供的实时预览的实现方法的流程示意图，该方法主要包括以下步骤：

步骤s100：建立网页编辑终端与服务器之间的连接，该步骤具体为：通过websocket协议建立网页编辑终端与服务器之间的连接，网页编辑终端与服务器通过websocket协议完成一次握手之后，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

其中，网页编辑终端为计算机编辑终端，开发者/编辑者通过计算机对编辑的网页进行编辑。

步骤s200：建立网页预览终端与所述服务器之间的连接，该步骤具体为：通过websocket协议建立移动预览终端与所述服务器之间的连接，移动预览终端与服务器通过websocket协议完成一次握手之后，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其中，移动预览终端可以是手机终端。

步骤s300：当计算机编辑终端通过websocket协议与服务器连接成功后，将对编辑网页的编辑信息通过websocket协议传输至服务器，编辑网页包括预览区域和含有编辑功能键的区域，该编辑信息是指预览区域的编辑信息。计算机编辑终端的编辑网页中的某些组件对计算机终端的浏览器和预览终端的浏览器的适配有不同的编辑窗口。只有在这些组件对应的编辑窗口中上传与计算机终端的浏览器或预览终端的浏览器对应的文件才能在计算机终端或者预览终端的浏览器正常显示和预览。

由于通过websocket协议能进行通讯，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯，所以当计算机编辑终端将网页的编辑信息发送至服务器之后，服务器将编辑信息发送至手机终端，通过手机中的浏览器可以直接对计算机编辑终端传输至服务器的网页编辑信息进行实时预览。

通过本发明的技术方案，编辑者可以在利用计算机编辑终端对网页进行编辑的同时，通过移动预览终端进行编辑网页的实时预览。当计算机编辑终端在编辑网页过程中，手机终端在预览网页时出现预览网页中有组件出现异常显示时可以及时发现，然后进行修改。该技术方案避免了在计算机编辑终端对网页进行编辑时，移动网页预览终端中的预览网页出现有组件异常显示的情况时，不能及时发现，从而导致用户在移动终端使用时直接使用的是有组件异常显示的网页的问题。

实施例二

如图2所示，为本发明另一实施例提供的实时预览的实现方法的流程示意图，该方法主要包括以下步骤：

步骤s400：建立网页编辑终端与服务器之间的连接，该步骤具体为：通过websocket协议建立网页编辑终端与服务器之间的连接，网页编辑终端与服务器通过websocket协议完成一次握手之后，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其中，网页编辑终端为计算机编辑终端，开发者/编辑者通过计算机对编辑的网页进行编辑。

在建立网页编辑终端与服务器之间的连接之后，还包括：计算机编辑终端生成用于建立网页预览终端与所述服务器之间的连接的连接信息，该连接信息显示在计算机编辑终端的编辑网页中。该连接信息可以包括二维码和/或链接地址。生成该连接信息是为了网页预览终端与服务器建立连接，以便实现网页预览终端对计算机编辑终端中编辑网页的实时预览。

步骤s500：建立网页预览终端与所述服务器之间的连接，该步骤具体为：网页预览终端通过网页编辑终端生成的连接信息与服务器建立连接。该连接可以是通过websocket协议建立网页预览终端与所述服务器之间的连接，网页预览终端与服务器通过websocket协议完成一次握手之后，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其中，网页预览终端为可以是手机终端。

s600：当计算机编辑终端通过websocket协议与服务器连接成功后，将对编辑网页的编辑信息通过websocket协议传输至服务器，计算机编辑终端的编辑网页中的某些组件对计算机终端的浏览器和预览终端的浏览器的适配有不同的编辑窗口。只有在这些组件对应的编辑窗口中上传与计算机终端的浏览器或预览终端的浏览器对应的文件才能在计算机终端或者预览终端的浏览器正常显示。

由于通过websocket协议能进行通讯，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯，所以当计算机编辑终端将网页的编辑信息发送至服务器之后，服务器将编辑信息发送至手机终端，通过手机中的浏览器可以直接对计算机编辑终端传输至服务器的网页编辑信息进行实时预览。在实现网页预览终端对网页编辑终端中网页编辑状态的实时预览的步骤之前，先判断所述预览终端是否为预览状态，当所述预览终端为预览状态时执行所述实时预览的步骤。该判断为手机根据连接信息自动判断。当预览终端处于预览状态后，预览终端中的预览网页不能进行编辑操作，防止通过预览终端对网页进行编辑从而导致在计算机编辑终端中的混乱。

通过本发明的技术方案，编辑者可以在利用计算机编辑终端对网页进行编辑的同时，通过移动终端网页预览终端进行编辑网页的实时预览。当计算机编辑终端在编辑网页过程中，手机终端在预览网页时出现预览网页中有组件出现异常显示时可以及时发现，然后进行修改。该技术方案避免了在计算机编辑终端对网页进行编辑时，移动网页预览终端中的预览网页出现有组件异常显示的情况时，不能及时发现，从而导致用户在移动终端使用时直接使用的是有组件异常显示的网页的问题。

步骤s700：在实现所述网页预览终端对所述网页编辑终端中网页编辑状态的实时预览的步骤之后，还包括：当所述网页预览终端的预览网页中出现内容显示异常时，通过网页预览终端对所述网页编辑终端中的网页编辑状态进行反馈。

该步骤具体为：当通过手机浏览器对计算机编辑终端正在编辑的网页进行预览时，手机浏览器中显示的预览网页中出现某组件显示异常时，通过点击所述预览网页中显示异常的组件产生反馈信息，所述网页预览终端将所述反馈信息通过websocket协议发送至所述服务器，所述服务器接收所述反馈信息并通过websocket协议将所述反馈信息发送至所述网页编辑终端，以实现所述网页预览终端对所述网页编辑终端的反馈。

其中，组件显示异常的情况可以包括组件的颜色、组件的位置、组件所加载的图片等。出现组件显示异常的原因可以是将计算机端的浏览器适配的编辑端口误操作为手机端浏览器适配的编辑端口，或者从计算机端的浏览器适配的编辑端口中编辑的内容编辑到手机端的浏览器适配的编辑端口。这样就会出现组件显示异常的情况，编辑者在手机端的浏览器进行实时预览时就会发现该异常情况。

点击的动作可以包括单击和双击，单击出现显示异常的组件可以将该组件在手机端的预览网页进行高亮显示，双击可以将显示异常的组件弹出设置窗。

步骤s800：在网页编辑终端在接收到网页预览终端的反馈信息后，对所述反馈信息进行响应，所述响应为与网页预览终端相同的处理。即当在预览终端的预览网页单击出现显示异常的组件时，该组件在手机端的预览网页进行高亮显示，同时，网页编辑终端课可以将该组件在网页编辑终端的编辑网页对显示异常的组件进行高亮显示。当在预览终端的预览网页双击出现显示异常的组件时，该组件在手机端的预览网页弹出设置窗，同时，网页编辑终端课可以将该组件在网页编辑终端的编辑网页的设置窗弹出。该设置窗可以包括组件的长度、宽度、高度、颜色等编辑信息。

当网页编辑终端接收到反馈信息后，将显示异常的组件高亮显示或者弹出设置窗等，编辑者/开发者可以在网页编辑终端很容易地找到在网页预览终端显示异常的组件，方便修改。也避免了在网页预览终端找到显示异常的组件之后，在网页编辑终端仔细查找该组件在网页编辑终端的编辑网页的具体位置。

实施例三

结合实施例一与实施例二中的方法，在网页编辑终端与服务器之间建立websocket连接之前，还包括：所述网页编辑终端从网络中加载第一控制文件和第二控制文件，第一控制文件和第二控制文件已经提前上传至网络中。其中：

第一控制文件用于控制编辑网页，包括第一数据编辑子文件和第一数据展示子文件。第一数据编辑文件为editor.css文件，主要用于控制编辑网页的布局、格式等。第一数据展示子文件为editor.js文件，主要用于在vue.js环境下创建一个网页编辑终端的外层vue实例a，以展示编辑网页的内容。该外层vue实例a用于接收发送编辑信息或反馈信息。两者结合可以将编辑网页完整展示出来。该编辑网页包括供预览终端预览的区域和含有编辑功能键的区域，只有第一控制文件对页面进行编辑时，供预览终端预览的区域并没有内容显示。其中，第一数据编辑子文件和第一数据展示子文件为网络中网页编辑终端使用的文件。

所述第二控制文件用于控制编辑网页中供预览终端预览的区域，包括第二数据编辑子文件和第二数据展示子文件。第二数据编辑子文件为为preview.css文件，主要用于控制编辑网页中供预览终端预览的区域的布局、格式等。第二数据展示子文件为preview.js文件，主要用于创建一个网页编辑终端的内层vue实例b，展示编辑网页中预览区域的内容等。该内层vue实例b还用于接收和发送信息。其中，第二数据编辑子文件和第二数据展示子文件为网络中公共的文件。

在根据网页编辑终端生成的连接信息建立网页预览终端与所述服务器之间的连接之前，还包括：所述网页预览终端根据网页编辑终端生成的连接信息从网络中加载第三控制文件、第二控制文件，同样，第三控制文件也提前上传至网络中。其中：

所述第三控制文件包括第三数据编辑子文件和第三数据展示子文件，第三数据展示子文件为editor.js文件，主要用于在vue.js环境下创建一个网页预览终端的外层vue实例c，用于接收和发送控制编辑网页中供预览终端预览的区域的编辑信息或反馈信息。其中，第一数据编辑子文件和第一数据展示子文件为网络中网页预览终端使用的文件。

所述第二控制文件用于控制编辑网页中供预览终端预览的区域，包括数据编辑子文件和第二数据展示子文件。第二数据编辑子文件为为preview.css文件，主要用于控制编辑网页中预览区域的布局、格式等。第二数据展示子文件为preview.js文件，主要用于创建一个网页预览终端的内层vue实例b，展示编辑网页中预览区域的内容等。该内层vue实例b还用于接收和发送编辑信息或反馈信息。其中，第二数据编辑子文件和第二数据展示子文件为网络中公共的文件。

网页编辑终端的外层vue实例a将网页编辑终端的内层vue实例b展示的预览区域的信息通过websocket协议传输给服务器，服务器再将该信息传输给网页预览终端的外层vue实例c。然后网页预览终端的外层vue实例c将该信息传给网页预览终端的内层vue实例b进行展示预览。当在网页预览终端进行实时预览时，发现有组件显示异常，通过点击显示异常的组件产生反馈信息，网页预览终端的内层vue实例b将给反馈信息传输给网页预览终端的外层vue实例c。然后网页预览终端的外层vue实例c将该反馈信息通过websocket协议传输给服务器，服务器在通过websocket协议将该反馈信息传输给网页编辑终端的外层vue实例a，网页编辑终端的外层vue实例a将反馈信息传输给网页编辑终端的内层vue实例b进行同步展示，以提醒编辑者/开发者。

网页编辑终端和网页预览终端中用于将编辑网页中预览区域进行展示文件是同一种文件，该文件在网页编辑终端和网页预览终端中可以兼容的。两者公用同一文件省去了再次开发一套文件的成本，因为该文件是通过编程语言实现的。

当编辑者/开发者在经过上述方法对网页进行编辑后，没有在网页预览终端的预览网页发现组件显示异常的情况时，编辑者/开发者可以在网页编辑终端进行发布。发布后的网页即为用户进行正常浏览和使用的网页，网页编辑终端将发布的网页信息先发送至数据库，用户使用的终端在访问网页时通过数据库进行访问。

用户使用的终端在访问发布后的网页时，通过网页先加载第二数据编辑子文件和第二数据展示子文件。第二数据编辑子文件为为preview.css文件，主要用于控制发布网页中显示区域的布局、格式等。第二数据展示子文件为preview.js文件，主要用于创建一个用户终端的内层vue实例b，展示发布网页中的内容等。该内层vue实例b还用于接收发布网页的信息。其中，第二数据编辑子文件和第二数据展示子文件为网络中公共的文件，与网页编辑终端的内层vue实例b所对应的文件和网页预览终端内层vue实例b对应的文件相同。这样也省去了再次对用终端用于展示网页的文件进行单独开发的步骤，节省了开发成本。

本发明还公开了一种实时预览装置，如图3所示，该装置主要包括：

网页编辑终端，用于对网页进行编辑。

网页预览终端，用于对网页编辑终端编辑的网页进行预览。

服务器，用于存储和传输网页编辑终端和网页预览终端发送的信息。

第一连接模块1，用于建立网页编辑终端与服务器之间的连接，该连接为websocket协议连接。

第二连接模块2，用于建立网页预览终端与所述服务器之间的连接，该连接为websocket协议连接。

所述第一连接模块1和第二连接模块2中分别设置有第一通信模块101和第二通信模块201，所述服务器通过第一通信模块101接收所述网页编辑终端发送的编辑信息。然后，所述服务器通过第二通信模块201将接收的网页编辑终端发送的网页编辑信息发送至网页预览终端，从而实现了所述网页预览终端对所述网页编辑终端中网页编辑状态的实时预览。该实现装置的具体实现方法同上述实施例一、实施例二、实施例三的方法。同样该装置还可以实现网页预览终端对网页编辑终端的反馈功能，具体方法同上述实施例二中的方法。

如图4为本发明另一实施例提供的实时预览装置的结构示意图。该装置为对图3所示的装置的进一步改进(请同时参考对图3中实时预览装置的说明)：

该装置中的网页编辑终端中创建有外层vue实例a和内层vue实例b，网页预览终端中创建有外层vue实例c和内层vue实例b。该装置中还包括数据库和用户终端，当网页编辑终端在将网页编辑完毕后，现将网页信息发送至数据库，用户终端通过数据库进行发布网页的访问。

该装置的工作原理与实施例三中的方法相同。

本发明还提供了一种实时预览的实现系统，包括：一个以上存储器和一个以上处理器。其中，

存储器(图中未示出)，用于存储程序指令，存储器可以是短暂存储或持久存储。

处理器(图中未示出)，用于执行所述程序指令，以实现本技术方案中移动预览终端对计算机编辑终端实时预览的实现方法以及预览终端对计算机编辑终端的信息反馈。

本发明还提供了一种存储介质，所述存储介质存储有可读指令，所述可读指令可被处理器执行时实现本技术方案中移动网页预览终端对计算机网页编辑终端实时预览的实现方法以及预览终端对计算机编辑终端的信息反馈。

以上，仅为本发明较佳的具体实施方式，但发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。