定时轮询-长轮询-websocket

一般网页 点击网页后,前端向后端 发送请求(使用http协议)

那么如何实现后端主动先前端发送数据,比如:网页游戏 聊天室 文件共享 扫码登入

http定时轮询 (轮询)

在前端代码中每隔一段时间向后端发送请求。 前端不断询问后端 这个码有人扫过了没。

(伪服务器推)

消耗带宽 服务器压力大

应用:微信扫码登入

长轮询

客户端发起请求后,服务端发现当前没有新的数据,这个时候服务端没有立即返回请求,而是将请求挂起,在等待一段时间后(一般为30s或者是60s),发现还是没有数据更新的话,就返回一个空结果给客户端。客户端在收到服务端的回复后,立即再次向服务端发送新的请求。

应用:这就是百度网盘的扫码登录 rabbitMQ 消费者取消息

避免了客户端大量的重复请求。

服务端资源大量消耗,服务端会一直hold住客户端的请求,这部分请求会占用服务器的资源。难以处理数据更新频繁的情况 如果数据更新频繁,会有大量的连接创建和重建过程,这部分消耗很大。

websocket

http1.0:单工。因为是短连接,客户端发起请求之后,服务端处理完请求并收到客户端的响应后即断开连接。

http1.1:半双工。默认开启长连接keep-alive,开启一个连接可发送多个请求。

http2.0:全双工,允许服务端主动向客户端发送数据。

WebSocket 是独立的、创建在 TCP(TCP 是基于全双工的可信传输协议的) 上的协议。

Websocket 通过HTTP/1.1 协议的101状态码进行握手。101:HTTP协议切换为WebSocket协议。

image-20221203194314833

image-20221203171417367

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端使用WebSocket可以实现轮询请求数据。WebSocket是一种在单个 TCP 连接上进行全双工通信的协议。相比于传统的轮询方式,WebSocket具有以下优点: 1. 实时性高:WebSocket建立起久的连接后,可以实时推送数据,避免了频繁发送请求的开销。 2. 减少网络负载:WebSocket的连接是双向的,可以同时进行数据的发送和接收,不需要每次请求都带上HTTP头。 3. 较低的延迟:WebSocket使用的是单个TCP连接,可以减少网络延迟,提升性能。 相比之下,轮询请求数据的方式存在一些缺点: 1. 服务端资源消耗较大:轮询方式中,服务端需要持续hold住客户端的请求,这会导致占用服务器资源。 2. 数据更新频繁时效率低:如果数据更新频繁,每次都需要创建和重建连接,这会带来较大的开销。 因此,前端使用WebSocket可以更好地实现轮询请求数据的需求,提高实时性和性能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [前端和后台进行WebSocket连接和axios轮询的方法(vue框架)](https://blog.csdn.net/weixin_43216105/article/details/89555480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [数据实时更新解决方案(轮询以及WebSocket)](https://blog.csdn.net/qq_43456687/article/details/128133498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值