干货 | 携程机票前端Web流式通信SSE全链路应用实践

作者简介

Chris Xia，携程前端开发专家，关注新技术革新和研发效率提升。

团队热招岗位：资深前端开发工程师

本文介绍了携程机票前端基于Server-Sent Events（SSE）实现服务端推送的企业级全链路通用技术解决方案。深入探讨 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节，为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性，适用于各种网络架构和业务场景。

• 一、概述

• 二、SSE介绍

• 2.1 SSE 是什么？

• 2.2 SSE 的使用场景

• 三、应用实践

• 四、方案对比

• 4.1 服务端推送

• 4.2 内部SSE实践方案

• 4.3 SSE 技术选型

• 五、全链路支持

• 5.1 链路层

• 5.2 框架层

• 5.3 数据层

• 六、结语

一、概述

在如今互联网应用中，实时数据推送已成为很多业务场景的关键技术解决方案。携程机票业务作为在线旅游行业的核心场景，面临着航班数据实时性要求高、信息维度复杂等挑战。Server-Sent Events（SSE）技术作为一种基于 HTTP 长连接的服务器推送方案，非常适用于机票业务"服务端主动推送、客户端实时展示"的需求特点。相较于 WebSocket 等双向通信协议，SSE 在实现简单性、协议轻量级和浏览器兼容性等方面具有显著优势，适合机票列表页这类以服务端数据为主导的业务场景。

二、SSE介绍

2.1 SSE 是什么？

Server-Sent Events（SSE）服务器发送事件，是一种基于 HTTP 长连接，允许服务器单向实时推送数据到客户端的技术。

SSE 的工作原理非常简单直观。客户端通过与服务器建立一条持久化的 HTTP 连接，然后服务器使用该连接将数据以事件流（event stream）的形式发送给客户端。这些事件流由多个事件（event）组成，每个事件包含一个标识符、类型和数据字段。客户端通过监听事件流来获取最新的数据，并在接收到事件后进行处理。

2.2 SSE 的使用场景

SSE 使用场景非常广泛，大家熟知的 Chatgpt 对话的交互形式使用的就是 SSE 技术。SSE 在服务器单向实时推送数据的场景非常适用：

• 实时数据流：如股票市场更新、新闻推送、体育比分更新等。

• 实时通知：如社交媒体消息提醒、新订单通知等。

• 仪表盘更新：如系统监控、实时数据统计等。

三、应用实践

机票前端首次在核心业务中（机票航班列表）使用 SSE 技术，机票列表页由原先客户端串行请求获取多批次航班数据变为一次请求由服务持续推送数据给客户端。在调研了公司内外各种实现方案，最终联合携程框架、SRE、机票前后端团队共同实现了全公司通用的SSE技术解决方案（详情见下文中的全链路支持部分）。

使用 SSE 前（如下图）

• 客户端需要发起两次请求获取完整航班数据

• 服务端采用预取优化：在响应第一次请求时，提前获取第二批数据并缓存至 Redis（降低客户端第二次请求响应的耗时）

• 客户端发起第二次请求时，可直接获取缓存数据

这样的流程和技术方案无疑会提升前后端的代码复杂度，服务端需要额外增加一层缓存来提升响应时间，客户端无法感知服务到底有多少批次数据，需要不断问询。

使用 SSE 后（如下图）

客户端发送一次 SSE 请求，服务端实时推送数据到客户端，服务间上下游同样采用流式传输，实现客户端到服务端全链路流式通信。

SSE 为前后端带来的价值

• 减少请求传输耗时：无需请求多次，减少了多次请求的传输耗时。

• 前后端代码结构优化：代码更简洁且易于理解，减少串行请求的回调监听/嵌套。

• 服务逻辑优化：列表数据移除了 redis 的发布订阅流程，简化了代码架构。

• <