tradingview-websocket进阶

1、websocket

用户量量大,数据量大,而且要求实时更新数据的时候,需要使用websocket。
tradingview正好就是这样的应用场景。

2、tradingview和websocket结合

  • getBars方法。tradingview图表插件响应用户操作,根据用户界面渲染需要的数据时间段,调用getBars方法,传递参数function(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback),我们需要构造出预期的参数返回给onLoadedCallback方法,即onLoadedCallback(data)。
  • onLoadedCallback方法。该方法接收的data有两种,一种是list数组。另一种是newBars对象。list是历史数据,rangeStartDate - rangeEndDate时间段的数据,根据时间颗粒resolution来划分。newBars是增量数据,同样是rangeStartDate - rangeEndDate时间段的数据,但是这个数据必定是在当前的resolution内。当我们把数据返回给onLoadedCallback,图表会渲染这些数据。

3、数据获取和填充

  1. 页面初始化,实例化图表,连接websocket。
  2. 从websocket得到的数据存入缓存cacheData。
  3. 因为getBars是图表自己调用的,所以当我们存入数据到cacheData的时候,在getBars方法中调用onLoadedCallback就可以。

4、实例

图表调用的getBars方法:

TVjsApi.prototype.getBars = function(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback) {
    //console.log(' >> :', this.formatt(rangeStartDate*1000), this.formatt(rangeEndDate*1000))
    var ticker = this.symbol + "-" + resolution;
    var tickerload = ticker + "load";
    var tickerstate = ticker + "state";

    if(!this.cacheData[ticker] && !this.cacheData[tickerstate]){
        //如果缓存没有数据,而且未发出请求,记录当前节点开始时间
        this.cacheData[tickerload] = rangeStartDate;
        //发起请求,从websocket获取当前时间段的数据
        this.initMessage(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback);
        //设置状态为true
        this.cacheData[tickerstate] = !0;
        return false;
    }

    if(!this.cacheData[tickerload] || this.cacheData[tickerload] > rangeStartDate){
        //如果缓存有数据,但是没有当前时间段的数据,更新当前节点时间
        this.cacheData[tickerload] = rangeStartDate;
        //发起请求,从websocket获取当前时间段的数据
        this.initMessage(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback);
        //设置状态为true
        this.cacheData[tickerstate] = !0;
        return false;
    }
    if(this.cacheData[tickerstate]){
        //正在从websocket获取数据,禁止一切操作
        return false;
    }
    //ticker = this.symbol + "-" + this.interval;
    //如果缓存有数据,且长度不为0,构造数据
    if (this.cacheData[ticker] && this.cacheData[ticker].length) {
        this.isLoading = false
        var newBars = []
        this.cacheData[ticker].forEach(item => {
            if (item.time >= rangeStartDate * 1000 && item.time <= rangeEndDate * 1000) {
                newBars.push(item)
            }
        })
        onLoadedCallback(newBars)
    } else {
    //如果没有数据,等待10ms,再执行一次
        var self = this
        this.getBarTimer = setTimeout(function() {
            self.getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback)
        }, 10)
    }
}

获取历史数据list的init方法:

TVjsApi.prototype.initMessage = function(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback){
    //console.log('发起请求,从websocket获取当前时间段的数据');
    var that = this;
    //保留当前回调
    that.cacheData['onLoadedCallback'] = onLoadedCallback;
    //获取需要请求的数据数目
    var limit = that.initLimit(resolution, rangeStartDate, rangeEndDate);
    //商品名
    var symbol = that.symbol;
    //如果当前时间颗粒已经改变,停止上一个时间颗粒的订阅,修改时间节点值
    if(that.interval !== resolution){
        that.unSubscribe(that.interval)
        that.interval = resolution;
    }    
    //获取当前时间段的数据,在onMessage中执行回调onLoadedCallback
    if (that.interval < 60) {
        that.socket.send({
            cmd: 'req',
            args: ["candle.M"+resolution+"."+symbol, limit, rangeEndDate],
            id: 'trade.M'+ resolution +'.'+ symbol.toLowerCase()
        })
    } else if (that.interval >= 60) {
        that.socket.send({
            cmd: 'req',
            args: ["candle.H"+(resolution/60)+"."+symbol, limit, rangeEndDate],
            id: 'trade.H'+ (resolution / 60) +'.'+ symbol.toLowerCase()
        })
    } else {
        that.socket.send({
            cmd: 'req',
            args: ["candle.D1."+symbol, limit, rangeEndDate],
            id: 'trade.D1.'+ symbol.toLowerCase()
        })
    }
}

响应websocket的Message方法:

TVjsApi.prototype.onMessage = function(data) {
    var thats = this;
    //  console.log("这是后台返回的数据"+count+":"+JSON.stringify(data) )
    
    if (data.data && data.data.length) {
        //websocket返回的值,数组代表时间段历史数据,不是增量
        var list = []
        var ticker = thats.symbol + "-" + thats.interval;
        var tickerstate = ticker + "state";
        
        //var that = thats;
        //遍历数组,构造缓存数据
        data.data.forEach(function(element) {
            list.push({
                time: element.id*1000,
                open: element.open,
                high: element.high,
                low: element.low,
                close: element.close,
                volume: element.quote_vol
            })
        }, thats)
        //如果没有缓存数据,则直接填充,发起订阅
        if(!thats.cacheData[ticker]){
            /*thats.cacheData[ticker] = thats.cacheData[ticker].concat(list);
            thats.cacheData['onLoadedCallback'](list);
        }else{*/
            thats.cacheData[ticker] = list;
            thats.subscribe()
        }
        //新数据即当前时间段需要的数据,直接喂给图表插件
        if(thats.cacheData['onLoadedCallback']){
            thats.cacheData['onLoadedCallback'](list);
        }
        //请求完成,设置状态为false
        thats.cacheData[tickerstate] = !1;
        //记录当前缓存时间,即数组最后一位的时间
        thats.lastTime = thats.cacheData[ticker][thats.cacheData[ticker].length - 1].time            
    }
    if (data.type && data.type.indexOf(thats.symbol.toLowerCase()) !== -1) {
        // console.log(' >> sub:', data.type)
        // data带有type,即返回的是订阅数据,
        //缓存的key
        var ticker = thats.symbol + "-" + thats.interval;
        //构造增量更新数据
        var barsData = {
            time: data.id * 1000,
            open: data.open,
            high: data.high,
            low: data.low,
            close: data.close,
            volume: data.quote_vol
        }
        /*if (barsData.time >= thats.lastTime && thats.cacheData[ticker] && thats.cacheData[ticker].length) {
            thats.cacheData[ticker][thats.cacheData[ticker].length - 1] = barsData
        }*/
        //如果增量更新数据的时间大于缓存时间,而且缓存有数据,数据长度大于0
        if (barsData.time > thats.lastTime && thats.cacheData[ticker] && thats.cacheData[ticker].length) {
            //增量更新的数据直接加入缓存数组
            thats.cacheData[ticker].push(barsData)
            //修改缓存时间
            thats.lastTime = barsData.time
        }else if(barsData.time == thats.lastTime && thats.cacheData[ticker].length){
            //如果增量更新的时间等于缓存时间,即在当前时间颗粒内产生了新数据,更新当前数据
            thats.cacheData[ticker][thats.cacheData[ticker].length - 1] = barsData
        }
        // 通知图表插件,可以开始增量更新的渲染了
        thats.datafeeds.barsUpdater.updateData()
    }
}

代码逻辑如下:

  1. getBars方法由图表插件调用,带有当前需要渲染的时间参数、时间颗粒和callback。
  2. 如果缓存中有当前时间段的数据,构造newBars,调用onLoadedCallback(newBars)。
  3. 如果缓存中没有数据,判断当前需要的数据类型,如果是list历史记录,那么我们需要通过websocket来获取,执行initMessage。
  4. 判断当前缓存中的时间颗粒resolution是否已经改变,如果已经改变,需要清除缓存数据,更新缓存cacheData = list,返回图表onLoadedCallback(list),另外需要订阅当前时间颗粒的增量数据,取消上一次订阅。
  5. 如果时间颗粒resolution没有改变,websocket得到的历史数据不需要存入缓存,直接调用onLoadedCallback(list)就可以,因为图表插件的渲染是根本得到的数据时间段来执行的,即:图表插件会缓存已经渲染过的数据。
  6. 如果当前请求的数据为增量数据,但是缓存中没有,等待10ms,因为增量数据来源于websocket,我们已经订阅,需要等待websocket返回,相当于pending。

以上逻辑基本含括了用户的两个重要操作:切换时间颗粒、查看历史记录。
可运行代码在GitHub上已经更新,可预览

你可能感兴趣的:(javascript)