前端(二十三)——轮询和长轮询

在这里插入图片描述

😫博主:小猫娃来啦
😫文章核心:实现客户端与服务器实时通信的技术手段

文章目录

  • 前言
  • 轮询技术
    • 轮询的概念
    • 轮询的实现原理
    • 轮询的优缺点
    • 轮询的使用场景
  • 长轮询技术
    • 长轮询的概念
    • 长轮询的实现原理
    • 长轮询的优缺点
    • 长轮询的使用场景
  • 轮询与长轮询的比较
  • 示例代码
  • 结论

前言

现代Web应用程序对实时通信的需求越来越高,为了满足这种需求,轮询和长轮询成为了常用的技术手段。本文将深入探讨轮询和长轮询的实现原理、优缺点以及使用场景,并提供代码示例,以帮助读者更好地理解和应用这两种技术。


轮询技术

轮询的概念

轮询是一种客户端与服务器之间实时通信的技术手段,它的基本原理是客户端定期发送请求来查询服务器是否有新数据或事件,并将响应返回给客户端。如果服务器有新的数据或事件,则将其返回给客户端;如果没有,则返回一个空响应。客户端收到响应后,可以处理数据或事件,并根据需要继续发送下一个请求。

轮询的实现原理

轮询的实现原理很简单,客户端期发送HTTP请求给服务器并等待响应。客户端可以使用定时器来定期发送请求,通常间隔时间设置为几秒钟到几分钟。服务器收到请求后检查是否有新数据或事件,并将其返回给客户端作为响应。客户端收到响应后,处理数据或事件,并随后发送下一个请求。

// 客户端代码
function pollServer() {fetch('/api/data').then(response => response.json()).then(data => {// 处理服务器响应的数据console.log('Received data:', data      // 继续下一次轮询setTimeout(pollServer, 5000);});
}// 开始轮询
pollServer();
// 服务器端代码 (使用 Express 框架)
const express = require('express');
const app = expressapp.get('/api/data', (req, res) => {// 假设需要返回的数据为 { "status": "ok", "data": ... }const responseData = {status: 'ok',data: ... // 根据实际需求提供数据};res.json(responseData);
});app.listen(3000, () => {console.log('Server is running on port 3000');
});

轮询的优缺点

轮询的优点是简单易实现,适用于各种浏览器和服务器。然而,由于轮询的定期发送请求的特性,它会产生不必要的网络流量和延迟,并对服务器和客户端资源造成额外的负担。

轮询的使用场景

轮询适用于不需要实时性的应用场景,例如在线聊天室、实天气更新等。在这些场景下,短暂的延迟不会对用户体验产生重大影响。


长轮询技术

长轮询的概念

长轮询是一种改进的轮询技术,其主要目的是降低轮询过程中的资源消耗和延迟。长轮询的基本原理是客户端发送一个HTTP请求给服务器,并保持连接打开,直到服务器有新的数据或事件时才返回响应给客户端。在这期间,服务器会一直保持连接打开,直到超时或有新数据或事件。

长轮询的实现原理

长轮询的实现原理与轮询类似,只是客户端的请求会保持打开状态,直到服务器返回响应或超时。在服务器端,可以使用阻塞方式处理长轮询请求,即服务器线程会一直等待直到有新的数据或事件,然后返回响应给客户端。客户端收到响应后,可以处理数据或事件,并随后发送下一个长轮询请求。

// 客户端代码
function longPollServer() {fetch('/api/data').then(response => {if (response.status === 204) {// 服务器返回204表示没有新数据或事件,继续进行长轮询longPollServer();} else if (response.status === 200) {// 服务器返回200表示有新数据或事件,处理数据并进行下一次长轮询response.json().then(data => {console.log('Received data:', data);// 继续进行长轮询longPollServer();});}});
}//开始长轮询
longPollServer
// 服务器端代码 (使用 Express 框架)
const express = require('express');
const app = express();let newData = null;app.get('/api/data', (req, res) => {if (newData === null) {// 服务器新数据或事件,返回204res.sendStatus(204);} else    // 服务器有新数据或事件,返回200和数据res.json(newData);newData = null;}
});// 更新数据或的路由,此处为示例代码,根据实际求进行修改
app.post('/api', (req, res) => {// 更新服务器的数据或事件newData = {... // 根实际需求更新数据或事件};// 返回响应res.sendStatus(200);
});app.listen(3000, () => {console.log('Server is running on port3000');
});

长轮询的优缺点

长轮询相较于轮询技术来说,减少了不必要的网络流量和请求次数,降低了服务器和客户端的资源消耗。但是相对于传统的轮询技术,长轮询的实现更加复杂,并且需要服务器支持长时间保持连接的能力。

长轮询的使用场景

长轮询适用于对实时性要求较高的应用场景,例如在线游戏、即时消息推送等。在这些场景下,降低延迟和减少不必要的资源消耗对于提供良好的用户体验非常重要。


轮询与长轮询的比较

轮询和长轮询都是实现实时通信的有效技术手段,但两者在资源消耗、延迟和实时性等方面有所不同。下表总结了两者的比较:

特性轮询长轮询
资源消耗
延迟较高较低
实时性较低较高
实现难度简单复杂

示例代码

下面是一个使用轮询实现实时时间更新的简单示例代码:

// 客户端代码
function pollServer() {发送HTTP请求给服务器fetch('/api/time').then(response => response.json()).then(data => {// 处理服务器响应的时间数据const currentTime = new Date(data.time);document.getElementById('time').innerText = currentTime.toLocaleTimeString();// 继续下一次轮询setTimeout(pollServer, 5000);});
}// 开始轮询
pollServer();
# 服务器端代码 (使用Flask框架)
import datetime
from flask import Flask, jsonifyapp = Flask(__name__)@app.route('/api/time')
def get_time():# 返回服务器当前的时间return jsonify({'time': datetime.datetime.now()})if __name__ == '__main__':app.run()

结论

轮询和长轮询都是实现客户端与服务器实时通信的技术手段,它们在资源消耗、延迟和实时性等方面存在差异。轮询适用于不需要实时性要求很高的场景,而长轮询适用于对实时性要求较高的场景。根据具体的应用需求和系统资源情况,选择合适的实时通信技术可以提供更好的用户体验和系统性能。

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/169828.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CDC实时数据同步

一丶CDC实时数据同步介绍 CDC实时数据同步指的是Change Data Capture(数据变更捕获)技术在数据同步过程中的应用。CDC技术允许在数据源发生变化时,实时地捕获这些变化,并将其应用到目标系统中,从而保持数据的同步性。…

FreeRTOS 任务调度和任务的状态

目录 什么是任务调度? FreeRTOS的任务调度规则是怎样的? 抢占式调度运行过程​编辑 时间片调度运行过程​编辑 任务的状态 任务调度和任务的状态案例分析 什么是任务调度? 调度器就是使用相关的调度算法来决定当前需要执行的哪个任务。…

2 第一个Go程序

概述 在上一节的内容中,我们介绍了Go的前世今生,包括:Go的诞生、发展历程、特性和应用领域。从本节开始,我们将正式学习Go语言。Go语言是一种编译型语言,也就是说,Go语言在运行之前需要先进行编译&#xff…

tomcat的负载均衡、动静分离(nginx联动)

动静分离: 访问静态页面和动态页面分开 实现动态和静态页面负载均衡 实验5台虚拟机 一、动态负载均衡 3台虚拟机模拟: 代理服务器:30 tomcat动态页面:21、22 代理服务器: proxy_pass http://tomcat; proxy_set_h…

docker环境,ubuntu18.04安装VTK8.2和PCL1.9.1

下载源码和依赖库 首先下载源码VTK8.2: Download | VTK 下载PCL1.9.1链接:Releases PointCloudLibrary/pcl GitHub 下载好了以后,先安装PCL依赖 sudo apt-get update sudo apt-get install git build-essential linux-libc-dev sudo apt-get instal…

jenkins实践篇(1)——基于分支的自动发布

问题背景 想起初来公司时,我们还是在发布机上直接执行发布脚本来运行和部署服务,并且正式环境和测试环境的脚本都在一起,直接手动操作脚本时存在比较大的风险就是将环境部署错误,并且当时脚本部署逻辑还没有检测机制,…

unity脚本_Mathf和Math c#

首先创建一个脚本 当我们要做一个值趋近于一个值变化时 可以用Mathf.Lerp(start,end,time);方法实现 比如物体跟随

Plooks大型视频在线一起看网站源码

在前段时间,因为想和异地的朋友一起看电影,但是发现有电影的地方没有一起看功能,有一起看功能的视频网站没有电影,所以就想自己做一个一起看网站,于是就有了Plooks。 Plooks是一个完整的视频网站,其中包括…

Java中配置RabbitMQ基本步骤

在Java中配置RabbitMQ&#xff0c;需要遵循以下步骤&#xff1a; 1.添加依赖 在项目的pom.xml文件中添加RabbitMQ的Java客户端依赖&#xff1a; <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><versio…

BurpSuite安装

下载 BurpSuite 下载 Java17 下载后确定版本 java -version获取启动器 密钥生成器 破解 将下载的 BurpSuite、启动器、密钥生成器&#xff0c;放入同一个目录 打开 CMD 进入该目录 启动密钥生成器 java -jar burp-keygen-scz.jar开启新的CMD&#xff0c;进入该目录 启动…

uniapp: 本应用使用HBuilderX x.x.xx 或对应的cli版本编译,而手机端SDK版本是 x.x.xx。不匹配的版本可能造成应用异常。

文章目录 前言一、原因分析二、解决方案2.1、方案一&#xff1a;更新HbuilderX版本2.2、方案二&#xff1a;设置固定的版本2.3、方案三&#xff1a;忽略版本&#xff08;不推荐&#xff09; 三、总结四、感谢 前言 项目场景&#xff1a;示例&#xff1a;通过使用HbuilderX打包…

WPF中的绑定知识详解(含案例源码分享)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

【QT】信号和槽

一、前置示例代码 main.cpp #include "widget.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv); // 应用程序对象a&#xff0c;在Qt中&#xff0c;应用程序对象&#xff0c;有且仅有一个。Widget w; // 窗口对…

Centos8 降低gcc版本至gcc-7.3

1 首先卸载系统中的gcc sudo yum remove gcc 2 重新安装gcc-7.3 sudo dnf group install “Development Tools” 然后再次卸载gcc sudo yum remove gcc 然后发现centos-release-scl-rh已经安装了 sudo yum install centos-release-scl-rh yum -y install devtoolset-7-gcc dev…

docker、docker-compose安装教程,很详细

docker、docker-compose安装教程&#xff0c;很详细 一、卸载旧版1、查看有没有安装过旧版2、停止docker3、删除安装过docker的相关包4、删除docker相关的镜像和容器 二、docker安装1、设置阿里云镜像2、查看所有docker3、安装最新版本4、安装指定版本 三、使用前准备1、启动do…

苍穹外卖-01

苍穹外卖-01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; ​ 管理端-外卖商家使用 ​ 用户端-点餐用户使用 当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一名…

关于nacos的配置获取失败及服务发现问题的排坑记录

nacos配置更新未能获取到导致启动报错 排查思路&#xff1a; 1、是否添加了nacos的启动pom依赖 参考&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId><…

openEuler 22.03 LTS 安装 Docker CE 和 Dcoker Compose

openEuler 使用 DNF 安装 Docker CE 1024&#xff0c;节日快乐&#xff01;回归正题&#xff0c;DNF 安装 DockerOS 系统环境准备安装 docker-ce 步骤1、更新系统2、安装必要的软件包3、添加 Docker CE 存储库4、更新索引缓存并安装 Docker CE5、启动 Docker 服务6、查看 Docke…

数据挖掘和大数据的区别

数据挖掘 一般用于对企业内部系统的数据库进行筛选、整合和分析。 操作对象是数据仓库&#xff0c;数据相对有规律&#xff0c;数据量较少。 大数据 一般指对互联网中杂乱无章的数据进行筛选、整合和分析。 操作对象一般是互联网的数据&#xff0c;数据无规律&#xff0c;…

【ELK】日志系统部署

一、ELK日志分析系统 1、ELK的组成 ElasticSearchLogStashKibana ELK基于这三个开源日志的收集、存储、检索和可视化的解决方案&#xff1b;可帮助用户快速定位和分析应用程序的故障&#xff0c;监控应用程序性能和安全&#xff0c;以及提供丰富的数据分析和展示功能。 2、完…