用 javascript 的 sse 实现股票行情推送,核心是前端用 eventsource 建立持久连接监听服务端以 text/event-stream 格式持续发送的 json 数据,每条消息以 data: 开头、双换行结束,自动重连且无需轮询或 websocket 握手。

用 JavaScript 的 SSE(Server-Sent Events)实现股票行情推送,核心是前端建立持久连接监听服务端持续发送的 JSON 数据,无需轮询或 WebSocket 的复杂握手。关键在于服务端按规范输出 text/event-stream 响应,前端用 EventSource 接收并解析。
服务端需按 SSE 格式推送数据
SSE 要求响应头必须包含 Content-Type: text/event-stream,且每条消息以 data: 开头、双换行结束。股票行情适合用默认事件(无 event: 前缀),每条数据一行 data: 后接 JSON 字符串:
- 每条行情数据单独发送:例如
data: {"symbol":"AAPL","price":182.34,"timestamp":1717025488} - 每条消息后加两个换行符(
\n\n),否则浏览器不会触发message事件 - 可选发送
retry:控制重连间隔(毫秒),如retry: 3000 - 避免缓存:响应头加上
Cache-Control: no-cache和Connection: keep-alive
前端用 EventSource 监听并更新 DOM
创建 EventSource 实例指向 SSE 接口,监听 message 事件即可获取实时行情:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 初始化时传入股票代码作为查询参数,例如
new EventSource("/sse?symbol=AAPL,TSLA") - 监听
message事件,调用JSON.parse(event.data)解析行情对象 - 根据
symbol字段更新对应股票的 DOM 元素,比如document.getElementById("price-AAPL").textContent = data.price - 监听
error事件处理断连,但不用手动重连——EventSource默认自动重试
注意跨域与连接管理
若前端与 SSE 接口不同源,服务端必须设置 Access-Control-Allow-Origin 响应头(不能为 * 如果携带凭证):
- 需要带 cookie 认证时,前端构造
EventSource需加{ withCredentials: true } - 页面卸载前应调用
eventSource.close()避免无效连接占用资源 - 单个域名下
EventSource连接数有限(通常 6 个),多只股票建议合并推送(如一次发多个 symbol 的数组)或使用共享 Worker
简单示例:前端订阅并渲染
HTML 中预留元素:<div id="price-AAPL">--</div>;JS 中:
const es = new EventSource("/api/stocks-sse?symbols=AAPL,MSFT");
es.onmessage = (e) => {
const tick = JSON.parse(e.data);
const el = document.getElementById(`price-${tick.symbol}`);
if (el) el.textContent = tick.price.toFixed(2);
};
es.onerror = (err) => console.warn("SSE connection error", err);
// 页面关闭时清理
window.addEventListener("beforeunload", () => es.close());
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










