Author Topic: Displaying Points on my Homepage  (Read 5401 times)

0 Members and 1 Guest are viewing this topic.

Excurze_NoExit

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Excurze_NoExit
Displaying Points on my Homepage
« on: January 11, 2016, 05:35:10 AM »
Hey Guys,

Im a absolute noob with Php and all that stuff, but I want to integrate my Points on a Homepage so everybody can check their Points there.
Can someone please explain to me how that works, Step by Step. I know there is a websocket API. But I have no clue how to do such Stuff.

Thank you guys,
Excurze.

Excurze_NoExit

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Excurze_NoExit
Re: Displaying Points on my Homepage
« Reply #1 on: January 15, 2016, 01:15:15 AM »
-push- pls help

emrerocky

  • Advisor
  • Councilor
  • **
  • Posts: 1240
  • Karma: +163/-8
    • View Profile
    • emrerocky's Website
  • Twitch Name: emrerocky
Re: Displaying Points on my Homepage
« Reply #2 on: January 15, 2016, 02:37:53 AM »
You can use the DeepBot API to make this.  You can see info here: http://deepbot.deep.sg/wiki/DeepBot+API

Excurze_NoExit

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Excurze_NoExit
Re: Displaying Points on my Homepage
« Reply #3 on: January 16, 2016, 01:51:59 AM »
Well, I appreciate ur Help. But did u read my first Post? ...

Dante557

  • Advisor
  • Councilor
  • **
  • Posts: 555
  • Karma: +26/-0
  • Sometimes Helpful, Sometimes Not :D
    • View Profile
    • My Twitch Page
  • Twitch Name: Dante557
Re: Displaying Points on my Homepage
« Reply #4 on: January 16, 2016, 11:59:03 AM »
(This is from my experience of messing around with attempting to get it working today)

You're probably going to want to know how to use Javascript, specifically AJAX and Websocket event handling, if you want to be able to upload the data you pull from the API. Also you'll need to know how to deal with .JSON responses (Which is what the API will return with).

Deepbot itself acts as the websocket server so you won't need to worry about setting up a websocket server yourself although it would probably be good practice to do so in the learning process because it is an interesting technology. I am only going to show you how to actually pull data from the server and show it in an alert. What you do from there is up to you but these steps should at least get you started

Step 1) Find your API key

To stop random people from being able to access your bot's info there is an API key which is unique to you available so only you can access this, essentially, local API. You can find this by going to
Code: [Select]
Config tab -> Master Settings -> Scroll down to where it says API SecretCopy this key for later

Step 2) Open the WebSocket connection

Assuming you've made your HTML page (Doesn't have to be fancy, just something basic) and that you have kept deepbot open you'll now need to open the websocket connection. To do this is actually pretty simple due to the WebSocket API being included in the HTML5 specification (Which included Javascript I believe). The Deepbot websocket server runs on port 3337 on your localhost (or 127.0.0.1 if localhost doesn't work). A typical websocket connection begins with ws:// and the full format usually goes
Code: [Select]
ws://host:port/Knowing this, the following javascript code will allow you to open the websocket connection
Code: [Select]
var ws = new WebSocket('ws://localhost:3337');
Now that you have the variable set up it's time to deal with the incoming responses. The events we're interested in are the onopen and onmessage events. Listening for these is actually pretty easy. The following Javascript code will allow you to deal with these events

Code: [Select]
ws.onopen = function() {
//Code Will Go Here
};
ws.onmessage = function(e) {
//code will go here
};

Step 3) Allow API Access

Still have that API Secret from step 1? You're going to need it here. WebSockets are bi-direction meaning they can send data both ways. We have a function available to us that allows us to send data to the server simply called send. Once this data is sent it will then (when it pulls the data we need) fire the onmessage event (Which in this example we are just going to fire a browser alert containing the information).

In the Deepbot API you will notice the bits in bold. This is the data that you will send when you fit it to your needs. Some are simple and others have multiple parameters you can change. Give it a read to try and wrap your head around it. Anyway, we can only send data when we know that the websocket is open, otherwise your browser will throw an error. Place the following in the onopen function that you coded in step 2 replacing the last bit with the key you copied earlier.

Code: [Select]
ws.send('api|register|YOURSECRETKEYFROMSTEP1');
Now that we've done that, we need to deal with the message that gets returned. Usually you would put this into a variable and deal with it accordingly but for this example will simply just make an alert appear with the data sent back to us. To do alerts in javascript simply do the following;

Code: [Select]
alert(e.data);
Step 4) See it working

Save the page you've created and run it on a web browser that supports websockets. I used Chrome but any modern browsers should support the standard. Once you've opened it hopefully very soon you should see a popup containing the following

Code: [Select]
{
    "function": "register",
    "param": "register",
    "msg": "success"
}

If you see this, congratulations. You successfully connected to your Deepbot Websocket API and can now do other stuff detailed at https://github.com/DeepBot-API/client-websocket. You will need to ensure that the first message you always send is the data in Step 3) as this sets up future calls that you will make to the server.


Hopefully that should have given a slight insight to get you started on your way. Here is an extremely useful link to learn about WebSockets
http://www.tutorialspoint.com/html5/html5_websocket.htm

Oh, and here's the HTML/Javascript in full in case you just want to try it out yourself

Code: [Select]
<html>
<head>
</head>
<body>
<script>
var ws = new WebSocket('ws://localhost:3337/');
ws.onopen = function() {
ws.send('api|register|YOURSECRETKEYFROMSTEP1');
};

ws.onmessage = function(e) {
alert(e.data);
};
</script>
</body>
</html>

Note: This was actually a learning process for me as I hadn't actually dealt with WebSockets before. Even if you don't find this useful it was an excellent exercise for me to see how easy it actually is when you get your head around it.
« Last Edit: April 26, 2017, 10:55:27 AM by Dante557 »
If you need to get through to me you can try to contact me on Twitter @ http://www.twitter.com/dante556

DanSizn

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: DanSizn
Re: Displaying Points on my Homepage
« Reply #5 on: April 23, 2017, 04:45:36 PM »
I copied the bottom html script but I dont see anything.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Displaying Points on my Homepage
« Reply #6 on: April 24, 2017, 12:35:45 AM »
I copied the bottom html script but I dont see anything.

Put in your API secret where it says? Made sure the port is forwarded as needed?
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

DanSizn

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: DanSizn
Re: Displaying Points on my Homepage
« Reply #7 on: April 24, 2017, 12:11:46 PM »
I have the port opened and I am not doing this on a webhost just my local computer and still get a blank screen.. Oh well I guess it might not work.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Displaying Points on my Homepage
« Reply #8 on: April 24, 2017, 11:48:40 PM »
I have the port opened and I am not doing this on a webhost just my local computer and still get a blank screen.. Oh well I guess it might not work.

You put your Deepbot API Secret in there?
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

DanSizn

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: DanSizn
Re: Displaying Points on my Homepage
« Reply #9 on: April 25, 2017, 09:38:53 AM »
Yes I have

Dante557

  • Advisor
  • Councilor
  • **
  • Posts: 555
  • Karma: +26/-0
  • Sometimes Helpful, Sometimes Not :D
    • View Profile
    • My Twitch Page
  • Twitch Name: Dante557
Re: Displaying Points on my Homepage
« Reply #10 on: April 26, 2017, 10:25:00 AM »
My bad... I put websocket instead of ws. The correct code is as follows

Code: [Select]
<html>
<head>
</head>
<body>
<script>
var ws = new WebSocket('ws://localhost:3337/');
ws.onopen = function() {
ws.send('api|register|YOURSECRETKEYFROMSTEP1');
};

ws.onmessage = function(e) {
alert(e.data);
};
</script>
</body>
</html>
« Last Edit: April 26, 2017, 10:54:45 AM by Dante557 »
If you need to get through to me you can try to contact me on Twitter @ http://www.twitter.com/dante556

DanSizn

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: DanSizn
Re: Displaying Points on my Homepage
« Reply #11 on: April 27, 2017, 01:38:28 PM »
Alright so it connected so now I am trying the information from the github..  If i run into a problem I will ask another question if that is ok.

DanSizn

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: DanSizn
Re: Displaying Points on my Homepage
« Reply #12 on: June 01, 2017, 01:38:17 PM »
Ok, I am able to connect and all but when looking at the github I cant seem to figure out how to get my top 10 leader board like, https://www.alixe.pro/leaderboard