130 lines
3.8 KiB
JavaScript
130 lines
3.8 KiB
JavaScript
var app_con;
|
|
|
|
//*******************Chart*********************
|
|
//Reference the target div for the chart. Div was defined in index.html
|
|
var container = document.getElementById('chart');
|
|
//Create a chart object
|
|
var chart = LightweightCharts.createChart(container, {
|
|
width: 1000,
|
|
height: 500,
|
|
crosshair: {
|
|
mode: LightweightCharts.CrosshairMode.Normal,
|
|
},
|
|
priceScale: {
|
|
borderColor: 'rgba(197, 203, 206, 0.8)',
|
|
},
|
|
timeScale: {
|
|
borderColor: 'rgba(197, 203, 206, 0.8)',
|
|
timeVisible: true,
|
|
secondsVisible: false,
|
|
barSpacing: 6
|
|
},
|
|
handleScroll: true
|
|
});
|
|
bind_charts(chart);
|
|
chart.applyOptions({
|
|
watermark: {visible: true,
|
|
color: '#DBC29E',
|
|
text: bt_data['trading_pair'],
|
|
fontSize: 30,
|
|
fontFamily: 'Roboto',
|
|
fontStyle: 'bold',
|
|
vertAlign: 'center'
|
|
}
|
|
});
|
|
// - Create the candle stick series for our chart
|
|
var candleSeries = chart.addCandlestickSeries();
|
|
|
|
//Fetch price history
|
|
var price_history = fetch('http://localhost:5000/history')
|
|
.then((r) => r.json())
|
|
.then((response) => {
|
|
return response;
|
|
})
|
|
|
|
//Initialise the candlestick series
|
|
price_history.then((ph) => {
|
|
//Initialise the candle data
|
|
candleSeries.setData(ph);
|
|
//Initialise indicators
|
|
indicator_init();
|
|
})
|
|
|
|
/* Place functions here that need to
|
|
be run everytime a new msg is received */
|
|
function update_on_msg(new_candle){
|
|
// Update candlestick series
|
|
candleSeries.update(new_candle);
|
|
// Update javascript coded indicators
|
|
indicator_update_msg_received(new_candle);
|
|
// Send a copy of the data to the server
|
|
app_con.send( JSON.stringify({ message_type: "candle_data", data :new_candle }));
|
|
}
|
|
|
|
/* Place functions that here that need to
|
|
be run everytime a candle is closed */
|
|
function update_on_candle_close(new_candle){
|
|
// Send a copy of the data to the server
|
|
app_con.send( JSON.stringify({ message_type: "candle_data", data :new_candle }));
|
|
}
|
|
|
|
// Create a web socket connection to the exchange
|
|
function set_websocket(interval){
|
|
// Connect to our app
|
|
app_con = new WebSocket('ws://localhost:5000/ws');
|
|
app_con.onopen = () => app_con.send("Connection OK");
|
|
|
|
app_con.addEventListener('message', ev => {
|
|
if(ev.data){
|
|
// Get the message received from server
|
|
msg = JSON.parse(ev.data)
|
|
// Handle a request from the server
|
|
if (msg.request) {
|
|
//handle request
|
|
console.log('Received a request from the server');
|
|
console.log(msg.request);
|
|
}
|
|
// Handle a reply from the server
|
|
if (msg.reply) {
|
|
// Handle indicator updates
|
|
if (msg.reply == 'i_updates'){
|
|
// console.log(msg.data);
|
|
indicator_update(msg.data)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
var ws = "wss://stream.binance.com:9443/ws/btcusdt@kline_" + interval;
|
|
var binanceSocket = new WebSocket(ws);
|
|
|
|
// Set the on-message call-back for the socket
|
|
binanceSocket.onmessage = function (event) {
|
|
// Convert message to json obj
|
|
var message = JSON.parse(event.data);
|
|
// Isolate the candle data from message
|
|
var candlestick = message.k;
|
|
//console.log(message.k)
|
|
// Reformat data for lightweight charts
|
|
new_candle={
|
|
time: candlestick.t / 1000,
|
|
open: candlestick.o,
|
|
high: candlestick.h,
|
|
low: candlestick.l,
|
|
close: candlestick.c,
|
|
vol: candlestick.V
|
|
};
|
|
//Update frequently updated objects
|
|
update_on_msg(new_candle);
|
|
// Only call if the new candle received a new time stamp.
|
|
// Update the price history and per candle updated objects.
|
|
price_history.then((ph) => {
|
|
if ( new_candle.time > ph[ph.length-1].time) {
|
|
ph.push(new_candle);
|
|
update_on_candle_close(new_candle);
|
|
}
|
|
});
|
|
}
|
|
|
|
} |