tradingview-websocket進階

Cc_2011 發布于2019-08-23 12:51 / 1547人閱讀

摘要：用戶量量大，數據量大，而且要求實時更新數據的時候，需要使用。該方法接收的有兩種，一種是數組。是歷史數據，時間段的數據，根據時間顆粒來劃分。

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、數據獲取和填充

頁面初始化，實例化圖表，連接websocket。

從websocket得到的數據存入緩存cacheData。

因為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()
    }
}

代碼邏輯如下：

getBars方法由圖表插件調用，帶有當前需要渲染的時間參數、時間顆粒和callback。

如果緩存中有當前時間段的數據，構造newBars，調用onLoadedCallback(newBars)。

如果緩存中沒有數據，判斷當前需要的數據類型，如果是list歷史記錄，那么我們需要通過websocket來獲取，執行initMessage。

判斷當前緩存中的時間顆粒resolution是否已經改變，如果已經改變，需要清除緩存數據，更新緩存cacheData = list，返回圖表onLoadedCallback(list)，另外需要訂閱當前時間顆粒的增量數據，取消上一次訂閱。

如果時間顆粒resolution沒有改變，websocket得到的歷史數據不需要存入緩存，直接調用onLoadedCallback(list)就可以，因為圖表插件的渲染是根本得到的數據時間段來執行的，即：圖表插件會緩存已經渲染過的數據。

如果當前請求的數據為增量數據，但是緩存中沒有，等待10ms，因為增量數據來源于websocket，我們已經訂閱，需要等待websocket返回，相當于pending。

以上邏輯基本含括了用戶的兩個重要操作：切換時間顆粒、查看歷史記錄。
可運行代碼在GitHub上已經更新，可預覽。

云服務器 GPU云服務器進階技巧 -進階進階進階篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99049.html

tradingView-webSocket進階——Vue.js

摘要：無奈，還是需要對這份代碼進行加工。功能缺少，主要指業務邏輯實現上的功能缺少。缺少的功能主要是歷史記錄獲取展示的功能。查詢緩存是否為空，如果為空，表示數據還沒有下發，后再查詢一次。如果有數據，取到當前數據，執行回調。前幾天寫了一篇關于tradingView和webSocket的文章傳送門，因為代碼本身還在整合中，所以比較混亂，而且也沒有demo可以運行。這兩天在GitHub上面看到了一...

levius 2019-08-23 13:11 評論0 收藏0
【進階1-3期】JavaScript深入之內存空間詳細圖解

摘要：進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第3天。本計劃一共28期，每期重點攻...

coordinate35 2019-08-23 13:47 評論0 收藏0
【進階1-2期】JavaScript深入之執行上下文棧和變量對象

摘要：本計劃一共期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第二天。本計劃一共28期，每期...

Richard_Gao 2019-08-23 13:46 評論0 收藏0
【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
【進階1-1期】理解JavaScript 中的執行上下文和執行棧

摘要：首次運行代碼時，會創建一個全局執行上下文并到當前的執行棧中。執行上下文的創建執行上下文分兩個階段創建創建階段執行階段創建階段確定的值，也被稱為。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，，今天是第一天本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進...

import. 2019-08-23 13:46 評論0 收藏0