Alien Arena server list WebSocket

My API

List and filter Alien Arena game servers or get currently occupied servers using my WebSocket API.

In this example I'll use HTML+JS.

Check out the demo.

alien-arena-servers-websocket

Let's start with a simple HTML

<input id="get-all-occupied" type="button" value="Get occupied servers">
<input id="get-all-bbm" type="button" value="Get AADevTeam servers">
<input id="get-all" type="button" value="Get all servers">
<input id="get-all-word" type="button" value="Seach &quot;GamePlayer&quot;">
<pre><code id="code" class="language-json"></code></pre>

Then the JS

function FpsWS(gameName) {
    this.gameName = gameName;
    this.url = 'wss://api.bery.dev/ws/fps/' + this.gameName + '/';
    this.init();
}

FpsWS.prototype = {
    client: null,

    init: function() {
        this.connect();
        this.bindButtons();
    },

    connect: function() {
        this.client = new WebSocket(this.url);

        let codeWrapper = document.querySelector('#code');

        this.client.onmessage = function(e) {
            const data = JSON.parse(e.data);
            console.log('Received')
            console.log(data)
            codeWrapper.innerHTML = JSON.stringify(data, null, 4);
            hljs.highlightElement(codeWrapper);
        };

        let SELF = this;

        this.client.onclose = function(e) {
            console.error('Socket closed unexpectedly');
            SELF.client = null;
            console.log('Reconnecting...')
            SELF.reconnect();
        };
    },

    reconnect: function() {
        let SELF = this;
        setTimeout(function() {SELF.connect();}, 1000);
    },

    bindButtons: function() {
        let SELF = this;
        document.querySelector('#get-all-occupied').onclick = function(e) {
            if(SELF.client) {
                SELF.client.send(JSON.stringify({'occupied': true}));
            } else {
                console.error('Not connected to the server');
            }
        };
        document.querySelector('#get-all-bbm').onclick = function(e) {
            if(SELF.client) {
                SELF.client.send(JSON.stringify({'info': true, 'filter': {'ip': '37.97.157.237'}}));
                // filter can contain:
                // {
                //     "ip": list|string  // "{ip}:{port}" for particular server; "{ip}" returns all servers from the ip; or list of those
                //     "available": bool,  // true = available, false = unavailable, missing key = all
                //     "occupied": bool,  // true = has human players, false = empty or bots only, missing key = all
                //     "word": "big bad"  // case insensitive; searches in: hostname (text/original), Admin, website and mapname
                // }
            } else {
                console.error('Not connected to the server');
            }
        };
        document.querySelector('#get-all').onclick = function(e) {
            if(SELF.client) {
                SELF.client.send(JSON.stringify({'info': true}));
            } else {
                console.error('Not connected to the server');
            }
        };
        document.querySelector('#get-all-word').onclick = function(e) {
            if(SELF.client) {
                SELF.client.send(JSON.stringify({'info': true, 'filter': {'word': 'GamePlayer'}}));
            } else {
                console.error('Not connected to the server');
            }
        };
    }
}

new FpsWS('alienarena');