Real-Time Crypto Prices using the Binance API with JavaScript & Websockets

so if you've got even the slightest bit of interest in stocks or cryptocurrency then you've probably come across sites like these and uh this is the binance site and as you can see it has a kind of live update going on here and um you know i've got a little bit of ethereum so i like to sort of keep an eye on this number here and as you can see this on this site this is actually updating in real time so you may be wondering well how on earth do they do this and the magic source is websockets so websockets are extremely powerful they enable you to get a live feed from a server i've used them in the past for multiplayer games games like agario use websockets to implement their multiplayer so i'm going to show you how you can put a number like this on a web page that updates in real time and it's actually remarkably easy to do so this is what we're aiming for so we've got a live feed going on here and as you can see it's very similar to the live feed that's going on on the binance site itself and you can see as the number goes down it will turn red if the number is going up it will turn green if it stays the same then i'm just turning it black so let's get started now you're going to need visual studio code so download and install visual studio code and i have just gone file open folder and i've created a folder called stop ticker and i've just opened that now the first thing we can do is create our index.html file and we can use emit here to scaffold that out so if i do html colon 5 then that will scaffold that out i'm going to call this stock ticker and i'm going to create a h1 header tag here and i'm going to give this an id of stock price and i'll just put some dashes in here so this is visible to start with and we will actually grab this element in code and overwrite these dashes here i'm going to create a script element and set its source to app.js now let's create our app.js so new file app.js so the first thing you want to do is set up our websocket so websockets are actually built into browsers nowadays so we can use it without having to import anything and i'm going to connect to the binance stream so this is that stream dot binance dot com colon nine four four three forward slash ws and i'm just interested in ethereum and it's euro price that it's trading at so i'll do an at trade and that is enough to set up the websocket and so every time a message arrives on that websocket we can handle it with the on message event so we subscribe to this on message event and i'm just going to create an arrow function and for the moment let's just console log out the data coming in so if i save that and then i've actually got quite a handy uh live server that is actually an extension uh that we can install so if you click on extensions and search for live server as you can see uh the top result is this live ser server created by richwick day and i've already got it installed but you'll want to click on the install button here and that will enable you to right click on any html files and open them with a web server so open with live server so that should open the web page automatically but if it doesn't go to 127.0.0.1 colon 55.00 and you should see your web page here and if we have a look at our console and i've actually got too many e's in there so let me just fix that uh error control s to save and if we have a look at our console you can see that we're getting all these messages coming back from the server so connecting to a websocket and getting live messages coming from the binance server is as simple as that now we want to pull out this p property here because that is uh the price so let's go back into our code and do that so the first thing we want to do is actually turn that json string that's coming back into an actual javascript object so we can do that with json.pass and then we pass it the json string that is coming back in our data property and then we should simply be able to do stock object dot p now and that should console log out our price so let's just double check that that works we'll save that come back here and as you can see now we're getting just the price being sent to our console right let's grab a reference to our stock price element so we can do document dot get element by id and we called it stock price if you remember if we go back here that's this element here called stock price and then now instead of console logging out we can do stock price element dot inner text is equal to stock object dot p let's save that see what that looks like and as you can see now we have our stock price updating in real time on our page now we can quickly format this to two decimal places by doing pass float because this stock objective dot p is actually a string so we first of all need to change this to a floating point number two fixed two like that and then we have our number to two decimal places now the last thing we want to do is actually change the color depending on whether the price is going up or down so we need to remember the last price so let's create a last price and we'll actually set it to null up here and set it to the actual price right at the bottom here and then right here we can do dot style dot color and if you haven't used this before you can simply do something like that and then if we go back you can see that we've set our color to red and you can do green that sets it to green so we need to set this color dependent on whether the current price is greater than the last price or less than the last price but the first thing we can actually check is whether last price is null or not so if the last price is null then we want it to be black otherwise we want to set it to either green or red and we also want it to be black if last price is equal to price i.e the price hasn't changed then we'll just set it to black so we've handled [Music] the initial case where it first goes in and last price is going to be null and that will be black and also when the price and the last price are the same that's also black so that's all handled here otherwise we want to check okay if the price is greater than the last price then we want it to be green otherwise we want it to be red and the other thing we want to do is actually set a price variable up here so let's do that and that is that there and then we can set that to price like so okay so i just forgot to put quotes around black there and that should be happier now so if we do a refresh so as it goes down or stays the same it's black if it goes up it should be green so it's going down it's red back so it's a little bit all over the place but uh but yeah that's about that's essentially it so remarkably quick to get going with websockets and a live feed from binance to your web page

Channel: Morgan Page

Views: 11,032

Keywords: binance api, real time crypto

Id: XXuUNZIQUVA

Length: 13min 30sec (810 seconds)

Published: Sat May 01 2021