opendht/tools/proxy_node.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>OpenDHT tester</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript">"use strict";
let onGet;
let onPut;
let setServer;
const valueGetElement = function(o) {
    const d = window.atob(o.data);
    return d;
};
$(function() {
    let request = undefined;
    let server;
    const getTools = $("#getTools");
    const getBtn = $("#getBtn");
    const getDropdown = $("#getDropdown");
    const listenBtn = $("#listenBtn").click(function(){onGet('LISTEN');});
    const setGetRequest = function() {
        getBtn.button('loading');
        getStopBtn.appendTo(getTools);
        getDropdown.hide();
    }
    const clearGetRequest = function() {
        if (request === undefined)
            return;
        request.abort();
        request = undefined;
        getStopBtn.detach();
        getDropdown.show();
        getBtn.button('reset');
    }
    const getStopBtn = $("#getStopBtn").detach().click(clearGetRequest);
    const putBtn = $("#putBtn");
    const result = $("#dhtResult");
    const group = $('<ul class="list-group"/>').appendTo(result);
    onGet = function (method) {
        if (request !== undefined)
            return false;
        const input = $("#getKey").val();
        group.empty();
        let lastAppended = 0;
        let start = new Date().getTime();
        request = new XMLHttpRequest();
        request.onreadystatechange = function(event) {
            if (this.readyState >= XMLHttpRequest.LOADING) {
                if (this.readyState == XMLHttpRequest.DONE) {
                    clearGetRequest();
                }
                if (this.status === 200) {
                    const elements = this.responseText.split("\n");
                    const elementsLength = elements.length;
                    const now = new Date().getTime();
                    for (let i = lastAppended; i < elementsLength; i++) {
                        const element = elements[i];
                        if (!element || element.length == 0)
                            return;
                        const o = JSON.parse(element);
                        const d = window.atob(o.data);
                        const delay = Math.max(0, start-now);
                        $('<li class="list-group-item"/>').append(valueGetElement(o)).appendTo(group).hide().delay(delay).slideDown(100);
                        lastAppended = i+1;
                        start = Math.max(start, now)+25;
                    }
                } else if (this.status !== 0) {
                    group.empty().append($('<li class="list-group-item list-group-item-danger"/>').text("Error loading content: " + this.statusText));
                }
            }
        };
        request.onerror = function(event) {
            clearGetRequest();
            group.empty().append($('<li class="list-group-item list-group-item-danger"/>').text("Error loading content."));
        };
        request.open(method, server + input, true);
        request.send(null);
        setGetRequest();
        return false;
    };

    onPut = function( ) {
        const key = $("#getKey").val();
        const value = $("#putValue").val();
        $.ajax({
            url: server + key,
            type: 'POST',
            data: JSON.stringify({
                data:window.btoa(value)
            }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function( result ) {
                putBtn.button('reset');
                //$('<li class="list-group-item list-group-item-success"/>').append(valueGetElement(result)).appendTo(group.empty());
            },
            error: function(result) {
                putBtn.button('reset');
                group.empty().append($('<li class="list-group-item list-group-item-danger"/>').text(result.statusText));
            }
        });
        putBtn.button('loading');
        return false;
    };

    const serverValue = $("#serverValue");
    const serverStatus = $("#serverStatus");
    const serverBtn = $("#serverBtn");
    setServer = function(event) {
        server = 'http://'+serverValue.val() + '/';
        serverStatus.empty();
        serverBtn.button('loading');
        $.getJSON(server, function(data){
            $('<span><b>Node</b> '+data.node_id+'</span>').appendTo(serverStatus).hide().fadeIn();
        }).fail(function(error) {
            serverStatus.html("<div class='alert alert-danger' style='margin-bottom: 0px;'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> Can't access node</div>");
        }).always(function(error) {
            serverBtn.button('reset');
        });
        return false;
    };
    setServer();
});
	</script>
</head>
<body>
    <div class="container" style="max-width: 730px;">
        <header class="page-header">
            <div class="row">
                <div class="col-sm-5">
                    <h1>OpenDHT tester</h1>
                </div>
                <div class="col-sm-7">
                    <div class="well well-sm" style="margin-top:10px; margin-bottom:0px;">
                        <form id="serverForm" class="form-inline" onsubmit="return setServer();" style="margin-bottom:4px;">
                            <div class="input-group">
                                <input type="text" class="form-control" id="serverValue" placeholder="Proxy server" value="127.0.0.1:8080"/>
                                <span class="input-group-btn">
                                    <button id="serverBtn" type="submit" class="btn btn-default" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
                                </span>
                            </div>
                        </form>
                        <div id="serverStatus"><i class='fa fa-circle-o-notch fa-spin'></i></div>
                    </div>
                </div>
            </div>
        </header>
        <div class="panel panel-default" id="dhtResult">
                <div class="panel-heading">
                    <div class="row">
                    <div class="col-xs-6">
                        <form class="form-inline" onsubmit="return onGet('GET');">
                            <div class="input-group">
                                <input type="text" class="form-control" id="getKey" placeholder="Key" aria-label="Key" />
                                <span class="input-group-btn" id="getTools">
                                    <button id="getBtn" class="btn btn-default" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>" type="submit">Get</button>
                                    <button id="getDropdown"type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                    <ul class="dropdown-menu">
                                        <li><a id="listenBtn" href="#">Listen</a></li>
                                    </ul>
                                    <button id="getStopBtn" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                    <div class="col-xs-6">
                        <form class="form-inline" onsubmit="return onPut();">
                            <div class="input-group">
                                <input type="text" class="form-control input-group-input" id="putValue" placeholder="Value" />
                                <span class="input-group-btn">
                                    <button id="putBtn" type="submit" class="btn btn-default" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Loading">Put</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>