摘要:無奈,還是需要對(duì)這份代碼進(jìn)行加工。功能缺少,主要指業(yè)務(wù)邏輯實(shí)現(xiàn)上的功能缺少。缺少的功能主要是歷史記錄獲取展示的功能。查詢緩存是否為空,如果為空,表示數(shù)據(jù)還沒有下發(fā),后再查詢一次。如果有數(shù)據(jù),取到當(dāng)前數(shù)據(jù),執(zhí)行回調(diào)。
前幾天寫了一篇關(guān)于tradingView和webSocket的文章傳送門,因?yàn)榇a本身還在整合中,所以比較混亂,而且也沒有demo可以運(yùn)行。
這兩天在GitHub上面看到了一個(gè)vue寫的demo,仔細(xì)對(duì)比,原來就是我得到的最初版本的tradingView-webSocket代碼,很開心,以為可以直接嵌入項(xiàng)目中,省了一番功夫。
然而現(xiàn)實(shí)是骨感的,這個(gè)demo并沒有寫的太完善,該缺的功能一樣還是缺著的……傳送門。
無奈,還是需要對(duì)這份代碼進(jìn)行加工。
1、原demo分析核心代碼有4個(gè)文件:
index.vue
datafees.js
dataUpdater.js
scoket.js
index是tradingView的實(shí)例化和用戶行為的響應(yīng),屬于業(yè)務(wù)邏輯實(shí)現(xiàn)。
datafees定義了實(shí)例化tradingview的對(duì)象,提供圖表調(diào)用的方法,屬于數(shù)據(jù)交互的接口。
dataUpdater是一個(gè)數(shù)據(jù)的觸發(fā)器,當(dāng)數(shù)據(jù)發(fā)生變化,通過dataUpdater來通知tradingview進(jìn)行圖表渲染,是業(yè)務(wù)邏輯和tradingview實(shí)例之間的通信人。
scoket定義了webSocket的連接方式和數(shù)據(jù)收發(fā)的方法,是前后端數(shù)據(jù)交互的實(shí)現(xiàn)。
功能缺少,主要指業(yè)務(wù)邏輯實(shí)現(xiàn)上的功能缺少。
缺少的功能主要是歷史記錄獲取、展示的功能。
初始化即獲取1440條數(shù)據(jù)渲染到界面上,增量數(shù)據(jù)(實(shí)時(shí)交易記錄)直接覆蓋第1440條記錄。
這樣做的結(jié)果是,用戶往左邊拖拽的時(shí)候,不能展示更多的數(shù)據(jù),同時(shí),最新的增量數(shù)據(jù)的展示也是錯(cuò)位的。
另外,沒有對(duì)webSocket的close事件進(jìn)行監(jiān)聽,當(dāng)連接關(guān)閉之后,增量更新即停止,這樣的用戶體驗(yàn)是不夠的。
而且,初始化即獲取1440條記錄,將會(huì)導(dǎo)致初始化的時(shí)候需要請(qǐng)求的數(shù)據(jù)過多,查詢時(shí)間和數(shù)據(jù)接收的時(shí)間都受影響,同樣影響用戶體驗(yàn)。
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ù)請(qǐng)求,從當(dāng)前時(shí)間往回獲取1440條數(shù)據(jù),獲取的是5分鐘時(shí)間顆粒的btcusdt商品。然后監(jiān)聽從webSocket返回的數(shù)據(jù)。
實(shí)例化tradingview:
init(){}
通過webSocket發(fā)送數(shù)據(jù):
sendMessage(){}
訂閱實(shí)時(shí)交易數(shù)據(jù):
subscribe(){}
取消訂閱實(shí)時(shí)交易數(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í)間,開始訂閱增量數(shù)據(jù)。
如果不是數(shù)組,而且有type屬性,代表的是增量數(shù)據(jù),通知圖表插件渲染數(shù)據(jù),替換cacheData的最后一個(gè)元素。
下面的方法,是圖表插件查詢數(shù)據(jù)的時(shí)候使用:
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) } }
如果圖表插件查詢的時(shí)候,resolution不同,則表示用戶切換了時(shí)間顆粒,需要取消訂閱,修改interval,重新獲取歷史記錄。
查詢緩存cacheData是否為空,如果為空,表示數(shù)據(jù)還沒有下發(fā),10ms后再查詢一次。
如果cacheData有數(shù)據(jù),取到當(dāng)前數(shù)據(jù),執(zhí)行回調(diào)onLoadedCallback。
如上,代碼已經(jīng)分析完了,至于怎么修改,未完待續(xù)!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/99275.html
摘要:用戶量量大,數(shù)據(jù)量大,而且要求實(shí)時(shí)更新數(shù)據(jù)的時(shí)候,需要使用。該方法接收的有兩種,一種是數(shù)組。是歷史數(shù)據(jù),時(shí)間段的數(shù)據(jù),根據(jù)時(shí)間顆粒來劃分。 1、websocket 用戶量量大,數(shù)據(jù)量大,而且要求實(shí)時(shí)更新數(shù)據(jù)的時(shí)候,需要使用websocket。tradingview正好就是這樣的應(yīng)用場(chǎng)景。 2、tradingview和websocket結(jié)合 getBars方法。tradingview圖...
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
摘要:歡迎你們跟著閏土大叔走進(jìn)時(shí)代。其中購(gòu)買數(shù)量可以增加或減少,每類商品還可以從購(gòu)物車中移除。后記這大概就是一次用重構(gòu)電商項(xiàng)目中的購(gòu)物車模塊的所有實(shí)現(xiàn)過程。作者閏土大叔鏈接來源掘金著作權(quán)歸作者所有。 前言 從這篇文章開始,我準(zhǔn)備給大家分享一些關(guān)于Vue.js這門框架的技巧性系列文章,正好我們公司項(xiàng)目中也用到了Vue。所以,教是最好的學(xué)。進(jìn)階篇比較適合于二三線城市,還在小廠打拼的童鞋們。歡迎你...
閱讀 1776·2021-11-11 16:55
閱讀 2579·2021-08-27 13:11
閱讀 3635·2019-08-30 15:53
閱讀 2308·2019-08-30 15:44
閱讀 1399·2019-08-30 11:20
閱讀 1047·2019-08-30 10:55
閱讀 952·2019-08-29 18:40
閱讀 3045·2019-08-29 16:13