短轮询，长轮询，SSE的应用场景。

于 2025-03-21 12:56:27 发布
阅读量596 收藏 16
点赞数 16
分类专栏： 网络 文章标签： 前端 javascript 笔记 spring boot 网络协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48076747/article/details/146418079
版权

文章目录

前言

长轮询、短轮询和SSE（Server-Sent Events）都是Web应用中常用的实时通信技术，它们各有特点和适用场景。以下是对这三种技术的详细解析。

一、短轮询

工作原理：

  • 客户端通过定期向服务器发送HTTP请求来查询是否有新的数据。
  • 服务器在接收到请求后，立即返回当前可用的数据，无论是否有新数据。
  • 客户端收到响应后，解析数据并处理，然后再次发起新的请求，重复以上步骤。

优点：

  • 实现简单，易于部署。
  • 兼容性好，只使用了常规的HTTP请求和响应。

缺点：

  • 频繁的HTTP请求会增加服务器和网络的负载。
  • 实时性有限，因为客户端只能在轮询间隔内获取到更新。

二、长轮询

工作原理：

  • 客户端向服务器发送一个HTTP请求，但服务器不会立即返回响应。
  • 服务器会保持请求打开，直到有新数据可用或者超时。
  • 一旦有新数据或者超时，服务器返回响应给客户端。
  • 客户端收到响应后，解析数据并处理，然后再次发起新的请求。

优点：

  • 减少了不必要的轮询，降低了网络和服务器的负载。
  • 相较于短轮询，提高了实时性，因为服务器可以在数据可用时立即推送。

缺点：

  • 仍然需要定期发起新的请求，因此在某种程度上仍有一定的轮询成本。
  • 不同浏览器对于长连接的支持程度不同，有一定的兼容性问题。

三、SSE

工作原理：

  • SSE是一种基于HTTP长连接技术，允许服务器向客户端浏览器实时推送更新。
  • 客户端通过创建一个EventSource对象并指向服务器上的一个URL来发起请求，这个请求保持打开状态。
  • 服务器可以在这个单一的TCP连接上不断发送新的数据块，这些数据块被称为“事件”。
  • 每个事件包含类型（可选）、数据和一些元数据（如事件ID，重新连接时间间隔等）。

优点：

  • 实现了服务器向客户端的单向实时数据推送。
  • 使用简单的HTTP协议，现有的服务器软件都支持。

缺点：

  • 只能用于传送文本数据，需要将二进制数据编码后传送。
  • SSE协议相对简单，但也需要关注一些细节问题，如避免内存泄漏等。

四、短轮询、长轮询和SSE的示例：

4.1、短轮询示例

后端代码（使用Spring Boot框架）：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ShortPollingController {

    // 模拟获取最新消息的方法
    @GetMapping("/shortPolling/news")
    public String getLatestNews() {
        // 这里可以从数据库或其他数据源获取最新新闻
        // 示例中简单返回固定消息
        return "这是最新的新闻内容";
    }
}

前端代码（使用JavaScript和AJAX）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短轮询示例</title>
</head>
<body>
    <div id="news"></div>
    <script>
        function shortPolling() {
            // 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '/shortPolling/news', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('news').innerHTML = xhr.responseText;
                }
            };
            xhr.send();
            // 每隔30秒发送一次请求
            setTimeout(shortPolling, 30000);
        }
        // 初始启动短轮询
        shortPolling();
    </script>
</body>
</html>

在这个示例中，客户端每隔30秒向服务器发送一次HTTP请求，询问是否有新的新闻内容。服务器在收到请求后，立即返回当前最新的新闻内容。

4.2、长轮询示例

后端代码（使用Spring Boot框架）：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.async.DeferredResult;
import java.util.concurrent.TimeUnit;

@RestController
public class LongPollingController {

    @GetMapping("/longPolling/chat")
    public DeferredResult<String> getChatMessage() {
        DeferredResult<String> result = new DeferredResult<>(10000L); // 设置超时时间为10秒

        // 模拟异步获取消息，实际应用中可能从消息队列等获取
        new Thread(() -> {
            try {
                // 模拟业务处理延迟
                TimeUnit.SECONDS.sleep(3);
                // 假设获取到新消息
                result.setResult("这是新的聊天消息");
            } catch (InterruptedException e) {
                e.printStackTrace();
                result.setErrorResult("获取消息失败");
            }
        }).start();

        return result;
    }
}

前端代码（使用JavaScript和AJAX）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长轮询示例</title>
</head>
<body>
    <div id="chatMessage"></div>
    <script>
        function longPolling() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '/longPolling/chat', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById('chatMessage').innerHTML = xhr.responseText;
                    } else {
                        console.log('请求出错,状态码:' + xhr.status);
                    }
                    // 无论请求结果如何，再次发起长轮询请求
                    longPolling();
                }
            };
            xhr.send();
        }
        // 初始启动长轮询
        longPolling();
    </script>
</body>
</html>

在这个示例中，客户端向服务器发送一个长轮询请求，服务器会保持请求打开，直到有新消息可用或者超时。一旦有新消息或者超时，服务器返回响应给客户端。客户端收到响应后，解析数据并处理，然后再次发起新的长轮询请求。

4.3、SSE示例

后端代码（使用Spring Boot框架）：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.http.MediaType;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

@RestController
public class SseController {

    @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter streamEvents() {
        SseEmitter emitter = new SseEmitter();

        ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();
        executor.scheduleAtFixedRate(() -> {
            try {
                emitter.send(SseEmitter.event().data("这是服务器推送的实时数据：" + System.currentTimeMillis()));
            } catch (IOException e) {
                emitter.completeWithError(e);
            }
        }, 0, 5, TimeUnit.SECONDS); // 每5秒推送一次数据

        emitter.onCompletion(() -> executor.shutdown());
        emitter.onError((e) -> executor.shutdown());

        return emitter;
    }
}

前端代码（使用JavaScript和AJAX）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE示例</title>
</head>
<body>
    <div id="sseData"></div>
    <script>
        const eventSource = new EventSource('/sse');

        eventSource.onmessage = function(event) {
            document.getElementById('sseData').innerHTML += event.data + '<br>';
        };

        eventSource.onerror = function(event) {
            console.error("EventSource failed:", event);
            eventSource.close();
        };
    </script>
</body>
</html>

在这个示例中，客户端通过创建一个EventSource对象并指向服务器上的/sse URL来发起SSE请求。服务器在接收到请求后，保持连接打开，并每5秒向客户端推送一次实时数据。客户端收到数据后，将其显示在页面上。

总结

以上示例展示了短轮询、长轮询和SSE的基本实现方式，可以根据具体需求选择适合的技术来实现实时通信功能。

SSE（Server-Sent Events）场景和简单实现
Coffee&Code
06-30 1566
提示：这里写一下简单的长连接 数据流，实现实时数据传输，前后端，后端用的 Nodejs,前端vue3+typescript
SSE Server-Send Events适用于什么场景，有什么弊端存在
GuoHengWei的博客
12-15 1319
如果只需要服务器向客户端推送数据而不需要客户端向服务器发送数据，且需要更简单的实现，SSE 是一个不错的选择。如果需要双向通信或更广泛的实时应用，WebSocket 可能更适合。Server-Sent Events (SSE) 是一种用于在客户端和服务器之间实现单向实时通信的 Web 技术。它主要适用于需要从服务器向客户端推送实时信息的场景，例如新闻更新、股票价格变动、社交媒体通知等。虽然 SSE 在某些场景下非常有用，但在需要双向通信、跨域支持或更复杂的实时应用中，WebSocket 技术可能更为适用。
前端通信：SSE设计方案（二）--- 服务器推送技术的实践以及一些应用场景的demo（包括在线及时聊天系统以及线上缓存更新，代码热修复案例）...
weixin_34375054的博客
01-24 140
SSE 流式场景应用 及 方案总结
m0_51244077的博客
12-25 1291
SSE 流式场景应用 及 方案总结
Web实时通信的学习之旅：轮询、WebSocket、SSE的区别以及优缺点
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-26 3126
WebSocket比SSE功能更加强大，WebSocket是在服务端和客户端建立的双向实时数据通道，而SSE只支持服务端想客户端的单向通讯浏览器对WebSocket的支持也更加广泛，IE、Edge几乎不支持SSEWebSocket有一套独立的标准协议，在使用过程中必须按照标准协议来，而SSE使用的是Http协议，只需要更改Context-Type为"text/event-stream;charset=utf-8"即可，这里需要特殊注意的一点，必须是utf-8。
HTTP长轮询（场景：聊天室）
weixin_30610755的博客
08-24 352
在还未出现websocket协议是，http都是通过轮询的方式实现客户端的同步，客户端以一定的时间间隔向服务端发出请求，服务器保持请求打开，直到有新数据可用，一旦数据可用，服务器就接收请求，然后将请求发送给客户端，客户端在发送一个请求，在重复以上操作，有效的实现了服务器推送的服务。 转载于:https://www.cnblogs.com/zhuyafeng/p/9531776.html...
实现实时Web应用，使用AJAX轮询、WebSocket、还是SSE呢？？
Hassan的小博客!
09-12 1473
文章目录短轮询（Short Polling）长轮询（Long Polling）Comet “服务器推” （这玩意现在用的很少了，了解一下即可）WebSocket原理：方法：事件：SSE原理事件总结 在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如数据大屏的实时数据、新闻数据、消息中心的未读消息，聊天功能、股票走势、天气情况等等。 我们的方案大概就是轮询、WebSocket、SSE 短轮询（Short Polling） 客户端定期（例如每几秒）发送AJAX请求到服务器。服务器立
服务器推送技术研究：长轮询、短轮询、SSE与WebSocket对比
资源摘要信息:"polling-websocket-sse:服务器推送研究，包括长轮询，短轮询，SSE，WS" 在现代Web应用开发中，服务器推送技术是一种重要的机制，它允许服务器主动向客户端发送信息，而不是仅仅响应客户端的请求。本...
网页端IM即时通讯技术入门之短轮询、长轮询、SSE、WebSocket
蔚可云的博客
07-13 610
对Web端即时通讯技术熟悉的开发者来说，我们回顾网页端IM的底层通信技术，从短轮询、长轮询，到后来的SSE以及WebSocket，使用门槛越来越低（早期的长轮询Comet这类技术实际属于hack手段，使用门槛并不低），技术手段越来越先进，网页端即时通讯技术的体验也因此越来越好。之前的这些所谓的网页端即时通讯“老技术”相对于当红的WebSocket，并非毫无用武之地。就拿IM里的扫码登录功能来说，用短轮询技术就非常合适，完全没必要大炮打蚊子上WebSocket。 所以，很多时候没必要盲目追求新技术，相对应用场
服务器端轮询推送消息,消息推送机制-轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)...
weixin_27966471的博客
08-12 1627
实际应用中经常会有实现页面无刷新更新内容的需求。本文就轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)介绍具体的应用场景。相关知识点：es6 API、nodejs、html5文章结构：轮询长轮询SSE(Server Sent Event)WS(WebSocket)1. 轮询-数据拉取轮询是在特定的的时间间隔(如每隔1秒)，由浏览器(客户端)对服务器发出HTTP...
web实时通讯方法轮询、webSocket、SSE介绍
最新发布
Smile_666666的博客
02-07 1015
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。在日常的场景中微信消息通知栏、首页广告推送等等。一般服务器向前端页面实时推送数据一般有三种方法：轮询、webSocket、SSE。
实时响应数据之短轮询和长轮询
gtahxm1314的博客
08-12 4206
实时响应数据 在Web应用开发中，我们会经常需要实时响应数据，例如：网页聊天室、实时更新网页在线人数等很多的应用场景。我们前后端数据的交互，通常使用ajax进行交互，所以下面的两种方法都是基于ajax交互技术。 短轮询 下面我先给大家一个应用场景：网页聊天室，对方发信息过来，我们的前端界面必须马上响应出来，我们发信息过去，对方也要马上响应到前端界面。 解决问题的思路： 1.前端要不停地向后端发送请求（ajax请求） 2.两个人的聊天记录可以放置于缓存中（redis） 3.每次ajax访问请求，把缓存中的聊天
使用长轮询解决某些场景的实时消息推送需求
chengpei147的博客
12-10 413
最近做一个需求实现在移动端通过按钮，远程控制大屏幕上展示的资源进行实时切换，可以展示一个大屏页面，可以展示一段视频，也可以展示一张图片。
SSE(Server-sent Events)实现Web消息推送（SpringBoot）
土味儿
01-28 2882
短轮询长轮询iframe流SSEMQTTwebsocketSSE(Server Sent Event)，直译为服务器发送事件，顾名思义，也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求，服务端响应，然后一次请求完毕；但是在 sse 的场景下，客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端，这个返回可以是多次间隔的方式。
SSE实现消息实时推送，前端渐进式学习、实践，真香
qq_41885295的博客
01-31 1万+
基于大模型开发的会话体验流式输出的的经验总结，实现类似gpt的打字机输出效果。主要应用技术是event-source、fetch-event-source
轮询、长轮询与Web Socket的前端实现
wangwen662的博客
03-24 1885
Web Socket应用场景:实现即时通讯:如股票交易行情分析、聊天室、在线游戏等，替代轮询和长轮询轮询轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用...
SSE（Server-Sent Events）技术及其简单演示
热门推荐
qq_61887118的博客
08-14 3万+
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
告别轮询，SSE 流式传输可太香了！
double_sweet1的博客
04-21 4947
SSE 全称为 Server-sent events , 是一种基于 HTTP 协议的通信技术，允许服务器主动向客户端（通常是Web浏览器）发送更新。它是 HTML5 标准的一部分，设计初衷是用来建立一个单向的服务器到客户端连接，使得服务器可以实时地向客户端发送数据。这种服务端实时向客户端发送数据的传输方式，其实就是流式传输。我们在与 ChatGPT 交互时，可以发现 ChatGPT 的响应总是断断续续完成。细扒 ChatGPT 的网络传输模式，可以发现，用的也是流式传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值