⚡ HTML-JS-Websockets

• HTML-Javascript app using Websockets to connect to the Binance web server and display dynamic financial data.
• • Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

📚 General info

• Cryptocurrency data received from Binance

📷 Screenshots

.

📶 Technologies

• HTML5 markup language
• Websockets API communication session
• Binance Websocket Streams base endpoint: wss://stream.binance.com:9443

💾 Setup

• Display the HTML file using a live server such as the VS Code Live Server extension.
• The template price data updates automatically due to the Websockets communication channel onmesssage event handler.

💻 Code Examples

• extract from app.js to assign innertext to HTML elements.

// extract stock symbol
// add stock name to stockStreams array if not there already then display name, volume traded and close price
const handleStock = (stock) => {
	const stockStream = stock.s // e.g. RNDRBUSD
	const stockStreamClose = stock.c // close price

	if (stockStreams.indexOf(stockStream) === -1) {
		document.getElementById('stockStreams').innerHTML += '<br/>' + stockStream + ': <span id="stockStream_' + stockStream + '"></span>' + ': <span id="stockStreamClose' + stockStream + '"></span>';
		stockStreams.push(stockStream);
		document.getElementById('sumStreams').innerText = stockStreams.length;
	}
	document.getElementById('stockStream_' + stockStream).innerText = parseFloat(stock.v).toFixed(0);
	document.getElementById('stockStreamClose' + stockStream).innerText = parseFloat(stock.c).toFixed(2);
}

🆒 Features

• Websockets are easy to use

📋 Status & To-do list

• Status: Working
• To-do: Expand data shown and convert to tqble

👏 Inspiration

• Morgan Page: Real-Time Crypto Prices using the Binance API with JavaScript & Websockets

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com