news 2026/2/16 14:18:12

网页接收服务端消息的几种方式

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
网页接收服务端消息的几种方式

介绍

网页接收服务端消息,一般有如下几种方式

  • 直接轮询
  • WebSocket 长链接
  • 长轮询
  • Server send event

一、短轮询方式

前端页面按照时间间隔轮询拉取最新消息

缺点:

  • 实时性差!最长耗时等于时间间隔耗时
  • 没有消息也会有大量的请求,消耗服务器资源

优点:

  • 开发简单,可以快速实现功能

二、TCP 长链接 WebSocket 和 FlashSocket

  • WebSocket协议

WebSocket 协议

WebSocket 是一种全双工通信协议,建立在 TCP 之上,允许客户端(如浏览器)与服务器之间建立持久连接,实现双向实时数据传输。webSocket 解决了 Http 请求-响应模型无法实现服务器主动推送的问题。

特点:双向通信、持久链接、低延迟(数据帧小,无需每次携带头部)、原生支持(现代浏览器均原生支持)

链接:通过 Http 协议的 upgrade 方法建立 tcp 长链接

WebSocket 服务集群如何精确推送

方案 1:集中式连接管理 + 消息路由(推荐)
  • 每个服务节点维护自己当前连接的用户(如内存 Map:userId -> WebSocketSession)
  • 引入一个集中式存储(如 Redis、ETCD、ZooKeeper)记录“用户ID → 所在节点标识”的映射关系。
  • 发送消息时,先查集中存储,找到目标用户所在的节点,再通过节点间通信(如 RPC、消息队列)将消息路由到目标节点,由目标节点通过本地 WebSocket 推送。
方案 2:通过消息队列的消息广播
  • 所有节点订阅相同的 MQ 队列
  • 各个节点需要发送消息,只需要将消息发送到队列中
  • 各个节点消费消息时,只需判断对应的消息接受用户是否连接到本服务了,连接到本服务了则发送消息

FlashSocket 已被淘汰的历史产物

FlashSocket 并不是一个官方协议,而是在 Flash 时代,开发者利用 Adobe Flash 的 Socket API 实现的浏览器端 TCP 长连接方案,用于在 WebSocket 出现之前模拟“实时通信”。

诞生背景:

  • 2005~2012 年,浏览器原生不支持 WebSocket。
  • Flash Player 支持 TCP Socket,可绕过浏览器限制实现“伪长连接”。
  • 需要浏览器安装 Flash 插件 + 用户授权安全策略。

三、Http 长轮询

长轮询是在 WebSocket 普及之前,实现**“伪实时”**通信的一种经典方案。它通过“拉”模式模拟“推”效果:

客户端发起 HTTP 请求 → 服务器“hold 住”请求不立即返回 → 有新消息时才响应 → 客户端收到后立即再次发起新请求

客户端 服务器 │ │ ├─ 请求新消息 ─────────>│ │ │ │ │ ← 无消息?Hold 住连接(不返回) │ │ │ │ ← 有新消息到达!立即返回数据 │<──────── 响应消息 ────┤ │ │ ├─ 立即再次请求 ────────>│ │ │ │ │ ← 继续 hold 或返回...

与普通轮询(短轮询)对比

类型普通轮询长轮询
请求频率固定间隔(如每秒1次)有响应后立即重发
服务器压力高(频繁空请求)低(无消息时无响应)
实时性有延迟(取决于间隔)较高(消息到达即返回)
资源占用连接短,但频繁连接长,但数量可控

优点和缺点:

在现代项目中,优先使用 WebSocket;长轮询仅用于兼容性要求高或临时过渡场景。

** 优点:**

  • 兼容性好:所有浏览器都支持 HTTP。
  • 实现简单:无需特殊协议或插件。
  • 适合低频消息推送(如通知、订单状态变更)。

缺点:

  • 每次请求有 HTTP 头开销。
  • 服务器需维持大量挂起连接(消耗线程/内存)。
  • 不如 WebSocket 实时和高效。
  • 超时、断连需手动处理。

SpringBoot 案例

// MessageManager.java@ComponentpublicclassMessageManager{// 模拟每个用户的“消息阻塞队列”privatefinalMap<String,BlockingQueue<String>>userQueues=newConcurrentHashMap<>();// 获取用户队列(不存在则创建)privateBlockingQueue<String>getQueue(StringuserId){returnuserQueues.computeIfAbsent(userId,k->newLinkedBlockingQueue<>());}// 发送消息给用户publicvoidsendMessage(StringuserId,Stringmessage){BlockingQueue<String>queue=getQueue(userId);queue.offer(message);// 非阻塞放入}// 长轮询:等待消息(最多30秒)publicStringawaitMessage(StringuserId,longtimeoutMillis)throwsInterruptedException{BlockingQueue<String>queue=getQueue(userId);returnqueue.poll(timeoutMillis,TimeUnit.MILLISECONDS);// 阻塞等待}// 可选:清理用户队列(用户下线时调用)publicvoidremoveUser(StringuserId){userQueues.remove(userId);}}// LongPollingController.java@RestControllerpublicclassLongPollingController{@AutowiredprivateMessageManagermessageManager;/** * 长轮询接口:客户端调用,等待新消息 */@GetMapping("/long-polling")publicResponseEntity<String>longPolling(@RequestParamStringuserId){try{// 最多等待 30 秒Stringmessage=messageManager.awaitMessage(userId,30_000);if(message!=null){returnResponseEntity.ok(message);}else{returnResponseEntity.status(204).body("");// 204 No Content 表示超时无消息}}catch(InterruptedExceptione){Thread.currentThread().interrupt();returnResponseEntity.status(500).body("Interrupted");}}/** * 模拟发送消息接口(用于测试) */@GetMapping("/send")publicStringsendMessage(@RequestParamStringto,@RequestParamStringmsg){messageManager.sendMessage(to,msg);return"Message sent to "+to+": "+msg;}}

基于 Http 的 SSE 技术

七、WebSocket和SSE对比

基于Http的Server-Sent Events 技术

基于Http的Server-Sent Events 技术

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/16 5:07:07

雷家林(レイ・ジアリン)詩歌集録 その十四(日译版)

&#xff08;禅语&#xff09;万道の仏光が中華を照らし、悪鬼や妖怪は鳴き聲を上げる場所がない。世の中の苦しみは何千種もあるが、慈悲深い般若の花を散らそう。&#xff08;嫦娥&#xff09;毎夜、故郷を思いながら帰ることができないのが惜しい。清らかな心は寒い月の雰囲…

作者头像 李华
网站建设 2026/2/14 21:13:25

雷家林(レイ・ジアリン)詩歌集録 その十五(日译版)

方雷大野家林Lei Jialin独立独立して一枝を持ち、湘波を俯みます。 洞庭の木が落ちるのはどうしようもないです。 行吟しながら沢の畔を歩き、人は憔悴しています。 自分が人を怜れんで、自分で歌います。云封雲がこの世を封じ、桃源を守ります。 秦の人々は自らの自在な世界を…

作者头像 李华
网站建设 2026/2/16 3:28:38

交通仿真软件:Paramics_(2).交通仿真基础理论

交通仿真基础理论 在上一节中&#xff0c;我们介绍了交通仿真的基本概念和应用领域。接下来&#xff0c;我们将深入探讨交通仿真软件的基础理论&#xff0c;这些理论是理解交通仿真软件如何工作的关键。本节将涵盖以下几个方面&#xff1a; 1. 交通流理论 交通流理论是交通仿真…

作者头像 李华
网站建设 2026/2/16 11:46:59

macOS恢复模式终端备份脚本:无依赖、保层级、避冲突的完整方案

macOS恢复模式终端备份脚本&#xff1a;无依赖、保层级、避冲突的完整方案 文章目录macOS恢复模式终端备份脚本&#xff1a;无依赖、保层级、避冲突的完整方案一、恢复模式备份的核心痛点二、核心功能与实现逻辑三、关键技术点与解决方案1. 替代缺失命令&#xff1a;用纯bash实…

作者头像 李华
网站建设 2026/2/14 13:15:10

基于Simulink的微电网中储能主控单元协调运行仿真

目录 手把手教你学Simulink 一、引言:为什么微电网需要“储能主控单元”? 二、系统整体架构 控制角色分配: 三、理论基础:下垂控制(Droop Control) 1. 有功-频率下垂(P-f) 2. 无功-电压下垂(Q-V) 四、Simulink 建模全流程 步骤1:主电路搭建(Simscape Elec…

作者头像 李华