当前位置：首页 > 编程日记 > 正文

浏览器及时感知服务端数据变化的方式

编程日记 2024-10-05 18:50:00

需求

在公司，有一个需求，是浏览器实时获取服务端数据变化，然后根据变化做相应的动作。需求场景如下：手机端扫描二维码，然后获取待取件订单列表，点击取件，进行取件，同时远端打印机打印出取件小票。

技术难点

手机端点击取货，浏览器如何感知到，如何做相应的操作（本文要解决的问题）
浏览器感知后，如何调用打印服务，进行按照相应的模版打印

技术方案及选型

不断轮询（pull的方式）

所谓不断轮询，就是浏览器保持发送请求，检查服务器是否有新信息返回，服务器对于每次请求均应立即响应。这种方式需要设定合理的时间间隔。例如：邮件客户端可以每隔几分钟检查服务器是否有新邮件。

优点

简单，可靠

局限性

效率不高。如果需要及时获得服务器信息，那么轮询频率就必须非常高，导致服务端压力较大。更适合小型应用。

长轮询（pull的方式）

浏览器发送请求，但是服务器不予以响应，一直到服务器有了新信息才响应客户端。从客户端的角度看它和传统的轮询相同。但从服务器端的角度来看它与传统的轮询相比，减少了服务器端的开销。
例子：网页版聊天工具如webqq（摘抄）：
1.用户在网页上发送聊天信息时，网页会给服务器发送请求，服务器将聊天数据存储下来；
2.网页也会向服务器请求对方发送的聊天信息；
3.服务器收到这种请求后，会通过“死循环”等方式阻塞该请求，从而在一定程度上控制住这个连接。“死循环“退出的条件有两种：一是有数据需要响应，此时便立即发送该响应；二是超时，等了很久还是没有数据，服务器不能让客户端无限地等待下去，所以会在超时时间点给客户端发送空的响应;
4.网页处理完响应后再向服务器发送新一轮的请求。

优点

相比不断轮询，性能有了很大提升。

缺点

依然有空的响应。

长连接（push的方式）

通过websocket协议使浏览器和服务器建立一个通道，当服务器有信息变化时，就主动推送一次。

优点

真正实时。

局限性

由于websocket是html5的新特性，浏览器对h5的支持有限，目前chrome，firefox，IE10以上支持。

常见应用场景

扫码登录网页版微信。12306支付时，扫支付宝，会自动回填浏览器用户信息等。

选型

技术选型，并不是技术越高级，越高大上越好，而是看我们的技术，能不能在最短的时间内完成，以最低的成本来支撑业务的正常推进。所以，以上三种方法，根据自己系统的情况来选择，并不能定论哪个方法好，哪个方法不好。

https://www.dkcj.cn/info/21746.html

需求