基于WebSocket的多终端文档同步控制方法、装置、介质及设备与流程
本发明涉及文档控制领域，尤其涉及一种基于websocket的多终端文档同步控制方法、装置、介质及设备。
背景技术：
1、随着无纸化会议、远程协同办公等场景的普及，多终端文档协同批注与同屏同步需求日益增长。现有技术主要分为两类：一类是基于屏幕共享的方案，例如使用webrtc、rtmp等协议，将一个终端的屏幕画面实时推流到其他终端，其他终端仅能观看，无法参与操作或批注；另一类是基于云端文档的方案，例如腾讯文档、google docs，支持多人在线编辑结构化文档（文字、表格），但对于pdf、图片等非结构化文档的自由批注（画线、画图）的实时同步能力较弱，且批注数据与文档本身分离，无法导出为带批注的新文档。
2、然而，上述方案在实际应用中仍存在诸多不足。屏幕共享方案依赖视频编码传输，对带宽要求高且延迟较大，难以实现毫秒级笔迹同步，观看端只能被动观看，无法对文档进行自由绘图、标注。此外，现有方案大多采用统一技术栈，当一端为c++桌面应用、另一端为web前端时，缺乏轻量级、低延迟的混合通信协议，导致跨语言协作困难。同时，批注内容通常只存储在各自终端，无法与原始文档合并生成带有批注的新文档，不利于归档和分享。这些不足导致现有技术无法准确高效地对多个文档的内容进行同步控制。
技术实现思路
1、本发明提供了一种基于websocket的多终端文档同步控制方法、装置、介质及设备，以解决现有技术中无法准确高效地对多个文档的内容进行同步控制的问题。
2、第一方面，本技术提供了一种基于websocket的多终端文档同步控制方法，包括：
3、获取目标文档的打开指令，所述打开指令包括文档标识信息；
4、将所述打开指令发送至各个终端，以使各个终端根据所述文档标识信息加载并渲染目标文档，并在所述目标文档的渲染层之上叠加本地透明白板层；
5、获取用户在任一终端的本地透明白板层上的批注交互数据；所述批注交互数据包括交互轨迹坐标、批注属性信息及对应页码标识；
6、将所述批注交互数据转化为结构化数据，并通过websocket广播至其他终端，以使其他终端根据所述结构化数据中的对应页码标识，将结构化数据对应的批注重绘于本地透明白板层的对应位置；
7、获取页面控制指令，将所述页面控制指令转发至各个终端，以使各个终端同步执行页面跳转，并在本地透明白板层上仅显示当前页面对应的批注内容。
8、本技术通过获取目标文档的打开指令并发送至各个终端，使得各终端能够根据文档标识信息加载并渲染目标文档，同时在其渲染层之上叠加本地透明白板层，从而为后续批注提供了与文档内容隔离但视觉上叠加的独立绘图平面，避免了批注操作对文档显示本身的干扰；在此基础上，获取用户在任一终端的本地透明白板层上的批注交互数据，并将其转化为结构化数据后通过websocket广播至其他终端，使得其他终端能够根据对应的页码标识将批注数据精准重绘于各自本地透明白板层的相应位置，实现了笔迹在不同终端之间的实时、低延迟同步，且由于数据量远小于视频流，大幅降低了带宽占用和传输延迟；进一步地，获取页面控制指令并转发至各个终端，使所有终端同步执行页面跳转并仅显示当前页面对应的批注内容，从而在翻页时自动隔离不同页面的批注信息，避免了批注混叠和视觉混乱。由此，本技术在确保文档显示与批注操作互不干扰的前提下，实现了跨终端批注数据的实时同步与页面级精准切换，本技术有效解决了现有技术无法准确高效地对多个文档的内容进行同步控制的问题。
9、进一步的，本技术还包括：
10、获取用户触发的导出指令；
11、响应于所述导出指令，将各页面对应的批注交互数据发送至预设的后端合并接口；
12、以使所述后端合并接口将所述批注交互数据转换为与目标文档格式适配的矢量绘制数据，并将所述矢量绘制数据合并至目标文档的对应页面位置，生成携带批注的新文档。
13、本技术通过在完成批注同步后进一步获取用户触发的导出指令，并响应于该导出指令将各页面对应的批注交互数据发送至预设的后端合并接口，使得原本分散在不同终端上的批注信息能够被统一收集和集中处理；后端合并接口将批注交互数据转换为与目标文档格式适配的矢量绘制数据，并将该矢量绘制数据精准合并至目标文档的对应页面位置，从而生成融合了原始文档内容与所有批注痕迹的新文档。由此，本技术不仅实现了批注数据在多个终端之间的实时同步与页面级精准切换，还进一步打通了从协同批注到永久化存档的完整链条，使得用户能够获得一份可直接打印、分发或归档的带批注文档，避免了批注数据游离于文档之外而难以保存和分享的问题，显著提升了协同工作的实用性和文档管理效率。
14、进一步的，所述将所述打开指令发送至各个终端，以使各个终端根据所述文档标识信息加载并渲染目标文档，并在所述目标文档的渲染层之上叠加本地透明白板层，具体为：
15、当通过预设的传输控制协议端口接收到来自桌面应用端的打开指令时，将所述打开指令广播至各个websocket客户端；以使各个websocket客户端根据所述文档标识信息获取目标文档的页面元数据；根据所述页面元数据创建连续滚动的文档渲染层，并在所述文档渲染层之上创建本地透明白板层；
16、其中，所述传输控制协议端口用于接收来自桌面应用端的连接，所述websocket客户端用于接收来自web前端的连接；所述页面元数据包括总页数及各页原始尺寸；
17、所述本地透明白板层的尺寸与所述文档渲染层的总文档高度一致；所述本地透明白板层用于接收绘图事件且不干扰所述文档渲染层的滚动及点击操作。
18、本技术通过预设的传输控制协议端口接收来自桌面应用端的打开指令，并将该打开指令广播至各个websocket客户端，使得采用不同通信协议的桌面应用端（基于tcp）与web前端（基于websocket）能够接入同一中转服务器并协同工作，从而在不改造桌面应用端通信协议的前提下实现了异构终端的互联互通；各个websocket客户端根据文档标识信息获取目标文档的页面元数据，并据此创建连续滚动的文档渲染层，同时在其之上创建尺寸与文档渲染层总文档高度一致的本地透明白板层，由于透明白板层与文档渲染层在结构上分离且专门用于接收绘图事件而不干扰文档渲染层的滚动及点击操作，用户在浏览文档时能够自由进行批注而不会误触发文档滚动或点击事件，同时透明白板层的高度与文档总高度匹配确保了笔迹坐标在不同滚动位置下的精准对应。由此，本技术在实现跨语言、跨平台终端协同控制的基础上，兼顾了文档浏览与批注操作的互不干扰性，为后续的笔迹实时同步和页面级批注切换提供了可靠的前端架构支撑。
19、进一步的，所述获取用户在任一终端的本地透明白板层上的批注交互数据，具体为：
20、获取用户在本地透明白板层上的原始交互事件；所述原始交互事件包括指针按下事件、指针移动事件及指针抬起事件；
21、获取预设的文档容器的边界矩形信息及计算样式信息；所述计算样式信息包括边框宽度及内边距宽度；
22、根据所述边界矩形信息、边框宽度及内边距宽度，计算文档容器的内容区域相对于视口的左上角位置；
23、获取所述原始交互事件相对于视口的客户端坐标；
24、将所述客户端坐标的横向坐标值减去所述左上角位置的横向坐标值，得到相对横向坐标值，将所述客户端坐标的纵向坐标值减去所述左上角位置的纵向坐标值，得到相对纵向坐标值；
25、将所述相对横向坐标值与所述相对纵向坐标值组合为绝对像素坐标；
26、根据当前批注模式确定批注属性信息；当处于线条模式时，所述批注属性信息包括线条轨迹点阵、线条颜色及线条宽度，当处于文本模式时，所述批注属性信息包括文本内容、文本位置、字体大小及文本颜色；
27、根据所述绝对像素坐标及当前可视区域对应的页码，确定对应页码标识；
28、将所述绝对像素坐标、所述批注属性信息及所述对应页码标识封装为批注交互数据。
29、本技术通过获取用户在本地透明白板层上的原始交互事件（包括指针按下、移动、抬起），并结合预设的文档容器的边界矩形信息及边框宽度、内边距宽度等计算样式信息，精确计算文档容器内容区域相对于视口的左上角位置，进而将原始交互事件的客户端坐标减去该左上角坐标，得到相对于文档容器可视区域的相对坐标，再与当前滚动偏移量叠加后形成绝对像素坐标，这一系列坐标转换步骤确保了在不同终端、不同屏幕分辨率及滚动位置下，笔迹位置与文档内容的精准对应，避免了因视图缩放或滚动导致的坐标偏移问题；同时，根据当前批注模式（线条模式或文本模式）分别确定对应的批注属性信息（如轨迹点阵、颜色、线宽或文本内容、字体等），并结合当前可视区域对应的页码确定页码标识，将绝对像素坐标、批注属性信息及页码标识封装为结构化的批注交互数据，使得每一笔批注不仅具备精确的空间位置信息，还携带了所属页码和绘制样式，从而为后续的跨终端重绘和页面级批注隔离提供了完整的数据基础。由此，本技术实现了批注数据的精准采集、坐标归一化与语义化封装，显著提升了多终端协同批注时笔迹还原的准确性和跨页面切换的流畅性。
30、进一步的，所述将所述批注交互数据转化为结构化数据，并通过websocket广播至其他终端，以使其他终端根据所述结构化数据中的对应页码标识，将结构化数据对应的批注重绘于本地透明白板层的对应位置，具体为：
31、将所述批注交互数据转化为包含动作类型字段、坐标数据字段、属性字段及页码字段的结构化数据对象；
32、通过websocket连接将所述结构化数据对象广播至所有其他websocket客户端，并转发至对应的桌面应用端；
33、以使所有其他websocket客户端及对应的桌面应用端解析所述结构化数据对象，根据所述页码字段确定目标页面索引，并根据所述目标页面索引在本地透明白板层中定位到对应页面的绘制区域；
34、当所述动作类型字段为线条动作时，提取轨迹点阵、线条颜色及线条宽度，根据所述轨迹点阵中的各点坐标，在所述绘制区域中依次连接各点形成线条路径，根据所述线条颜色及线条宽度对所述线条路径进行描边绘制；
35、当所述动作类型字段为文本动作时，提取文本内容、文本位置、字体大小及文本颜色，在所述目标页面索引对应的绘制区域的所述文本位置处，以所述字体大小及文本颜色绘制所述文本内容。
36、本技术通过将批注交互数据转化为包含动作类型字段、坐标数据字段、属性字段及页码字段的结构化数据对象，使得每一笔批注的语义信息（是线条还是文本、具体轨迹或内容、所属页码、样式参数）被统一抽象为轻量级的json数据，相比于屏幕共享的视频流方案，数据量极小且无需编码解码；在此基础上，通过websocket连接将该结构化数据对象广播至所有其他websocket客户端并同步转发至对应的桌面应用端，实现了毫秒级的全双工数据传输，避免了视频推流的高带宽占用和延迟；各个接收终端解析结构化数据对象后，根据页码字段确定目标页面索引，并根据该目标页面索引在本地透明白板层中定位到对应页面的绘制区域，当动作类型为线条动作时提取轨迹点阵依次连线并描边，当为文本动作时提取文本内容及位置进行渲染，这一过程使得每一终端仅在当前页面所对应的绘制区域内精准还原批注，而不会将笔迹绘制到其他页面，从而在实现跨终端实时同步的同时，自然实现了页面级别的批注隔离与自动切换。由此，本技术在保证低延迟、低带宽消耗的前提下，显著提升了多终端协同批注的同步精度和页面切换时的视觉一致性。
37、进一步的，所述获取页面控制指令，将所述页面控制指令转发至各个终端，以使各个终端同步执行页面跳转，并在本地透明白板层上仅显示当前页面对应的批注内容，具体为：
38、获取来自桌面应用端的翻页指令；所述翻页指令包括目标页码；
39、将所述翻页指令通过传输控制协议端口接收后，广播至各个websocket客户端；
40、以使各个websocket客户端根据所述目标页码计算目标页面在文档容器中的滚动位置，并执行平滑滚动操作；
41、在所述平滑滚动操作执行过程中，各个websocket客户端实时监听滚动事件，根据所述滚动事件获取当前可视区域对应的当前页码，并将所述当前页码发送至本地透明白板层；
42、所述本地透明白板层根据接收到的当前页码，仅显示属于所述当前页码的批注内容，隐藏其他页码的批注内容。
43、本技术通过获取来自桌面应用端的翻页指令并经传输控制协议端口接收后广播至各个websocket客户端，使得采用不同通信协议的桌面应用端与web前端能够基于同一翻页控制指令实现页面级的协同控制；各个websocket客户端根据目标页码计算目标页面在文档容器中的滚动位置并执行平滑滚动操作，在此过程中实时监听滚动事件以获取当前可视区域对应的当前页码，并将该当前页码发送至本地透明白板层，由于透明白板层与文档渲染层在结构上分离且每一页的批注数据均带有对应的页码标识，透明白板层根据接收到的当前页码仅显示属于该页的批注内容并隐藏其他页码的批注，从而在页面滚动切换时自动实现了批注内容的跟随切换，无需手动重新加载或请求服务器数据，同时避免了不同页面批注相互混叠的视觉干扰。由此，本技术在实现跨终端页面跳转同步的基础上，显著提升了多页文档协同批注时的页面切换流畅性和批注显示准确性。
44、进一步的，所述以使所述后端合并接口将所述批注交互数据转换为与目标文档格式适配的矢量绘制数据，并将所述矢量绘制数据合并至目标文档的对应页面位置，生成携带批注的新文档，具体为：
45、收集所有批注交互数据；所述批注交互数据包含各批注的对应页码标识、绝对像素坐标、颜色信息及线宽信息；
46、获取所述目标文档各页面的原始尺寸，并获取前端显示区域中各页面的显示像素尺寸；
47、根据所述原始尺寸与所述显示像素尺寸的比值，确定各页面的横向缩放比例与纵向缩放比例；
48、将所述绝对像素坐标的横向坐标值乘以所述横向缩放比例，得到横向点坐标值；
49、将所述绝对像素坐标的纵向坐标值乘以所述纵向缩放比例，得到乘积结果；
50、以当前页面的纵向原始尺寸减去乘积结果，得到纵向点坐标值；
51、将所述横向点坐标值与所述纵向点坐标值组合为矢量绘制坐标；
52、将所述矢量绘制坐标、颜色信息及线宽信息封装为矢量绘制数据；
53、调用预设的文档处理库加载目标文档，根据所述对应页码标识将所述矢量绘制数据绘制至对应页面的所述矢量绘制坐标位置，生成合并后的携带批注的新文档。
54、本技术通过收集所有包含页码标识、绝对像素坐标、颜色及线宽信息的批注交互数据，并获取目标文档各页面的原始尺寸以及前端显示区域中各页面的显示像素尺寸，根据二者的比值确定各页面的横向缩放比例与纵向缩放比例，从而将前端采集的绝对像素坐标转换为与目标文档实际尺寸匹配的横向点坐标值和纵向点坐标值；特别地，通过以当前页面的纵向原始尺寸减去纵向坐标值与缩放比例的乘积结果，实现了前端坐标系（原点在左上角）与pdf文档坐标系（原点在左下角）的y轴方向翻转，使得批注位置能够精确映射到文档的正确页面区域；将转换后的矢量绘制坐标与颜色、线宽等信息封装为矢量绘制数据后，调用文档处理库加载原始文档并根据页码标识将矢量绘制数据绘制至对应页面的指定坐标位置，最终输出融合了所有批注的新文档。由此，本技术在实现多终端实时协同批注的基础上，进一步打通了从屏幕像素坐标到文档原生坐标的精准转换链路，使得原本仅存在于各自前端显示层上的临时笔迹能够被永久性地写入原始pdf文档中，生成可直接打印、归档或分发的带批注文档，显著提升了协同批注成果的可保存性和复用价值。
55、第二方面，本技术提供了一种基于websocket的多终端文档同步控制装置。所述基于websocket的多终端文档同步控制装置包括：
56、第一获取模块，用于获取目标文档的打开指令，所述打开指令包括文档标识信息；
57、发送模块，用于将所述打开指令发送至各个终端，以使各个终端根据所述文档标识信息加载并渲染目标文档，并在所述目标文档的渲染层之上叠加本地透明白板层；
58、第二获取模块，用于获取用户在任一终端的本地透明白板层上的批注交互数据；所述批注交互数据包括交互轨迹坐标、批注属性信息及对应页码标识；
59、转化模块，用于将所述批注交互数据转化为结构化数据，并通过websocket广播至其他终端，以使其他终端根据所述结构化数据中的对应页码标识，将结构化数据对应的批注重绘于本地透明白板层的对应位置；
60、控制模块，用于获取页面控制指令，将所述页面控制指令转发至各个终端，以使各个终端同步执行页面跳转，并在本地透明白板层上仅显示当前页面对应的批注内容。
61、本技术通过第一获取模块获取包含文档标识信息的目标文档打开指令，并由发送模块将该指令分发至各个终端，使各终端能够同步加载并渲染目标文档，同时在其渲染层之上叠加本地透明白板层，从而在不干扰文档显示的前提下为协同批注提供了独立的绘图平面；第二获取模块进一步采集用户在任一终端的透明白板层上的批注交互数据（包括轨迹坐标、属性信息及页码标识），转化模块将该数据转化为结构化数据后通过websocket广播至其他终端，使其他终端能够依据页码标识将批注精准重绘于各自的本地透明白板层相应位置，由于结构化数据量远小于视频流且websocket提供全双工低延迟通信，显著降低了带宽占用和传输延迟；控制模块获取页面控制指令并转发至各个终端，使所有终端同步执行页面跳转并仅显示当前页面对应的批注内容，避免了翻页时不同页面批注的混叠。上述各模块依次协同，形成了从文档加载、批注采集广播到页面级同步控制的完整闭环，有效提升了多终端协同批注的实时性、交互一致性和跨页面切换的准确性。
62、第三方面，本技术提供了一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如所述的一种基于websocket的多终端文档同步控制方法。其有益效果与本技术中第一方面提供的一种基于websocket的多终端文档同步控制方法相同。
63、第四方面，本技术提供一种终端设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面所述的任意一种基于websocket的多终端文档同步控制方法。