TradingView简易教程(三) —— JSApi

最新推荐文章于 2024-09-30 15:23:34 发布

az44yao

最新推荐文章于 2024-09-30 15:23:34 发布

阅读量1.9k

点赞数 1

原文链接：https://blog.sakuradon.com/index.php/archives/203/

版权

https://blog.sakuradon.com/index.php/archives/203/

JSApi介绍

这是啥? 一套JS方法（以实现指定的公共接口）。
我该怎么使用它?: 您应该创建一个JS对象，它将以某种方式接收数据，并响应图表库的请求。

UDF是按照官方文档的规则来进行数据传输，但如果使用JSApi的话，你能使用任何你能使用的方式传输数据。得到的数据主要通过一个JS对象来获取并通过回调函数传递给TradingView插件。

也就是说，你需要创建一个JS对象，该对象拥有文档中规定的方法。插件会在适当的时候调用这个JS对象的方法，并传入对应参数，一般最后一个参数为回调函数，我们一般需要通过自己的方式获取数据，处理数据，然后按规定的格式以参数的格式传入给回调函数。

简单例子

举个简单的例子

const config = {
    supports_search : true,
    supports_group_request : false,
    supported_resolutions : ["1", "5", "15", "30", "60", "1D", "1W"],
    supports_marks : false,
    supports_time : true,
    exchanges : {
    value : "",
        name : "All Exchanges",
        desc : ""
    }
}

var datafeed = {
    onReady: cb => {
        console.log("=====onReady running");
        setTimeout(() => cb(config), 0);
    },
}

Copy

datafeed为一个JS对象，拥有onReady方法，当我们把datafeed传递给TradingView后，插件会在启动时调用该JS对象的onReady方法，该方法拥有一个回调函数，而我们则需要通过一些方式获取到基本配置信息，然后将其传递给回调函数cb，这里我们是直接const了一个对象config，还可以通过ajax等方式从服务器获取数据，但要注意处理一下数据，让其变成文档规定的格式。

必要的方法

除了上面提到的onReady方法，还必须要有resolveSymbol，getBars以及subscribeBars这几个方法。
onReady用来配置插件的一些属性。

resolveSymbol用来解析某个商品（股票/虚拟币），如下所示

resolveSymbol: (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) => {
    var symbol_stub = {
        name: symbolName,
        description: "",
        has_intraday: true,
        has_no_volume: false,
        minmov: 1,
        minmov2: 2,
        pricescale: 100,
        session: "24x7",
        supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W"],
        ticker: symbolName,
        timezone: "Asia/Shanghai",
        type: "stock"
    }
    setTimeout(() => onSymbolResolvedCallback(symbol_stub), 0);
},

Copy

同onReady一样，也是将配置作为参数传递给回调函数onSymbolResolvedCallback，不过插件在调用该方法时，会传入symbolName这个参数，该参数为字符串，代表着商品名。我在这里直接将其作为name了，也可以通过该参数，向服务器请求对应商品的配置数据。除此之外，他还有一个onResolveErrorCallback，这个回调函数用于处理获取数据失败时的情况。

getBars和subscribeBars都用于从服务器获取K线数据，不过getBars用于获取一段时间内的所有K线数据，而subscribeBars用于实时获取最新的K线数据并替换当前最新数据，下面详细讲解。

使用websocket实现实时更新K线

websocket后台采用php编写，先贴出后台代码

//获取区间内K线数据
public function GetKlineHistory($market, $from, $to, $resolution)
{
    $resolution_old = $resolution;
    $allResolutions = array(
        '1'  => 1,
        '5'  => 5,
        '15' => 15,
        '30' => 30,
        '60' => 60,
        '1D' => 1440,
        '1W' => 10080,
    );

    $resolution = key_exists($resolution, $allResolutions) ? $allResolutions[$resolution] : 1;

    $begin_time = 1532275200;
    $to         = floor(($to - $begin_time) / $resolution / 60) * $resolution * 60 + $begin_time;
    $from       = floor(($from - $begin_time) / $resolution / 60 + 1) * $resolution * 60 + $begin_time;

    $sql       = "SELECT * FROM qq3479015851_trade_json WHERE market='$market' AND `type`=$resolution AND addtime>$from AND addtime<=$to ORDER BY addtime";
    $tradeJson = Db::querySql($sql);

    $json_data = array();
    foreach ($tradeJson as $k => $v) {
        $json_data[] = json_decode($v['data'], true);
    }

    $data = array();

    foreach ($json_data as $k => $v) {
        $data[$k]      = array();
        $data[$k]['t'] = $v[0];
        $data[$k]['o'] = floatval($v[2]);
        $data[$k]['c'] = floatval($v[5]);
        $data[$k]['h'] = floatval($v[3]);
        $data[$k]['l'] = floatval($v[4]);
        $data[$k]['v'] = $v[1];
        $data[$k]['s'] = 'ok';
    }

    if ($this->GetKlineUpdata($market)[$resolution_old])
        $data[] = $this->GetKlineUpdata($market)[$resolution_old];

    return $data;
}

//更新K线数据
/**
 * @param      $market
 * @param      $resolution string 分辨率名称
 * @return array
 */
public function GetKlineUpdata($market, $resolution = null)
{
    $result     = array();
    $begin_time = 1532275200;//开始记录的时间
    $time       = time();//当前时间

    $resolutions = [
        '1'  => 1,
        '5'  => 5,
        '15' => 15,
        '30' => 30,
        '60' => 60,
        '1D' => 1440,
        '1W' => 10080,
    ];

    if ($resolution != null && isset($resolutions[$resolution])) {
        $resolutions = [$resolution => $resolutions[$resolution]];
    }

    foreach ($resolutions as $resolutionName => $resolutionScale) {
        $result[$resolutionName] = array();
        $sql_time                = $time - $resolutionScale * 60 * 5;

        $last_json_time = Db::querySql("SELECT MAX(addtime) FROM qq3479015851_trade_json WHERE market='$market' AND `type`=$resolutionScale AND addtime>$sql_time")[0];
        $last_json_time = intval($last_json_time[0]);

        $t     = $last_json_time + floor(($time - $last_json_time) / ($resolutionScale * 60)) * $resolutionScale * 60;
        $t_end = $t + $resolutionScale * 60;

        $open_time  = 0;//开盘时间
        $close_time = 0;//闭盘时间
        $open       = 0;//开盘价格
        $close      = 0;//闭盘价格
        $highest    = 0;//最高价
        $lowest     = 0;//最低价
        $volume     = 0;//总量
        $status     = 0;//数据状态

        if (!array_key_exists($market, $this->Kline)) {
            $this->Kline[$market] = [];
        }

        if (!array_key_exists($resolutionName, $this->Kline[$market])) {
            $this->Kline[$market][$resolutionName] = [
                'id'   => null,
                't'    => null,
                'data' => []
            ];
        }

        if (!$this->Kline[$market][$resolutionName]['t']) {
            $this->Kline[$market][$resolutionName]['t'] = $t;
        }

        if ($this->Kline[$market][$resolutionName]['t'] != $t) {
            $t_old                                      = $this->Kline[$market][$resolutionName]['t'];
            $this->Kline[$market][$resolutionName]['t'] = $t;
            if (!$this->Kline[$market][$resolutionName]['data']) {
                $trade_info_sql = Db::querySql("SELECT * FROM qq3479015851_trade_json WHERE market='$market' AND `type`=$resolutionScale AND addtime=$last_json_time");
                if ($trade_info_sql) {
                    $trade_info = $trade_info_sql[0];
                    $trade_data = json_decode($trade_info['data']);
                    $data       = array(
                        't' => $t_old,
                        'o' => floatval($trade_data[5]),
                        'c' => floatval($trade_data[5]),
                        'h' => floatval($trade_data[5]),
                        'l' => floatval($trade_data[5]),
                        'v' => 0,
                        's' => 1
                    );
                } else {
                    $data = array(
                        't' => $t_old,
                        'o' => 0,
                        'c' => 0,
                        'h' => 0,
                        'l' => 0,
                        'v' => 0,
                        's' => 1
                    );
                }
            } else {
                $data = array();
            }
            $this->Kline[$market][$resolutionName]['data'] = array();
        } else {
            // var_dump($this->Kline[$market][$k]);
            $id         = $this->Kline[$market][$resolutionName]['id'] ? $this->Kline[$market][$resolutionName]['id'] : 0;
            $trade_info = Db::querySql("SELECT * FROM qq3479015851_trade_log WHERE market='$market' AND `id`>$id AND addtime>=$t AND addtime<$t_end");
            if (!empty($trade_info)) {
                foreach ($trade_info as $tf) {
                    if ($open_time == 0) {
                        $open_time = $tf['addtime'];
                        $open      = $tf['price'];
                    } else
                        if ($open_time > $tf['addtime']) {
                            $open_time = $tf['addtime'];
                            $open      = $tf['price'];
                        }

                    if ($close_time == 0) {
                        $close_time = $tf['addtime'];
                        $close      = $tf['price'];
                    } else
                        if ($close_time < $tf['addtime']) {
                            $close_time = $tf['addtime'];
                            $close      = $tf['price'];
                        }

                    if ($highest == 0)
                        $highest = $tf['price'];
                    else
                        if ($highest < $tf['price'])
                            $highest = $tf['price'];

                    if ($lowest == 0)
                        $lowest = $tf['price'];
                    else
                        if ($lowest > $tf['price'])
                            $lowest = $tf['price'];
                    $volume                                      += $tf['num'];
                    $status                                      = 1;
                    $this->Kline[$market][$resolutionName]['id'] = $tf['id'];
                }

                $data = array(
                    't' => $t,
                    'o' => floatval($open),
                    'c' => floatval($close),
                    'h' => floatval($highest),
                    'l' => floatval($lowest),
                    'v' => $volume,
                    's' => $status
                );

                if ($this->Kline[$market][$resolutionName]['data']) {
                    $data_old  = $this->Kline[$market][$resolutionName]['data'];
                    $data['o'] = $data_old['o'] ? $data_old['o'] : $data['o'];

                    if ($data['h'] > $data_old['h'])
                        $data_old['h'] = $data['h'];
                    else
                        $data['h'] = $data_old['h'];

                    if ($data['l'] < $data_old['l'])
                        $data_old['l'] = $data['l'];
                    else
                        $data['l'] = $data_old['l'];

                    $data['v'] += $data_old['v'];
                }


                $this->Kline[$market][$resolutionName]['data'] = $data;
            } else {
                $data = $this->Kline[$market][$resolutionName]['data'];
            }
        }

        if ($resolutionName == '1')
            if (!$data) {
                // var_dump($this->Kline[$market][$k]);
                // echo "t: " . $t;
            }
        $result[$resolutionName] = $data;
    }
    return $result;
}

Copy

后台很简单，总共就GetKlineHistory和GetKlineUpdata两个方法，前者对应getBars，用于获取区间内K线数据，后者则对应subscribeBars，用于更新K线数据。

接下来是前台websocket部分

socket = new WebSocket(url);

socket.onopen = () => {

}
socket.onmessage = msg => {
    console.log(msg);
    data = JSON.parse(msg.data);
    if (data.type == 'server')
        window[data.method](data.data);
}
socket.onclose = () => {
    console.log("断开链接");
}
socket.onerror = () => {

};

function KlineHistory(data) {

}
function KlineUpdata(data) {

}

Copy

该websocket还涉及到其他的业务，代码没有贴出来，需要注意的是KlineHistory和KlineUpdata这两个函数，这是两个空函数，在后面会用到。

下面是JS对象里的getBars和subscribeBars方法

getBars: (symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback, firstDataRequest) => {
    timer = setInterval(() => {
        if (window.parent.socket.readyState == 1){
            window.parent.websocketSend({
                type: 'client',
                method: 'KlineHistory',
                data: {
                    market: symbolInfo.name,
                    from: from,
                    to: to,
                    resolution: resolution
                }
            });
            clearInterval(timer);
        }else{

        }
    }, 100);

    window.parent.KlineHistory = data =>{
        let bars = [];
        if (data){
            data.forEach(e => {
                var _bar = {
                    time: e.t * 1000,
                    close: e.c,
                    open: e.o,
                    high: e.h,
                    low: e.l,
                    volume: e.v
                }
                bars.push(_bar);
            });
            meta = {
                noData: false
            }
        }else{
            meta = {
                noData: true
            }
        }
        setTimeout(() => onHistoryCallback(bars, meta));
    }
},

subscribeBars: (symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) => {
    window.parent.KlineUpdata = data => {
        if (!data.s)
            return;
        var bar = {
            time: data.t * 1000,
            close: data.c,
            open: data.o,
            high: data.h,
            low: data.l,
            volume: data.v
        }
        setTimeout(() => onRealtimeCallback(bar));
    }
},

Copy

这里首先要注意的是，TradingView这个插件最后会运行在一个iframe标签里面的，也就是说，如果你想让插件和你的其他业务逻辑公用一个websocket，那么你需要使用window.parent来获取父级窗口，再获取父级窗口的websocket对象。

插件在加载完毕后，首先会执行getBars获取历史的K线数据。这时候虽然插件已经加载完毕，但是websocket不一定已经连接上了，所以我在这里使用了setInterval，socket.readyState为websocket的连接状态，如果已经连接完成，那么就通过websocket向后台发送请求，并清除定时器。

发送了数据请求怎么接收数据呢？这里我们通过改变window.parent.KlineHistory这个函数的方式，将onHistoryCallback这个回调函数传递给了父级KlineHistory函数，使其能够调用，这样在websocket收到数据之后就能执行onHistoryCallback。

subscribeBars用于发起订阅信息，会在插件加载完毕后调用且仅调用一次，用同样改变父级函数的方法，将onRealtimeCallback传给父级的函数。

https://b.aitrade.ga/books/tradingview/book/Widget-Constructor.html

https://b.aitrade.ga/books/proficient-tradingview/book/03-Http-Example-JP.html