善用Websocket替代前端轮询请求接口

一、由来

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

实际场景:实时获取后台数据,首先想到的一定是ajax每隔几秒不断轮询调用后台接口,这种方式可以实现,简单粗暴,但是一次次的请求会浪费很多的带宽资源。

在java中,有消息中间件MQ,客户端向Broker中间件发消息,服务端监听Broker,也可替换http接口调用实现数据传输。

html5为了优化轮询调用,也提供了类似方式。

WebSocket通信协议,建立一个长链接,客户端监听服务端信息,此链接可手动关闭。

var Socket = new WebSocket(url, [protocol] );

二、事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:

事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发

 

<!DOCTYPE HTML>
<html>
  
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值