用 JavaScript 打造加密数字货币实时价格走势图：从零到上线完整指南

关键词：JavaScript实时价格、加密货币API、WebSocket推送、前端图表、实时行情、EON图表、CryptoCompare

一、30 秒预览

只需一张 HTML 页面，你就能让 BTC、ETH、EOS 的 实时行情 秒级更新。本篇教程会带你走完 发布-订阅架构 的「数据推送 + 图表呈现」链路，确保你 10 分钟就能跑通，并有思路向 生产环境 演进。

二、技术选型的 3 个理由

PubNub：浏览器原生的 WebSocket 封装好、跨域省心，支持 uuid、token 鉴权。
EON：基于 D3，对 实时行情 场景有内建动画，API 极简。
CryptoCompare：免费、无需注册即可获得每分钟刷新的加密货币价格。

三、五步跑通 Demo

1. 创建发布端（Publisher）

注册 PubNub 后拿到 Publish Key 与 Subscribe Key
cryptoPublisher.html 核心逻辑如下：

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.0.min.js"></script>
<script>
const pn = new PubNub({
  publishKey   : 'YOUR_PUBLISH_KEY',
  subscribeKey : 'YOUR_SUBSCRIBE_KEY'
});

const symbols = ['BTC', 'ETH', 'EOS'];
const fiat    = 'CNY';

async function fetchPrice() {
  const url = `https://min-api.cryptocompare.com/data/pricemulti?fsyms=${symbols}&tsyms=${fiat}`;
  const res = await fetch(url);
  const json = await res.json();

  symbols.forEach(s => {
    pn.publish({
      channel : `price_${s}`,
      message : {
        "x" : new Date().getTime(),
        "y" : json[s][fiat]
      }
    });
  });
}

// 每 2 秒刷新一次
setInterval(fetchPrice, 2000);
</script>

2. 创建订阅端（Subscriber）

引入 EON 的 css & js
创建 N 个 div 占位
cryptoSubscriber.html 代码片段：

<link rel="stylesheet" href="https://pubnub.github.io/eon/v/e.1.1.0/eon.css">
<script src="https://pubnub.github.io/eon/v/e.1.1.0/eon.min.js"></script>

<div id="btcChart" class="chart"></div>
<div id="ethChart" class="chart"></div>

<script>
const pn = new PubNub({ subscribeKey : 'YOUR_SUBSCRIBE_KEY' });

['BTC', 'ETH'].forEach(s => {
  eon.chart({
    pubnub   : pn,
    channel  : `price_${s}`,
    history  : false,
    limit    : 100,
    rate     : 2000,
    generate : {
      bindto   : `#${s.toLowerCase()}Chart`,
      data     : { x : 'x' },
      axis     : { x : { type : 'timeseries' } }
    }
  });
});
</script>

把两个 .html 文件同时用本地服务起端口打开，即刻出现两条 跳跃的价格直线。

👉 想直接运行？这条链接跳转到线上演示，点开即可验证效果！

四、进阶：让代码从玩具变成武器

1. 数据持久化

利用 PubNub Functions 把数据 同步落库（Firebase、MongoDB 皆可）。
需要回溯市场深度时，可回放实时行情。

2. 增强可视化

替换基础图表为 K 线图（Highstock、TradingView）。
添加 成交量、MACD 等二级指标，提升可读性。

3. 安全与合规

使用 PubNub Access Manager (PAM) 做签名鉴权，防止滥用。
生产环境走 HTTPS 强制加密，避免前端明文传输行情。

五、实际案例：云币网早期启示

2017 年左右，云币网后端采用 Ruby 开源项目 Peatio，前端即类似本文的 发布-订阅架构。虽然后来平台升级，但 Peatio 的开源模型依旧值得学习——

如何把订单撮合结果推送到前端
如何 固化实时行情 快照
如何灵活增减交易对

这让普通开发者也能在 1–2 天 内快速搭建 加密货币价格追踪板。

六、常见问题（FAQ）

Q1：CryptoCompare 免费额度够用吗？
A：个人开发环境 OK，每分钟 50 次请求；如需高频行情，请升级到付费通道。

Q2：可以只用 EON 而不用 PubNub 吗？
A：EON 本质是 PubNub 捆绑包，目前无法脱离 PubNub 单独运行。

Q3：如何用 HTTPS 托管本地 HTML？
A：python3 -m http.server 8080 生成的默认是 HTTP，推荐用 npx http-server dist --ssl 加自签名证书即可。

Q4：请求被 CORS 拦截？
A：CryptoCompare 默认支持 CORS。若被拦截，请检查本地代理是否误加 OPTIONS 预检请求。

Q5：图表数量多时浏览器崩溃？
A：EON 每条线路维持 100 点内存，建议用 虚拟滚动 或分页加载不同币种。

七、结语：给 Solo 开发者的 3 句话

今天的 200 行胶水代码，就是明天吸引投资的原型。
别在 UI 上纠结太久，实时数据正确性 优先于华丽特效。
市场永远波动，点亮图表的那束光，应是你对产品的热爱。

👉 立即开始构建自己的加密仪表盘吧！

祝你玩得开心，我们下篇再聊 链上数据可视化！