摘要：無奈，還是需要對這份代碼進行加工。功能缺少，主要指業(yè)務(wù)邏輯實現(xiàn)上的功能缺少。缺少的功能主要是歷史記錄獲取展示的功能。查詢緩存是否為空，如果為空，表示數(shù)據(jù)還沒有下發(fā)，后再查詢一次。如果有數(shù)據(jù)，取到當前數(shù)據(jù)，執(zhí)行回調(diào)。

前幾天寫了一篇關(guān)于tradingView和webSocket的文章傳送門，因為代碼本身還在整合中，所以比較混亂，而且也沒有demo可以運行。
這兩天在GitHub上面看到了一個vue寫的demo，仔細對比，原來就是我得到的最初版本的tradingView-webSocket代碼，很開心，以為可以直接嵌入項目中，省了一番功夫。
然而現(xiàn)實是骨感的，這個demo并沒有寫的太完善，該缺的功能一樣還是缺著的……傳送門。

無奈，還是需要對這份代碼進行加工。

核心代碼有4個文件：

index.vue

datafees.js

dataUpdater.js

scoket.js

index是tradingView的實例化和用戶行為的響應(yīng)，屬于業(yè)務(wù)邏輯實現(xiàn)。
datafees定義了實例化tradingview的對象，提供圖表調(diào)用的方法，屬于數(shù)據(jù)交互的接口。
dataUpdater是一個數(shù)據(jù)的觸發(fā)器，當數(shù)據(jù)發(fā)生變化，通過dataUpdater來通知tradingview進行圖表渲染，是業(yè)務(wù)邏輯和tradingview實例之間的通信人。
scoket定義了webSocket的連接方式和數(shù)據(jù)收發(fā)的方法，是前后端數(shù)據(jù)交互的實現(xiàn)。

功能缺少，主要指業(yè)務(wù)邏輯實現(xiàn)上的功能缺少。
缺少的功能主要是歷史記錄獲取、展示的功能。
初始化即獲取1440條數(shù)據(jù)渲染到界面上，增量數(shù)據(jù)(實時交易記錄)直接覆蓋第1440條記錄。
這樣做的結(jié)果是，用戶往左邊拖拽的時候，不能展示更多的數(shù)據(jù)，同時，最新的增量數(shù)據(jù)的展示也是錯位的。
另外，沒有對webSocket的close事件進行監(jiān)聽，當連接關(guān)閉之后，增量更新即停止，這樣的用戶體驗是不夠的。
而且，初始化即獲取1440條記錄，將會導致初始化的時候需要請求的數(shù)據(jù)過多，查詢時間和數(shù)據(jù)接收的時間都受影響，同樣影響用戶體驗。

index.vue

created(){
    this.socket.doOpen()
    this.socket.on("open", () => {
      this.socket.send({ cmd: "req", args: [`candle.M5.btcusdt}`, 1440, parseInt(Date.now() / 1000)] })
    })
    this.socket.on("message", this.onMessage)
}

在創(chuàng)建之后，連接socket，發(fā)送歷史數(shù)據(jù)請求，從當前時間往回獲取1440條數(shù)據(jù)，獲取的是5分鐘時間顆粒的btcusdt商品。然后監(jiān)聽從webSocket返回的數(shù)據(jù)。

實例化tradingview:

init(){}

通過webSocket發(fā)送數(shù)據(jù):

sendMessage(){}

訂閱實時交易數(shù)據(jù):

subscribe(){}

取消訂閱實時交易數(shù)據(jù):

unSubscribe(){}

以上方法，都是直接調(diào)用接口，下面是業(yè)務(wù)邏輯：

onMessage(data) {
      // console.log(data)
      if (data.data && data.data.length) {
        const list = []
        const ticker = `${this.symbol}-${this.interval}`
        data.data.forEach(function (element) {
          list.push({
            time: this.interval !== "D" || this.interval !== "1D" ? element.id * 1000 : element.id,
            open: element.open,
            high: element.high,
            low: element.low,
            close: element.close,
            volume: element.quote_vol
          })
        }, this)
        this.cacheData[ticker] = list
        this.lastTime = list[list.length - 1].time
        this.subscribe()
      }
      if (data.type && data.type.indexOf(this.symbol.toLowerCase()) !== -1) {
        // console.log(" >> sub:", data.type)
        this.datafeeds.barsUpdater.updateData()
        const ticker = `${this.symbol}-${this.interval}`
        const barsData = {
          time: data.id * 1000,
          open: data.open,
          high: data.high,
          low: data.low,
          close: data.close,
          volume: data.quote_vol
        }
        if (barsData.time >= this.lastTime && this.cacheData[ticker] && this.cacheData[ticker].length) {
          this.cacheData[ticker][this.cacheData[ticker].length - 1] = barsData
        }
      }
    }

從socket接到數(shù)據(jù)，判斷數(shù)據(jù)類型，如果是數(shù)組，代表的是歷史數(shù)據(jù)，存入cacheData，記錄時間，開始訂閱增量數(shù)據(jù)。
如果不是數(shù)組，而且有type屬性，代表的是增量數(shù)據(jù)，通知圖表插件渲染數(shù)據(jù)，替換cacheData的最后一個元素。

下面的方法，是圖表插件查詢數(shù)據(jù)的時候使用：

getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback) {
      // console.log(" >> :", rangeStartDate, rangeEndDate)
      if (this.interval !== resolution) {
        this.unSubscribe(this.interval)
        this.interval = resolution
        if (resolution < 60) {
          this.sendMessage({ cmd: "req", args: [`candle.M${this.interval}.${this.symbol.toLowerCase()}`, 1440, parseInt(Date.now() / 1000)] })
        } else if (resolution >= 60) {
          this.sendMessage({ cmd: "req", args: [`candle.H${this.interval / 60}.${this.symbol.toLowerCase()}`, 1440, parseInt(Date.now() / 1000)] })
        } else {
          this.sendMessage({ cmd: "req", args: [`candle.D1.${this.symbol.toLowerCase()}`, 800, parseInt(Date.now() / 1000)] })
        }
      }
      const ticker = `${this.symbol}-${this.interval}`
      if (this.cacheData[ticker] && this.cacheData[ticker].length) {
        this.isLoading = false
        const newBars = []
        this.cacheData[ticker].forEach(item => {
          if (item.time >= rangeStartDate * 1000 && item.time <= rangeEndDate * 1000) {
            newBars.push(item)
          }
        })
        onLoadedCallback(newBars)
      } else {
        const self = this
        this.getBarTimer = setTimeout(function () {
          self.getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onLoadedCallback)
        }, 10)
      }
    }

如果圖表插件查詢的時候，resolution不同，則表示用戶切換了時間顆粒，需要取消訂閱，修改interval，重新獲取歷史記錄。
查詢緩存cacheData是否為空，如果為空，表示數(shù)據(jù)還沒有下發(fā)，10ms后再查詢一次。
如果cacheData有數(shù)據(jù)，取到當前數(shù)據(jù)，執(zhí)行回調(diào)onLoadedCallback。

如上，代碼已經(jīng)分析完了，至于怎么修改，未完待續(xù)！