关于tradingView与websocket结合的可⽤案例
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="trade-view">
</div>
<script src="static/tradeview/charting_library/charting_library.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/dataUpdater.js" type="text/javascript" charset="utf-8"></script>
<script src="js/datafees.js" type="text/javascript" charset="utf-8"></script>
<script src="js/socket.js" type="text/javascript" charset="utf-8"></script>
<script src="libs.baidu/jquery/2.0.0/jquery.min.js"></script>
<script>
var count = 0;
function TVjsApi() {
// var urls = 'ws://*****';
// var urls = 'ws://****/trade_market/websocket/btc_usdt'
var urls = 'wss://api.fcoin/v2/ws';
this.widgets = null;
this.socket = new socket(urls);
// this.socket = new socket();
this.datafeeds = new datafeeds(this);
this.symbol = null,
this.interval = null,
this.cacheData = {},
this.lastTime = null,
this.isLoading = true;
var that = this;
this.socket.doOpen()
('open', function() {
that.socket.send({
cmd: 'req',
args: ["husdt", 150, w() / 1000)]
})
})
('message', Message)
}
TVjsApi.prototype.init = function() {
//设置默认symbol，interval的默认值
var symbol = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ethusdt';
var interval = arguments.length > 0 && arguments[1] !== undefined ? arguments[1] : 5;
if (!this.widgets) {
this.widgets = window.tvWidget = new TradingView.widget({
//默认商品设置
symbol: symbol,
//默认请求间隔
interval: interval,
//默认是否全屏
// fullscreen: true,
//默认是否⾃适应
/
/ autosize:true,
//设置容器
container_id: 'trade-view',
datafeed: this.datafeeds,
library_path: './static/tradeview/charting_library/',
enabled_features: [],
timezone: 'Asia/Shanghai',
locale: 'zh',
debug: false,
//设置默认⼯具条背景颜⾊
toolbar_bg:"#121A2E",
/
/设置默认不显⽰组件
disabled_features: [
'header_symbol_search',
"use_localstorage_for_settings",
"left_toolbar",
'legend_context_menu',
"border_around_the_chart",
"timeframes_toolbar",
"volume_force_overlay",
"pane_context_menu",
"header_symbol_search",
"symbol_search_hot_key",
"header_undo_redo",
"header_compare",
"header_chart_type",
"header_screenshot",
"header_resolutions",
// "header_settings",
// "header_indicators"
],
//设置初始化样式配置
overrides: {
"mainSeriesProperties.candleStyle.upColor": "#589065",
"mainSeriesProperties.candleStyle.downColor": "#AE4E54",
"mainSeriesProperties.candleStyle.drawWick": true,
"mainSeriesProperties.candleStyle.wickUpColor:": '#AE4E54',
"mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54",
"mainSeriesProperties.candleStyle.drawBorder": true,
"mainSeriesProperties.candleStyle.borderUpColor": "#589065",
"mainSeriesProperties.candleStyle.borderDownColor": "#AE4E54", //-----------------------------------------------------------------------
"paneProperties.background": "#121a2e",
"lor": "#1e273c",
"paneProperties.vertGridProperties.style": 0,
"lor": "#1e273c",
"paneProperties.horzGridProperties.style": 0,
"scalesProperties.lineColor": "#505d7b",
"Color": "#333e58",
"paneProperties.legendProperties.showLegend": false,
//"scalesProperties.showLeftScale":false,
"volumePaneSize": "medium",
"MACDPaneSize": "tiny",
},
//设置初始化加载条样式
loading_screen: {
"backgroundColor": "#1e222d",
"foregroundColor": "#5d7d93"
},
studies_overrides: {
//设置成交量默认样式
"lor.0": "rgba(174,78,84,0.7)",
"lor.1": "rgba(88,144,101,0.7)",
}
})
this.symbol = symbol
this.interval = interval
var thats = this.widgets;
ChartReady(function() {
//设置均线种类 均线样式
thats.chart().createStudy('Moving Average', false, false, [5], null, {'lor': 'rgb(150, 95, 196)'}); thats.chart().createStudy('Moving Average', false, false, [10], null, {'lor': 'rgb(116,149,187)'}); thats.chart().createStudy('Moving Average', false, false, [20],null,{"lor": "rgb(58,113,74)"});
thats.chart().createStudy('Moving Average', false, false, [30],null,{"lor": "rgb(118,32,99)"});
//设置⾃定义按钮种类 样式 事件
.attr('title', "1min").addClass("mydate")
.text("1min")
.
on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn");
$(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('1', function onReadyCallback() {});
});
.attr('title', "5min")
.text("5min")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn");
$(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('5', function onReadyCallback() {});
});
.attr('title', "15min")
.text("15min")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn");
$(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('15', function onReadyCallback() {}); });
.attr('title', "30min")
.text("30min")
.css("background-color", "#4e5b85")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn"); $(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('30', function onReadyCallback() {}); });
.attr('title', "1hour")
.text("1hour")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn"); $(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('60', function onReadyCallback() {}); });
.attr('title', "4hour")
.text("4hour")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn"); $(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
js argumentsthats.chart().setResolution('240', function onReadyCallback() {}); });
.attr('title', "1day")
.text("1day")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn"); $(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('1D', function onReadyCallback() {}); });
.attr('title', "5day")
.text("5day")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn"); $(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('5D', function onReadyCallback() {}); });
.attr('title', "1week")
.text("1week")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn");
$(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('1W', function onReadyCallback() {});
});
.attr('title', "1mon")
.text("1mon")
.on('click', function(e) {
$(this).parent().siblings().children().removeClass("clickBtn");
$(this).parent().siblings().children().addClass("mydate");
$(this).removeClass("mydate");
$(this).addClass("clickBtn");
thats.chart().setResolution('1M', function onReadyCallback() {});
});
})
}
}
TVjsApi.prototype.sendMessage = function(data) {
var that = this;
console.log("这是要发送的数据："+JSON.stringify(data) )
if (this.socket.checkOpen()) {
this.socket.send(data)
} else {
('open', function() {
that.socket.send(data)
})
}
}
TVjsApi.prototype.unSubscribe = function(interval) {
if (interval < 60) {
this.sendMessage({
cmd: 'unsub',
args: ["candle.M" + interval + "." + LowerCase(), 1440, w() / 1000)]
})
} else if (interval >= 60) {
this.sendMessage({
cmd: 'unsub',
args: ["candle.H" + (interval / 60) + "." + LowerCase(), 1440, w() / 1000)] })
} else {
this.sendMessage({
cmd: 'unsub',
args: ["candle.D1." + LowerCase(), 207, w() / 1000)]
})
}
}
TVjsApi.prototype.subscribe = function() {
if (this.interval < 60) {
this.sendMessage({
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论