TradingView + WebSocket 脱坑指南

0. 竟然被催更了
前两天公司领导居然提到我的博客，说我最近懒了，不更新了……

趁放假，赶紧更新一轮……等等，什么时候这变成工作了？

1. TradingView 是个啥
今天咱们说个比较特别的 —— TradingView，这是一个专业的图表库，专门做 K 线图的，而 K 线图是股票、基金等交易所必备的一样东西。项目本身是免费的，但并不开源，官方提供了托管在 Github 上的私有库，开发者只需向官方提交一些必要的信息，就可以获取到访问权限。主仓库包含了压缩后的库文件，以及简单的数据接入案例；Wiki 中提供了开发文档，同时还在其它的仓库中提供了一些上手案例。

前端常用的几个图表库，像 ECharts、DataV 其实都支持绘制基本的 K 线图（有的称之为蜡烛图，叫法不同而已），配合柱状图和折线图，还能绘制成交量、MA 等指标。TradingView 作为一款专业级的行业产品，除了前面提到的这些图表，还提供了大量的专业测量工具，供专业的投资者和分析师使用，这些用如果全部由开发者自行去实现，会需要花费大量的精力，这种一揽子打包的方案，无疑是它最吸引人的地方。

最近公司正在进行中的一个项目，就是一款数字资产的交易所，竞品调研时候就发现，同行们几乎无一例外的都选择了这个图表库，连火币、FCoin 等行业风向标级别的大厂都选择了这款图表库，可见其在行业当中的权威性，以及近乎垄断的地位。也正因为如此，我们也开始着手研究它。

2. 专业 === 麻烦
专业归专业，但这毕竟是针对特定行业特定需求开发的东西，有很多的专业概念、术语、做法我们都不懂，得现学。官方虽然以 Wiki 的形式在 Github 中提供了文档，但文档的质量非常一般，看上去方方面面都覆盖到了，但字里行间充斥着大量晦涩难懂的概念，对参数的注解也是残缺不齐，很多操作上的细节都没有提到，阅读体验非常糟糕。虽然项目官网提供了中文的选项，图表库本身也支持多语言，但是文档却只有英文的（虽然就我个人而言，语言本身并不构成压力；但如果你需要，这里 有一份别人整理的中文版的，还包含了基于 UDF 方案的视频教程，作者来自 TradingView 项目组，是一位资深的开发者。为了讲解方便，这里会用到其中的一些图，感谢 作者）。

相比 ECharts、DataV 这种万事俱备，只要填数据、配参数的“民用级”图表库，TradingView 的上手难度要高不少，它需要开发者按照其制定的规则，自行实现一套数据源 API，官方虽然对于每一个 API 的作用、参数都给出了说明，但一些关键的点并没有解释清楚，很多开发者（包括我，和我接触过的一些同行）在看过文档后还是没能很好的理解“这 tm 到底该怎么用”。写这篇博客，就是希望能够为解决这个问题做一点贡献，让后来者能够轻松一些。

3. 为了节约时间
先说明一点，这篇博客并不会手把手教你一步一步搭建出整套东西。我假定你至少是先看过一遍官方的文档，并有了初步的尝试之后，遇到问题，求助于搜索引擎，然后才来到的这里。

这篇博客更像是一个 FAQ，根据我自己踩坑的经历，把一些比较不好懂的东西，按我个人的理解分享给各位。

所以如果你指望这篇博客能够让你不用去看官方文档就能够完全掌握 TradingView，轻松把 K 线画出来，那么对不起，要让你失望了。

4. 先说一下概念
TradingView 里有一些比较专业的概念，不太好懂，但非常重要，这里简单说明一下。

4.1. Symbol
Symbol 直译过来叫“象征、符号”，这里引申为“商品”。K 线表现的是价格的变化趋势，至于是什么东西的价格，可以是股票，可以是货币，也可以是任何一样商品，TradingView 为了通用，提供了这么一个抽象的概念。一个 Symbol 就是一个 JS 对象，描述了商品的一些属性（名称、价格小数位、支持的时间分辨率、交易开放时间等，具体请参考官方文档），图表库会根据 Symbol 的定义，来决定改获取怎样的数据。

商品名称的固定格式为 “EXCHANGE:SYMBOL”，SYMBOL 代表商品，例如一支股票、一个交易对；EXCHANGE 是交易所的名称，同一商品在不同交易所可能会有不同的价格，因此需要进行区分。

4.2. Resolution
Study 直译过来叫“分辨率”，这里指 K 线图中相邻两条柱子之间的时间间隔，我没研究过专业术语是不是就是用的这个词，不过个人感觉这就是一种说法，你用别的词也能表达这个意思，只不过 TradingView 选择了这个词。

4.3. Study
Study 直译过来叫“学习、研究”，这里解释为“指标”，例如成交量、均线，以及其他各种分析指标。开发者可以通过 TradingView 提供的 API 自行添加。

4.4. Chart
图表本体，特指 K 线图及相关的各项指标，不包含工具栏。一个图表实例可以包含多个指标

4.5. Widget
小部件，和 Android 上的 Widget 一个概念。图表组件本身可以看做是一个容器，主要是一些工具栏，以及留给绘制真正图表的一块区域，不含图表本体。一个小部件实例可以包含多个图表实例

4.6. FeatureSet
功能集，Widget 配置选项中的一部分，用于定制图表库的一些功能（包括显示与否、样式）。

4.7. Overrides
覆盖，Widget 配置选项中的一部分，用于定制图表库的样式（主要是图表各部分的颜色）。整个图表库由外层 DOM 结构和内部多个 canvas 组成，因此样式相关的设置也分为两部分，这里是用于 canvas 部分的设置，另外还有一个 custom_css_url 属性用于指定一个 css 文件，其中可以覆盖 DOM 部分的样式。具体的可以结合官方文档，以及 Chrome DevTool 来定位。

4.8. DataFeed
数据源，也就是接下来要讲的东西。它是 TradingView 获取、处理数据的方法集合，也是 TradingView 数据接入的核心所在，需要用户自己实现。它可以是一个 class 的实例，也可以就是一个简单的对象。

5. 如何接入自己的数据
创建图表库实例并不难，看过文档和上手案例的应该都能懂，难的在于怎么把数据给填进去。相信绝大部分为 TradingView 头疼的朋友都是卡在了这里，只要数据接通了，剩下的都是小问题。

TradingView 之所能通用，在于它做到了数据和表现分离，图表库本身只提供表现的部分，不管你有什么样的数据，只要能整理成指定的格式填进去，就行。说白了，需要开发者自行实现一个适配器。

TradingView 提供了两种获取数据的方式，基于 HTTP 的方案（UDF，Universal Data Feed，主仓库中的演示案例就是用的这种），和基于 WebSocket 的方案（JS API）。

udf_or_jsapi

无论采用哪种方案，就数据而言都可以分为两部分：截止到目前为止的历史数据，以及之后新生成的数据。