Configuration Résolu Monitoring de serveurs minecraft

Alex Fatta

Alex Fatta

Commandant de la Flotte et de la Horde
13 Août 2014
1 389
1
191
187
Bonjour !

J'ai crée aujourd'hui un topic concernant les ping de serveurs minecraft et mon problème à été résolu.
Cependant, @Detobel36, j'ai essayé ce que tu m'a donné mais je suis face à un problème que je n'arrive pas à résoudre. J'ai bien insérer le code dans la page HTML et ca marche bien. Seulement quand je copie colle la partie du code pour faire un autre élément de monitoring, le premier code fonctionne mais pas le deuxième et ainsi de suite :
MCFR - Monitoring.jpg

Voici le code :
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>

<body>
<script src="https://mcapi.us/scripts/minecraft.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

<table border="1" width="100%" align="center">
<tr>
    <td align="center">
        <h3>Lobby</h3>
            <div class="server-status">
              Statut: <span class="server-online"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer"></span>/<span class="server-nbrPlayerMax"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 1},
                function(data) {
                    document.querySelector('.server-online').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax').innerHTML = data.players.max;
                }
            );
            </script>
    </td>
    <td align="center">
        <h3>BungeeCord / Proxy</h3>
            <div class="server-status">
              Statut: <span class="server-online"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer"></span>/<span class="server-nbrPlayerMax"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 25577},
                function(data) {
                    document.querySelector('.server-online').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax').innerHTML = data.players.max;
                }
            );
            </script>
    </td>
</tr>   
<tr>
        <td align="center">
        <h3>CTF</h3>
            <div class="server-status">
              Statut: <span class="server-online"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer"></span>/<span class="server-nbrPlayerMax"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 2},
                function(data) {
                    document.querySelector('.server-online').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax').innerHTML = data.players.max;
                }
            );
            </script>
    </td>
    <td align="center">Cellule 4</td>
</tr>
<tr>
    <td align="center">Cellule 5</td>
    <td align="center">Cellule 6</td>
</tr>
</table>
</body>
</html>

Également, je cherche juste à savoir comment remplir une des cases en vert ou en rouge si le ou les serveurs en questions sont down. Je ne parviens pas à trouver comment remplir la case et encore moins comment détecter l'état du serveur.

En espérant que vous pourrez m'aider,

AlexFatta

Source du code : https://minecraft.fr/forum/threads/statut-serveur-minecraft-html.176437/#post-1497469
 
Ton problème est tout simple, regardes le nom de tes classes.
En gros, tu appelles une première fois l'API mcapi, tu traites la réponse dans un span classé "server-online".
Pour le serveur d'en dessous, tu rappelles l'API, puis tu re-traites la réponse dans le même span, donc c'est normal que cela bug ^^

Pour corriger le problème: à chaque serveur, ajoutes un suffixe à tes classes (-lobby dans cet example).

HTML: 
    <td align="center">
        <h3>Lobby</h3>
            <div class="server-status">
              Statut: <span class="server-online-lobby"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer-lobby"></span>/<span class="server-nbrPlayerMax-lobby"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 1},
                function(data) {
                    document.querySelector('.server-online-lobby').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer-lobby').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-lobby').innerHTML = data.players.max;
                }
            );
            </script>
    </td>


Pour tes couleurs (vert ou rouge), cela va se passer au niveau de jQuery.
 
lebabadu35 a dit:
Ton problème est tout simple, regardes le nom de tes classes.
En gros, tu appelles une première fois l'API mcapi, tu traites la réponse dans un span classé "server-online".
Pour le serveur d'en dessous, tu rappelles l'API, puis tu re-traites la réponse dans le même span, donc c'est normal que cela bug ^^

Pour corriger le problème: à chaque serveur, ajoutes un suffixe à tes classes (-lobby dans cet example).

HTML: 
    <td align="center">
        <h3>Lobby</h3>
            <div class="server-status">
              Statut: <span class="server-online-lobby"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer-lobby"></span>/<span class="server-nbrPlayerMax-lobby"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 1},
                function(data) {
                    document.querySelector('.server-online-lobby').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer-lobby').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-lobby').innerHTML = data.players.max;
                }
            );
            </script>
    </td>


Pour tes couleurs (vert ou rouge), cela va se passer au niveau de jQuery.
Cliquez pour agrandir...
Ah ca fonctionne merci ! :D

Mais j'ai pas trouvé comment mettre la case en rouge ou en verte si le serveur est ou non allumé. Je vois pas ce qu'il faut tester en fait :/ Tu aurai une idée ?

AlexFatta

EDIT :

Je me suis penché sur ceci :
HTML: 
function(data) {
                    document.querySelector('.server-online-kitpvp').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer-kitpvp').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-kitpvp').innerHTML = data.players.max;
                    for(var server-online-kitpvp='Allumé'){
                        document.getElementById
                    }
                }

Ou encore :
HTML: 
function(data) {
                    document.querySelector('.server-online-kitpvp').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    document.querySelector('.server-nbrPlayer-kitpvp').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-kitpvp').innerHTML = data.players.max;
                    if(data.online == 'Allumé'){
                        document.getElementById(data.online).style.backgroundColor = 'green';
                    }
                }

Mais cela ne fonctionne je m'en doutais. Mais est-ce quelque chose dans le genre qu'il faut effectuer ?
 
Dernière édition:
C'est bien quelque chose comme dela, mais tu ne connais pas le javascript...
Data.online ? 'Allume' : 'eteint';
Signifie en gro:
Si data.online vaut 1, on affiche allumé, sinon on affiche eteint.

Je pourrai te donner la sollution, mais je trouve bien plus interessant de chercher par soi meme donc cherches un peu, et si vraiment tu coinces jte donnerai la sollution
 
Ca en devient épuisant x)

Voici tout mon code HTML :
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="10" />
<title>Document sans nom</title>
<style type="text/css">
@import url("css/multiColumnTemplate.css");
</style>
</head>

<body>
<script src="https://mcapi.us/scripts/minecraft.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

<table border="1" width="100%" align="center">
<tr>
    <td align="center" class="coul">
        <h3>Lobby</h3>
            <div class="server-status">
              Statut: <span class="server-online-lobby"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 1},
                function(data) {
                    document.querySelector('.server-online-lobby').innerHTML = data.online ? 'Allumé' : 'Eteint';
                }
            );
            </script>
    </td>
    <td align="center" class="coul">
        <h3>Proxy</h3>
            <div class="server-status">
              Statut: <span class="server-online"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 25565},
                function(data) {
                    document.querySelector('.server-online').innerHTML = data.online ? 'Allumé' : 'Eteint';
                }
            );
            </script>
    </td>
</tr>  
<tr>
        <td align="center" class="coul">
        <h3>CTF</h3>
            <div class="server-status">
              Statut: <span class="server-online-ctf"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 2},
                function(data) {
                    document.querySelector('.server-online-ctf').innerHTML = data.online ? 'Allumé' : 'Eteint';
                }
            );
            </script>
    </td>
    <td align="center" class="coul">
        <h3>Créatif</h3>
            <div class="server-status">
              Statut: <span class="server-online-creatif"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 4},
                function(data) {
                    document.querySelector('.server-online-creatif').innerHTML = data.online ? 'Allumé' : 'Eteint';
                }
            );
            </script>
    </td>
</tr>
<tr>
    <td align="center" class="coul">
        <h3>KitPvP</h3>
            <div class="server-status">
              Statut: <span class="server-online-kitpvp"></span><br />
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 7},
                function(data) {
                    document.querySelector('.server-online-kitpvp').innerHTML = data.online ? 'Allumé' : 'Eteint';
                    if(data.online=='Allumé'){
                        document.getElementById.style.backgroundColor = 'green';
                    }
                }
            );
            </script>
    </td>
    <td align="center" class="coul">
        <h3>Quakecraft</h3>
            <div class="server-status">
              Statut: <span class="server-online-quake"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 7},
                function(data) {
                    document.querySelector('.server-online-quake').innerHTML = data.online ? 'Allumé' : 'Eteint';
                );
            </script>
    </td>
</tr>
</table>
<hr />
<p align="center" style="color: green"><u>Mise à jour automatique toutes les 10 secondes !</u></p>


<script type="text/javascript">
    (function($) {
        $("tr.coul").each(function() {
            // get text into variable
            var colText = $.trim($(this).text());
            // need to create an action
            if (data.online = 0) {
                // peint en rouge
                $(this).addClass("bgrouge");
            } else if (data.online = 1){
                // peint en gris
                $(this).addClass("bgvert");
            }
            //alert($(this).text());
        });
    })(jQuery);
    </script>
    </body>
</html>

Le CSS associé :
HTML: 
@charset "utf-8";
/* CSS Document */
.bgrouge {background-color: #dd4b39}
.bgvert {background-color: #00a65a}

Et le site sur lequel j'ai trouvé ce que j'ai tenté et qui a lamentablement échoué x) :
https://openclassrooms.com/forum/sujet/changer-la-couleur-de-fond-d-une-cellule-avec-text

Autrement dit ca marche pas xD J'ai essayé avec data.online = 'Allumé'; et avec data.online = 1 ou ==1; dans tous les cas ca marche pas x)

Je sèche :(

AlexFatta

EDIT : La seule fois où j'ai touché du JavaScript c'était pour modifier un DoodleJump x) Donc non le JavaScript c'est pas trop mon bain ^^
 
Dernière édition:
Ok, au moins tu as eu le merite de chercher

Je ne peut pas terter ma reponse vu que je suis sur telephonne, donc je ne peut pas te dire si elle marche ou non, mais j'aurai tenté avec un code le plus simple possible, comme cela:


HTML: 
    <td align="center">
        <h3>Lobby</h3>
            <div class="server-status">
              Statut: <span class="server-online-lobby"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer-lobby"></span>/<span class="server-nbrPlayerMax-lobby"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 1},
                function(data) {
                    document.querySelector('.server-online-lobby').innerHTML = data.online ? 'Allumé' : 'Eteint';

If(data.online)
{
$.("#id_de_la_div").AddClass('bgvert');
}else{ 
$.("#id_de_la_div").AddClass('bgrouge');
}

                    document.querySelector('.server-nbrPlayer-lobby').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-lobby').innerHTML = data.players.max;
                }
            );
            </script>
    </td>

Bien entendu, pour que cette méthode marche, il te faut implémenter jQuery avant d'appeler ces fonctions (dans le <head> de ta page par exemple.)
 
Rebonjour !

Merci de ta réponse ! :D

J'ai mit ceci pour implémenter JQuery :
HTML: 
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
dans mon head. (Ca vient du site de JQuery) : https://code.jquery.com/

J'ai essayé ça aussi :
Code: 
<script src="http://code.jquery.com/jquery.js"></script>
Ca ne fonctionne pas :/


Tu as mis "id_de_la_div" mais j'ai pas de div, j'utilise le tr et le td pour faire les tableaux. J'ai essayé ceci :
HTML: 
<script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "149.202.251.147", port : 1},
                function(data) {
                    document.querySelector('.server-online-lobby').innerHTML = data.online ? 'Allumé' : 'Eteint';

                    if(data.online){
                        $.(this).addClass('bgvert');
                    }else {
                        $.(this).addClass('bgrouge');
                    }

                    document.querySelector('.server-nbrPlayer-lobby').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-lobby').innerHTML = data.players.max;
                }
            );
            </script>

Mais ca ne fonctionne pas non plus.

Après avoir ajouté on code, je n'ai plus que ceci dans ma case :
Code: 
Statut:
Nombre de joueur: /

Voilà j'ai fais le tour. J'ai cherché sur le site d'OpenClassRoom comment implémenter JQuery, c'est de là que je tient les premiers liens. Voilà si tu as des idées je suis vraiment tout à fait preneur (en espérant qu'un jour je pourrais t'aider comme tu m'aide ^^), toutes propositions est bonne à entendre, j'attends vos avis, :)

AlexFatta
 
Ok, une fois arrivé chez moi, j'ai testé, fait quelques petits testes, et je te donne le code qui fonctionne (chez moi en tout cas :) essayes de décortiquer le code, afin de le comprendre ;) )
HTML: 
 <td align="center" id="lobby">
        <h3>Lobby</h3>
            <div class="server-status">
              Statut: <span class="server-online-lobby"></span><br />
              Nombre de joueur: <span class="server-nbrPlayer-lobby"></span>/<span class="server-nbrPlayerMax-lobby"></span>
            </div>
            <script>
            $.get(
                "https://mcapi.us/server/status",
                {ip: "adresse ip de ton serveur lobby", port : "port de ton serveur lobby"},
                function(data) {
                    document.querySelector('.server-online-lobby').innerHTML = data.online ? 'Allumé' : 'Eteint';

                    if(data.online == true)
                    {
                        $('#lobby').addClass('bgvert');
                    }else{
                        $('#lobby').addClass('bgrouge');
                    }

                    document.querySelector('.server-nbrPlayer-lobby').innerHTML = data.players.now;
                    document.querySelector('.server-nbrPlayerMax-lobby').innerHTML = data.players.max;
                }
            );
            </script>
    </td>

Je rajoute aussi que, lorsqu'un serveur est offline, un petit délai (environ 2 secondes chez moi est nécessaire avant l'affichage des donénes ;) )
 
  • J'aime
Reactions: Alex Fatta
Aaaah ca fait plaisir ! Ca fonctionne ! Tu as ajouté le id="lobby" pour le définir. J'y avais pas pensé ! Et bien écoute merci beaucoup :D Ca marche tout bien ! Je rajouterai de la déco quand même mais la partie code est fonctionnelle ! Merci bien ! :D

Topic résolu :D

AlexFatta
 
  • J'aime
Reactions: lebabadu35
Vous devez vous connecter ou créer un compte pour répondre.

Sujets similaires

Kenda
Résolu Developpement d'un mod intégré aux serveurs
Réponses
4
Vues
550
Support serveur et plugins
ShE3py
ShE3py
C
Résolu Bungeecord - Téléportation entre serveurs
Réponses
1
Vues
1K
Support serveur et plugins
Detobel36
Detobel36
A
erreur descripteur non valide sur tout les serveurs que je crée
Réponses
5
Vues
4K
Support serveur et plugins
robin4002
robin4002
B
problème de connection a des serveurs
Réponses
2
Vues
803
Support serveur et plugins
Boudinosaure
B
C
  • Poll Poll
BUG MAJEUR CONCERNANT LES COMPTE MICROSOFT ET LES SERVEURS (sauf sous luancher)
Réponses
4
Vues
778
Support serveur et plugins
robin4002
robin4002
Haut Bas