1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Steam API XML parse into css?

Discussion in 'Programming & Webmastering' started by Solaris17, Aug 25, 2014.

  1. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    Code:
    <ul><li class="offline">27015</li></ul>
     
  2. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    Is the server offline? If it isn't, I suspect it is because $response can't be accessed from inside of the function IndexOfServer(). The solution for this is to either add global in front of $response so that it does or hand off $response['servers'] as an argument of the function. I'll work on the latter...


    Edit: Made the changes to post #23.
     
    Crunching for Team TPU
  3. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    yes the server is online currently why do you think it could not access it some misconfiguration?
     
  4. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    Solaris17 says thanks.
    Crunching for Team TPU
  5. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    this instance now shows only the port and secured status line.

    Code:
    <ul><li class="online">27015 Secured</li></ul>
     
  6. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    In the HTML head, add CSS for defining the online and offline classes. Example:
    HTML:
    <style>
    	.offline { color: #800000; } /* Dark Red */
    	.online { color: #008000; } /* Dark Green */
    </style>
     
    Last edited: Aug 26, 2014
    Solaris17 says thanks.
    Crunching for Team TPU
  7. ste2425

    ste2425

    Joined:
    May 27, 2008
    Messages:
    3,424 (1.49/day)
    Thanks Received:
    378
    Location:
    Huddersfield, uk
    I got bored so thought id throw together another implementation, angularjs and nodejs (I love the node :) ) and bootstrap. I tried just hitting the steam API just from client angular but got cross-origin access errors. So just put a simple route in the node server that hits it for me and returns it.

    Package.json

    Code:
    {
      "name": "servers",
      "version": "0.0.1",
      "dependencies": {
        "body-parser": "1.0.0",
        "express": "4.2.0",
        "jade": "1.3.0"
      }
    }
    
    App.js (Node server)

    Code:
    var express = require('express'),
        app = express(),
        http = require('http'),
        bp = require('body-parser');
    
    app.use(bp.json());
    app.use(bp.urlencoded());
    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');
    
    app.get('/', function(req, res) {
        res.render('index');
    });
    
    app.get('/servers', function(req, res) {
        http.get('http://api.steampowered.com/ISteamApps/GetServersAtAddress/v0001?addr=71.180.229.246', function(response) {
            var body = '';
    
            response.on('data', function(chunk) {
                body += chunk;
            });
    
            response.on('end', function() {
                try {
                    body = JSON.parse(body);
                    res.send(body.response.servers.length > 0 ? body.response.servers : []);
                } catch (e) {
                    res.send([]);
                }
            });
        }).on('error', function(e) {
            res.send([]);
        });
    });
    
    app.set('port', process.env.PORT || 3001);
    
    var server = app.listen(app.get('port'), function() {
        console.log('Express server listening on port ' + server.address().port);
    });
    and index.jade

    Code:
    doctype html
    html
        head
            meta(charset='utf-8')
            meta(http-equiv='X-UA-Compatible', content='IE=edge')
    
            title Server List
            meta(name='viewport', content='width=device-width, initial-scale=1')
    
            style.
                @import url('http://getbootstrap.com/dist/css/bootstrap.css');
            script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js").
            script.
                var myApp = angular.module('myApp', []);
                myApp.controller('controller', function($scope, $http, $interval){
                    $scope.servers = [];
    
                    $scope.getServers = function(){
                        $http({
                            method: 'GET',
                            url: '/servers'
                        }).success(function(data, status, headers, config) {
                            $scope.servers = data;
                        }).error(function(){
                            $scope.servers = [];
                        });
                    }
    
                    $scope.getServers();
                    $interval($scope.getServers, 5000);
                });
    
        body(ng-app='myApp')
            .container
                h2 Servers
                div(ng-controller="controller")
                    table.table
                        thead
                            tr
                                th Address
                                th GMS Index
                                th App Id
                                th Game Dir
                                th Region
                                th Secure
                                th Lan
                                th Gameport
                                th Specport
                        tbody
                            tr(ng-repeat="server in servers")
                                td {{server.addr}}
                                td {{server.gmsindex}}
                                td {{server.appid}}
                                td {{server.gamedir}}
                                td {{server.region}}
                                td {{server.secure}}
                                td {{server.lan}}
                                td {{server.gameport}}
                                td {{server.specport}}
                            tr(ng-show="servers.length == 0")
                                td No servers to display
    
    
    Obviously I wouldn't Use in-line JavaScript like this but couldn't be bothered setting up a public directory in node to server the files, then including them.

    It will poll the server every 5 seconds updating the UI. If there's an error anywhere along the chain the server will respond with an empty array. You could use socket.io to have the server push out to all connected clients every 5 seconds rather than every client poll the server.

    You could even cache the response from steam and poll steam independently to the clients polling your server, then you wont hit steam every time clients hit you if you had multiple clients, may speed up the clients request slightly.

    and finished product

    [​IMG]
     
    Last edited: Aug 26, 2014
    Solaris17 and Aquinus say thanks.
  8. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    I am simply doing this in <?php
    ?> is that not correct do I have to call the file via html?
     
  9. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    That goes inside the head tags of the HTML. You know:
    HTML:
    <html>
      <head>
        <title></title>
        <style>
          .offline { color: #800000; } /* Dark Red */
          .online { color: #008000; } /* Dark Green */
        </style>
      </head>
      <body>
      </body>
    </html>
    It can also go in an external CSS.

    If PHP files are display any data, it should always be wrapped in HTML so it is compliant with HTML specification. That way the browser knows for sure what to do with it. The PHP I gave you should be entirely inside the <body> elements.
     
    Crunching for Team TPU
  10. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    no I mean I am coding this as .php did you want me to impliment this into a .html that calls the php status page?

    Or am I just not thinking right? (I have a cold)

    oh wow nvm im stupid the issue is even within the <body> and not including the colors in <style> it still only echos the port with its secure status like above.

    the source looks like

    Code:
    
    <html>
      <head>
        <title></title>
        <style>
          .offline { color: #800000; } /* Dark Red */
          .online { color: #008000; } /* Dark Green */
        </style>
      </head>
      <body>
    <ul><li class="online">27015 Secured</li></ul>  </body>
    </html>
    am I still not formatting this correctly? Please forgive me if I missed it its been hard for me to focus the past few days,.
     
    Last edited: Aug 27, 2014
  11. Aquinus

    Aquinus Resident Wat-man

    Joined:
    Jan 28, 2012
    Messages:
    6,268 (6.50/day)
    Thanks Received:
    2,080
    Location:
    Concord, NH
    Just for clarification purposes, if you have a the
    Code:
    <?php 
    tag open, you do not need to close it if your file is strictly a script and not HTML with embedded PHP. This is commonly done to ensure that a script does not output any white-space at the end of the file as that can cause the web server to send headers before the application is ready. This is something you'll encounter in Moodle source code.
     
    Solaris17 says thanks.
  12. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    I put that in an HTML file and it looks right to me. The text is green:
    [​IMG]

    You can decorate it however you like. All the information is being collected and is available.
     
    Crunching for Team TPU
  13. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    but nothing else is supposed to output?
     
  14. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    Not according to the PHP. What else do you want output?
     
    Crunching for Team TPU
  15. Solaris17

    Solaris17 Creator Solaris Utility DVD

    Joined:
    Aug 16, 2005
    Messages:
    17,204 (5.18/day)
    Thanks Received:
    3,558
    Location:
    Florida
    This is my fault iv been lost for almost the entire conversation I thought this version was simply a diffirent way to display the original

    Online:

    Server:

    Port:

    Secure:

    with color.
     
  16. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,557 (6.26/day)
    Thanks Received:
    3,494
    Location:
    IA, USA
    Except for the IP, the code you have is already doing all of that. If you want the IP, just change the echo 'gameport' to 'addr'.

    Can you write the HTML exactly how you want it?
     
    Crunching for Team TPU

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page