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

在这里插入图片描述

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

文章目录

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

前言

现代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.mzph.cn/news/117449.shtml

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

相关文章

《C和指针》笔记34:字符串函数

文章目录 1. 获取字符串长度strlen 2. 复制字符串strcpystrncpy 3. 拼接字符串strcatstrncat 4. 字符串比较strcmpstrncmp 1. 获取字符串长度 strlen 库函数strlen的原型如下: size_t strlen( char const *string );注意strlen返回一个类型为size_t的值。这个类型…

用 Go 访问 MySql 数据库

所有代码样例 package mainimport ("database/sql""fmt"_ "github.com/go-sql-driver/mysql" )var db *sql.DB// 初始化连接 func initDB() (err error) {db, err sql.Open("mysql", "root:mm..1213tcp(127.0.0.1:3306)/chapte…

【JavaEE】网络原理---TCP协议的易懂图文详解(确认应答、超时重传、连接管理、滑动窗口、流量控制)

一、TCP协议 TCP,即Transmission Control Protocol,传输控制协议。人如其名,要对数据的传输进行一个详细的控制。 1.1 TCP协议格式 (为了方便排版这样化的,我们从上到下依次理解) 二、TCP原理 2.1 确…

【Spring】使用aop切面编程时要给那些类加注解

🎄欢迎来到边境矢梦的csdn博文🎄 🎄本文主要梳理 Spring 中使用aop切面编程时要给那些类加注解 🎄 🌈我是边境矢梦,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一…

使用达梦数据库的总结

–修改当前会话所在模式: set schema 模式名;–创建表空间、用户名并为用户指定表空间,并为用户授权 create tablespace "RSGL_BZK" datafile REGL_BZK.DBF size 7488 autoextend on next 128 maxsize 33554431 CACHE NORMAL; create user …

UE4 中可全局获取的变量(例如游戏实例、玩家控制器等) 详解

目录 0 引言1 全局对象(全局变量)1.1 游戏实例 GameInstance1.1.1 介绍1.1.2 使用 GameInstance 1.2 玩家控制器 PlayerController1.3 游戏世界类 UWorld 🙋‍♂️ 作者:海码007📜 专栏:UE虚幻引擎专栏&…

优雅的使用String字符串处理各种类型转换

文章目录 🌟 优雅的使用String字符串处理各种类型转换🍊 基本类型转字符串🍊 字符串转基本类型🍊 字符串与字符数组的转换🍊 字符串与字节数组的转换🍊 其他类型转字符串🍊 总结 📕我…

Flask后端开发(一)-基础知识和前期准备

目录 1.背景介绍1.1. 项目背景1.2. 项目难点1.3. 项目环境 2. flask后端开发实现的功能3. flask部署和前后端对接3.1. flask运行配置和服务器部署3.2. flask前后端传参 4. 后端测试工具4.1. 工具介绍4.2. 工具使用 后记 1.背景介绍 1.1. 项目背景 就是前几个月临时接手了一个…

CPU眼里的C/C++: 1.3 汇编级单步调试函数执行过程

1. 目的 2. 基于 GDB 的汇编级单步调试 原始代码 #include <stdio.h>long test() {long a 1;a 2;return a; }int main() {int ret test();printf("test return %d\n", ret);return 0; }关键 gdb 命令 si 指令执行汇编级的单步调试info registers 读取寄…

【RocketMQ系列十四】RocketMQ中消息堆积如何处理

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

RabbitMQ原理(五):消费者的可靠性

文章目录 3.消费者的可靠性3.1.消费者确认机制3.2.失败重试机制3.3.失败处理策略3.4.业务幂等性3.4.1.唯一消息ID3.4.2.业务判断 3.5.兜底方案 3.消费者的可靠性 当RabbitMQ向消费者投递消息以后&#xff0c;需要知道消费者的处理状态如何。因为消息投递给消费者并不代表就一定…

Unsupervised Medical Image Translation with Adversarial Diffusion Models

基于对抗扩散模型的无监督医学图像翻译 论文链接&#xff1a;https://arxiv.org/abs/2207.08208 项目链接&#xff1a;https://github.com/icon-lab/SynDiff Abstract 通过源-目标模态转换对缺失图像进行补全可以提高医学成像方案的多样性。利用生成对抗网络(GAN)进行一次映…

Leetcode—104.二叉树的最大深度【简单】

2023每日刷题&#xff08;六&#xff09; Leetcode—104.二叉树的最大深度 递归实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/int maxDepth(struct TreeNode* root){…

分类预测 | MATLAB实现SSA-CNN-GRU-Attention数据分类预测(SE注意力机制)

分类预测 | MATLAB实现SSA-CNN-GRU-Attention数据分类预测&#xff08;SE注意力机制&#xff09; 目录 分类预测 | MATLAB实现SSA-CNN-GRU-Attention数据分类预测&#xff08;SE注意力机制&#xff09;分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现…

C#,数值计算——分类与推理Phylo_upgma的计算方法与源程序

1 文本格式 using System; using System.Collections.Generic; namespace Legalsoft.Truffer { public class Phylo_upgma : Phylagglom { public override void premin(double[,] d, int[] nextp) { } public override double dminfn(doubl…

structs2 重构成SpringBoot架构

# 目录 structs2 重构成SpringBoot架构 1.1 structs2架构&#xff1a; 1.2 springboot 架构 1.3 演化要点&#xff1a; 1.基于前端的展示层不需要修改 2.HttpServlet 将会有SpringBoot annotation 来处理 3.构建前置的Structs url 转发器&#xff0c;适配 4.ActionSupport将由…

C#开发的OpenRA游戏之金钱系统(5)

C#开发的OpenRA游戏之金钱系统(5) 前面分析了采矿车到矿场采矿的过程,那么采矿车什么时候采满呢?采满之后又是怎么样运送到精炼工厂呢? 首先我们来分析采矿车是怎么样判断采满矿产的,毕竟采矿车不能无限装载矿产资源。所以我们再次回到采矿车类Harvester,来分析它怎么…

上海亚商投顾:沪指放量反弹 两市超4500股飘红

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数昨日集体反弹&#xff0c;深成指、创业板指盘中涨超1%&#xff0c;黄白二线大幅分化&#xff0c;题材…

【SwiftUI模块】0060、SwiftUI基于Firebase搭建一个类似InstagramApp 3/7部分-搭建TabBar

SwiftUI模块系列 - 已更新60篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI、SwiftUI4.0、Instagram、Firebase 运行环境: SwiftUI4.0 Xcode14 MacOS12.6 iPhone Simulator iPhone 14 Pro Max SwiftUI基于Firebase搭建一个类似InstagramApp 3/7部分-搭建Tab…

Mybatis-Plus CRUD

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Mybatis-Plus CRUD 通用 Service CRUD 封装 IService 接口&#xff0c;进一步封装 CRUD 采用 get 查询、remove 删除 、list 查询集合、page 分页的前缀命名方式区分 …