基于WebSocket实现多页面共享的方法、电子设备及存储介质与流程

基于websocket实现多页面共享的方法、电子设备及存储介质
技术领域
1.本发明涉及计算机领域，尤其涉及一种基于websocket实现多页面共享的方法、电子设备及存储介质。

背景技术：

2.websocket是一种在单个tcp连接上进行全双工通信协议，实现了客户端与服务器之间的实时通信。现有的一种即时数据传输方法，包括建立浏览器页面与websocket服务器之间的连接，利用所述websocket服务器推送数据到所述浏览器页面，再利用浏览器页面的事件触发机制，根据业务需求对websocket服务器推送数据进行过滤处理，并将过滤后的数据展示给用户。
3.但是目前浏览器本身不支持多个标签页执行代码加锁，当同时打开多个页标签页面时，这些页面会一下子都连接到websocket服务器上，即形成同一个用户与服务器建立了多个websocket页面连接，从而造成了服务器资源浪费等问题，另外当websocket服务器推送消息到客户端时，每个标签页面都会弹出提示信息，同一个用户会收到很多重复消息，用户体验效果差。

技术实现要素：

4.鉴于上述问题，提供了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种基于websocket实现多页面共享的方法、电子设备及存储介质。
5.依据本发明的第一方面，提供了一种实现多页面共享的方法，所述方法包括：
6.在服务器接收websocket连接请求，解析所述连接请求并获得发送该连接请求的用户id；对所述用户id设置锁，根据所述用户id查询套接字列表，若所述套接字列表存在该用户id，则拒绝该websocket连接请求并释放锁，所述锁是预设的请求用户间的锁；若所述套接字列表不存在所述用户id，则接收该websocket连接请求，将该用户id加入到所述套接字列表中并释放锁。
7.作为本发明的进一步改进，所述方法还包括：所述套接字列表，用来存储服务器端接收连接请求的历史用户数据，包括用户id、用户姓名和请求时间，且每个用户的id是唯一的。
8.作为本发明的进一步改进，所述方法还包括：所述服务器可以接收同一个用户发来的多个连接请求，但是每个用户与服务器的websocket连接只有一个。
9.作为本发明的进一步改进，所述方法还包括：所述锁采用的是一种分布式锁。
10.作为本发明的进一步改进，在“在服务器接收websocket连接请求”前，所述方法还包括：在客户端获取登录的用户id；根据所述用户id查询本地存储器，若所述本地存储器不存在该用户id，则发起websocket连接。
11.作为本发明的进一步改进，所述方法还包括：若所述本地存储器不存在该用户id，则将该用户id加入到本地存储器中；若所述本地存储器存在该用户id，则启动监听程序，所
述监听程序用于监听所述本地存储器中当前用户是否存在websocket连接，若否，则该用户发起websocket连接请求，若是则继续监听。
12.作为本发明的进一步改进，所述方法还包括：每个页面都设置一个监听程序，当用户打开页面时，若所述本地存储器存在该用户对应的websocket连接页面且所述websocket连接页面不是当前页面发起的，则启动当前页面对应的监听程序，直到当前页面变成websocket连接页面；若所述本地存储器不存在该用户对应的websocket连接，则当前页面发起websocket连接请求。
13.作为本发明的进一步改进，所述方法还包括：所述监听程序中设置一个多页面共享的计数器；当用户打开页面时，当前页面对应的监听程序通过轮询的方式查看所述本地存储器中页面的连接情况来设置计数器，若所述本地存储器中存在该用户建立的websocket连接，则计数器清零，否则计数器加1；若所述计数器达到设定的阈值时，则所述用户的所有非websocket连接页面都会同时发起websocket连接请求，所述非websocket连接页面是没有和服务器建立起websocket连接的页面。
14.根据本发明实施例的再一方面，提供一种电子设备，该电子设备包括存储器和处理器，所述存储器用于存储计算机程序，所述处理器，用于执行所述存储器中存储的计算机程序，且所述计算机程序被执行时，实现上述基于websocket实现多页面共享的方法。
15.根据本公开实施例的再一方面，提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述基于websocket实现多页面共享的方法。
16.本发明具有以下有益效果：本发明在服务器通过解析客户端发来的websocket连接请求获取该用户的id，对该用户id设置锁并判断套接字列表中是否存在该用户id，来确定是否同意与客户端建立websocket连接。当某个用户请求与服务器建立了websocket连接时，该用户再次发起连接请求时，必须等待上一个页面请求释放出锁以后才能接收新的websocket连接请求，同时采用锁起到了原子操作的作用，防止同一个用户发起多个websocket连接，造成资源浪费。相应地，在客户端，当某个用户通过浏览器向服务器端发起websocket页面请求时，获取发起请求的用户id，根据所述用户id查本地存储器是否有该用户的websocket页面连接，若有则启动该页面的监听程序，否则向服务器发起websocket页面连接请求。服务器设置的分布式锁和客户端的本地存储器相互配合，使得每个用户有且只有一个websocket连接，节省了服务器资源，同时也防止了多个进程之间的相互干扰，实现资源共享，改善用户的体验效果。
附图说明
17.图1是本发明实施例提供的一种基于websocket实现多页面共享的方法流程图。
18.图2是本发明实施例提供的一种电子设备的结构框图。
具体实施方式
19.以下将结合附图所示的具体实施方式对本发明进行详细描述。但这些实施方式并不限制本发明，本领域的普通技术人员根据这些实施方式所做出的结构、方法、或功能上的变换均包含在本发明的保护范围内。
20.需要说明的是，术语“包括”或者其任何其他变体意在涵盖非排他性的包含，从而
使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。此外，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。
21.虽然本技术提供了如下述实施方式或流程图1所述的方法操作步骤，但是基于常规或者无需创造性的劳动，所述方法在逻辑性上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本技术实施方式中所提供的执行顺序。
22.如图1所示，本发明实施例提供一种基于websocket实现多页面共享的方法流程图，websocket是一种在单个tcp(transmission control protocol，传输控制协议)连接上进行全双工通信的协议，同时websocket是一种长连接协议，能使得服务器与客户端保持长久的联系，另外，服务器端能够向客户端主动推送消息，可以实现客户端和服务端之间数据的实时通信。本发明实施例的基于websocket实现多页面共享的方法具体包括以下步骤：
23.步骤101，用户登录浏览器，向服务器端发起websocket连接请求；
24.步骤102、获取登录浏览器的用户id；
25.步骤103、根据所述用户id查本地存储器，判断本地存储器中是否有该用户对应的websocket页面连接，若不存在，则发起websocket连接请求并将该用户id加入到本地存储器中；
26.步骤104、若存在，则启动页面监听程序，监听本地存储器中当前用户是否存在websocket连接，若否，则该用户发起websocket连接请求，若是则继续监听。
27.在客户端，用户打开浏览器登录网站后，如果是第一次登录会生成唯一的客户id，这是识别用户身份的唯一标识，后续用户的操作过程都是通过该标识区分的。当用户发起websocket连接请求时，客户端获得当前登录发起连接请求的用户id和当前请求页面id，根据所述用户id和页面id查本地存储器，于一具体实施方式中，所述本地存储器定义为localstorage，这是在html5中加入的一个特性，用来作为本地存储器使用的，可以存储的信息包括用户id和页面id等信息，若所述本地存储器不存在该用户id，则表示当前用户id还没有建立websocket页面连接，反之，则表示当前用户已经建立了websocket页面连接，具体连接的页面信息可根据本地存储中的页面id来确定，所以同一个用户可以打开多个页面，这些页面可以分为websocket连接页面和非websocket连接页面，所述websocket连接页面表示与服务器建立了websocket连接的页面，非websocket连接页面是表示与服务器未建立websocket连接的页面，同一个用户只会有一个websocket连接页面，但是可以有多个非websocket连接页面。
28.当用户打开浏览器登录页面时，根据登录页面的用户id查所述本地存储器，若所述本地存储器不存在该用户id，则当前登录页面向服务端发起websocket页面连接请求；若所述本地存储器存在该用户id，则启动当前登录页面的监听程序，所述监听程序用于监听所述本地存储器中当前用户是否存在websocket连接，若否，则该用户发起websocket连接请求，若是则继续监听。具体地，包括每个页面都设置一个监听程序，当用户打开页面时，若所述本地存储器存在该用户对应的websocket连接页面且所述websocket连接页面不是当前页面发起的，则启动当前页面对应的监听程序，直到当前页面变成websocket连接页面；若所述本地存储器不存在该用户对应的websocket连接，则当前页面发起websocket连接请求，如果服务器同意则建立了新的websocket连接。
29.另外，所述监听程序中设置一个多页面共享的计数器，该计数器初始化为零，当用户打开页面时，当前页面对应的监听程序通过轮询的方式查看所述本地存储器中页面的连接情况来设置计数器，若所述本地存储器中存在该用户建立的websocket连接，则计数器清零，否则计数器加1；若所述计数器达到设定的阈值时，则所述用户的所有非websocket连接页面都会同时发起websocket连接请求，但是最终只有一个页面能请求成功，建立新的websocket连接，同时将相应的内容更新到所述本地存储器中，即删除断开的连接页面对象，增加新建的连接页面对象。
30.于一具体实施例中，所述预设阈值为3秒，轮询时间间隔是1秒。假设某用户id为user001，该用户打开了3个tab页面，即tab1，tab2和tab3，分别对应的页面id为page001，page002和page003。当打开tab1时，查看所述本地存储器，没有到该用户user001对应的信息，表示user001用户尚未建立websocket连接，此时tab1发起了websocket连接请求，且与服务器端成功建立了websocket连接，同时产生了一个连接页面对象，该连接页面对象存放有用户id：user001，tab1的页面id：page001和计数器，该连接页面对象被存放在所述本地存储器中，由于tab1是连接页面，所以每隔1秒轮询时间就会将计数器清零。当打开tab2时，查询所述本地存储器，发现当前用户user001已经存在页面连接，则启动tab2对应的监听程序，此时每隔1秒，将计数器加1，并判断计数器是否超过预设阈值3秒，若超过了表示tab1连接已经断开，则tab2就发起了websocket连接请求。同理，tab3和tab2做一样的操作，所以如果当发现计数器大于3时，tab2和tab3同时发起websocket连接请求，但是最后也只会存在一个连接请求成功，假设是tab2建立了连接请求，此时对应的本地存储器信息也要实时更新，将tab1产生的连接页面对象删除，新增tab2产生的连接页面对象，即新增用户id：user001，页面id：page002，并删除用户id：user001，页面对象：page001。
31.步骤105、解析所述连接请求并获得发起连接请求的用户id；
32.步骤106、对该用户id设置锁，并根据用户id查套接字列表，判断所述套接字列表中是否存在该用户id；
33.步骤107、若不存在则接收该连接请求，将该用户id加入到套接字列表中并释放锁；若存在则拒绝该连接请求，并释放锁；
34.步骤108、响应websocket连接请求。
35.在服务器，接收到客户端发来的websocket连接请求，对其进行解析获得发送该连接请求的用户id，对该用户id设置锁，所述的锁是一种分布式锁，是预设的请求用户间的锁，根据所述用户id查询服务器端的套接字列表，所述套接字列表是用来存储服务器接收连接请求的历史用户数据，包括用户id、用户姓名和请求时间以及其他信息，且每个用户的id是唯一的。若所述套接字列表中存在该用户id，表示该用户id已经建立了websocket连接了，此时拒绝同一个用户的其他连接请求，给客户端发送提示信息并释放所设置的分布式锁，方便其他用户发起连接请求；若所述套接字中不存在该用户id，则接收该websocket连接请求，将该用户id加入到套接字列表中并释放锁。对用户设置锁目的是当服务器再次收到该用户的其他请求连接时，都需要等待上个连接请求的锁释放，从而保证了每个用户只能建立一个websocket连接，当服务器端和客户端建立websocket连接后，可进行数据的传输，其他非websocket连接页面访问服务器时，是通过websocket连接页面的数据分发来实现的。
36.本发明一实施例还提供一种电子设备200，如图2所示，所述电子设备可以一个或多个处理器201以及与处理器201连接的一个或多个存储器202。电子设备200还可以包括输入接口203和输出接口204，用于与另一装置或系统进行通信。电子设备200中的处理器201调用存储在存储器202中的程序代码，以执行上述实例中基于websocket实现多页面共享的方法。
37.本发明实施例还提供一个存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上任意一项所述基于websocket实现多页面共享的方法。
38.综上，本发明通过在服务器端利用分布式锁和套接字来判断当前用户是否已经存在websocket连接，如果存在连接则拒绝当前用户的其他连接请求并返回提示信息，同时释放锁；如果不存在则接收当前的连接请求，建立服务器端与当前页面的websocket连接请求，并把当前用户id加入到套接字列表中，同时释放锁。锁的使用使得服务器和同一个用户只能建立一个websocket页面连接，从而减少了对服务器的访问量，降低服务器资源和性能的消耗，同时还实现了资源的共享，改善用户的体验效果。客户端利用网页自带的本地存储器实现各个页面共享存储，使得同一个用户也只能建立一个websocket页面连接，同时配合每个页面的监听程序，可以让实时监听当前用户与服务器的websocket页面连接情况，一旦发现当前用户的websocket页面连接断开时，当前用户的其他所有非websocket连接页面都会同时向服务器发起websocket连接请求，从而保持与服务器的长连接状态，保持实时通信，使得用户访问服务器无延时，改善用户的体验效果。
39.应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施方式中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。
40.上文所列出的一系列的详细说明仅仅是针对本发明的可行性实施方式的具体说明，它们并非用以限制本发明的保护范围，凡未脱离本发明技艺精神所作的等效实施方式或变更均应包含在本发明的保护范围之内。

技术特征：

1.一种基于websocket实现多页面共享的方法，其特征在于，所述方法包括：在服务器接收websocket连接请求，解析所述连接请求并获得发送该连接请求的用户id；对所述用户id设置锁，根据所述用户id查询套接字列表，若所述套接字列表存在该用户id，则拒绝该websocket连接请求并释放锁，所述锁是预设的请求用户间的锁；若所述套接字列表不存在所述用户id，则接收该websocket连接请求，将该用户id加入到所述套接字列表中并释放锁。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：所述套接字列表，用来存储服务器接收连接请求的历史用户数据，包括用户id、用户姓名和请求时间，且每个用户的id是唯一的。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：所述服务器可以接收同一个用户发来的多个连接请求，但是每个用户与服务器的websocket连接只有一个。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：所述锁采用的是一种分布式锁。5.根据权利要求1所述的方法，其特征在于，在“在服务器接收websocket连接请求”前，所述方法还包括：在客户端获取登录的用户id；根据所述用户id查询本地存储器，若所述本地存储器不存在该用户id，则发起websocket连接。6.根据权利要求5所述的方法，其特征在于，所述方法还包括：若所述本地存储器不存在该用户id，则将该用户id加入到本地存储器中；若所述本地存储器存在该用户id，则启动监听程序，所述监听程序用于监听所述本地存储器中当前用户是否存在websocket连接，若否，则该用户发起websocket连接请求，若是则继续监听。7.根据权利要求6所述的方法，其特征在于，所述方法还包括：每个页面都设置一个监听程序，当用户打开页面时，若所述本地存储器存在该用户对应的websocket连接页面且所述websocket连接页面不是当前页面发起的，则启动当前页面对应的监听程序，直到当前页面变成websocket连接页面；若所述本地存储器不存在该用户对应的websocket连接，则当前页面发起websocket连接请求。8.根据权利要求7所述的方法，其特征在于，所述方法还包括：所述监听程序中设置一个多页面共享的计数器；当用户打开页面时，当前页面对应的监听程序通过轮询的方式查看所述本地存储器中页面的连接情况来设置计数器，若所述本地存储器中存在该用户建立的websocket连接，则计数器清零，否则计数器加1；若所述计数器达到设定的阈值时，则所述用户的所有非websocket连接页面都会同时发起websocket连接请求，所述非websocket连接页面是没有和服务器建立起websocket连接的页面。
9.一种电子设备，其特征在于，所述设备包括处理器和存储器，所述存储器用于存储计算机程序，所述处理器用于执行所述存储器中存储的计算机程序，且所述计算机程序被执行时，实现上述权利要求1-8中任一所述的基于websocket实现多页面共享的方法。10.一种存储介质，所述存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时候实现如权利要求1-8任一所述的基于websocket实现多页面共享的方法。

技术总结

本发明公开了一种基于WebSocket实现多页面共享的方法，包括：服务器接收WebSocket连接请求，解析连接请求并获得用户ID；对所述用户ID设置锁，根据用户ID查询套接字列表，若所述套接字列表存在该用户ID，则拒绝该WebSocket连接请求，返回错误信息并释放锁；若所述套接字列表不存在所述用户ID，则接收该WebSocket连接请求，将该用户ID加入到所述套接字列表中并释放锁，而客户端根据用户ID查询本地存储器，若该本地存储器不存在用户ID，则发起WebSocket连接，并将该用户ID加入到本地存储器中；若本地存储器存在该用户ID，则启动监听程序，直到该用户访问的页面变成WebSocket连接页面。本发明基于WebSocket实现多页面共享，不仅减少了对服务器的访问量，同时兼顾了资源共享和体验效果。共享和体验效果。共享和体验效果。