https://github.com/andrewjbateman/html-js-websockets
:clipboard: Simple HTML & Javascript app using Websockets to show data from the Binance financial info. website
https://github.com/andrewjbateman/html-js-websockets
binance-api cryptocurrency html5 javascript websockets-client
Last synced: 7 months ago
JSON representation
:clipboard: Simple HTML & Javascript app using Websockets to show data from the Binance financial info. website
- Host: GitHub
- URL: https://github.com/andrewjbateman/html-js-websockets
- Owner: AndrewJBateman
- Created: 2021-06-07T05:12:07.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-07-26T19:33:00.000Z (almost 4 years ago)
- Last Synced: 2024-12-27T02:45:11.698Z (over 1 year ago)
- Topics: binance-api, cryptocurrency, html5, javascript, websockets-client
- Language: JavaScript
- Homepage:
- Size: 489 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :zap: HTML-JS-Websockets
* HTML-Javascript app using Websockets to connect to the [Binance](www.binance.com) web server and display dynamic financial data.
* * **Note:** to open web links in a new window use: _ctrl+click on link_
## :page_facing_up: Table of contents
* [General info](#general-info)
* [Screenshots](#screenshots)
* [Technologies](#technologies)
* [Setup](#setup)
* [Features](#features)
* [Status](#status)
* [Inspiration](#inspiration)
* [Contact](#contact)
## :books: General info
* Cryptocurrency data received from [Binance](www.binance.com)
## :camera: Screenshots
.
## :signal_strength: Technologies
* [HTML5](https://html.spec.whatwg.org/) markup language
* [Websockets API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) communication session
* [Binance Websocket Streams](https://github.com/binance/binance-spot-api-docs/blob/master/web-socket-streams.md) base endpoint: wss://stream.binance.com:9443
## :floppy_disk: Setup
* Display the HTML file using a live server such as the [VS Code Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
* The template price data updates automatically due to the Websockets communication channel [onmesssage event handler](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onmessage).
## :computer: Code Examples
* extract from `app.js` to assign [innertext](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText) to HTML elements.
```javascript
// 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 += '
' + stockStream + ': ' + ': ';
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);
}
```
## :cool: Features
* Websockets are easy to use
## :clipboard: Status & To-do list
* Status: Working
* To-do: Expand data shown and convert to tqble
## :clap: Inspiration
* [Morgan Page: Real-Time Crypto Prices using the Binance API with JavaScript & Websockets](https://www.youtube.com/watch?v=XXuUNZIQUVA)
## :file_folder: License
* N/A
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com