浏览器直连金融websocket失败，因服务端要求认证、wss协议及origin校验；推荐用支持cors的http轮询（如twelve data），配合防抖、错误回退与缓存控制。
为什么直接在 index.html 里用 WebSocket 拿不到实时股价
因为绝大多数金融数据 WebSocket 接口（比如 binance.com/ws、okx.com/ws/v5、国内券商的私有接口）要求：带认证（Authorization 或签名参数）、走 wss（不是 ws）、且 Origin 校验严格。浏览器直连会触发 Connection closed before receiving a handshake response 或 403 Forbidden。
简单说：你写个 new WebSocket("wss://...") 放在纯静态 index.html 里，99% 情况下连不上——不是代码写错，是服务端根本不允许浏览器直连。
- 服务端通常只接受后端代理发起的连接（例如 Node.js / Python 启动的中间层）
- 前端能直连的免费行情源极少，
iexcloud.io的 WebSocket 已关闭，alphavantage.co只提供 HTTP 轮询 - 即使连上，股价推送频率高（如每秒多笔），前端需自己做去重、排序、防抖，否则
innerHTML频繁重绘会导致卡顿
用 fetch + 定时轮询替代 WebSocket 的实操要点
对多数个人项目或演示页面，用 HTTP 轮询更稳。关键不是“多快”，而是“不崩、不跨域、不被限流”。
- 选支持 CORS 的公开 API，比如
https://api.twelvedata.com/price?symbol=AAPL&apikey=xxx（免费 Key 每 8 小时 800 次） - 不要用
setInterval固定 1s 调用——股价本身更新没那么快，且容易触发限流；改用setTimeout在每次响应后延时 5–15 秒再发下一次 - 加 loading 状态和错误 fallback：
document.getElementById("price").textContent = "—"，避免旧数据残留 - 注意响应结构：Twelve Data 返回的是
{ "price": "182.54000", "timestamp": "2024-06-12T14:23:01Z" }，字段名不是data或result
function fetchPrice() {
fetch("https://api.twelvedata.com/price?symbol=AAPL&apikey=YOUR_KEY")
.then(r => r.json())
.then(data => {
document.getElementById("price").textContent = data.price;
setTimeout(fetchPrice, 10000); // 10秒后再次请求
})
.catch(() => {
document.getElementById("price").textContent = "—";
setTimeout(fetchPrice, 30000); // 失败时拉长间隔
});
}
如果真要 WebSocket，必须加一层 Node.js 代理
浏览器不能直连，但你的本地 localhost:3000 可以。用 Express 写一个极简代理，把前端 WebSocket 请求转成服务端 HTTP/WS 连接，再把数据推回来。
- 前端仍用
new WebSocket("ws://localhost:3000/ws?symbol=AAPL")，Origin 是localhost，无跨域问题 - 后端用
ws库连 Binance：new WebSocket("wss://stream.binance.com:9443/ws/aaplusdt@ticker")（注意 symbol 是小写+usdt后缀） - 代理只做透传，不做业务逻辑；收到原始消息后，用
JSON.parse提取data.k.c（最新成交价），再ws.send(JSON.stringify({price: ...}))推给前端 - 别忘了处理断线重连：Binance 的 stream 会不定期断开，服务端需监听
close事件并自动重连
HTML 页面里最容易被忽略的细节
不是代码能不能跑，而是用户看到的是否可信、稳定、可读。
-
<meta http-equiv="Cache-Control" content="no-cache">必加，否则 Chrome 可能缓存上一次的fetch响应 - 价格数字建议用
<span id="price" style="font-variant-numeric: tabular-nums;">—</span>，让小数点对齐，视觉更专业 - 别在
body.onload里启动轮询——等 DOM 加载完再执行，否则getElementById找不到元素；改用document.addEventListener("DOMContentLoaded", ...) - 如果部署到 GitHub Pages 或 Netlify，确保 API Key 不硬编码在 HTML 里；用环境变量注入（构建时）或后端代理兜底
真正难的从来不是“怎么显示一个数字”，而是让这个数字在不同网络、不同设备、不同时间点都保持可读、不报错、不误导。WebSocket 名字听着高级，但对静态页面来说，往往是更重的负担而非解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
