Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
</script>
<div class="inner_content_container">
    <div class="inner_content_header">
        <h3>Web Logger</h3>
    </div>
    <div class="inner_content_wrapper">
        <div class="form_container">
         <?= $this->connectform?>
          Order By : <input type="radio" name="ordering" value="time" onchange="changeOrdering()" checked>Time <input
                type="radio" name="ordering" value="event" onchange="changeOrdering()">Event
        </div>
    </div>
    <div class="form_container">
        <div id="log_time">Waiting for Connection ...</div>
        <div id="log_event">Waiting for Connection ...</div>
        <div id="options">
            <div>
                Current Subscription are :
                <div id=current_subscription>None</div>
            </div>
                 <?= $this->eventform?>
​
                <script type="text/javascript">
                    $(function () {
                           $("select#multiSelectLog").attr("size",$("#multiSelectLog option").length);
                        });
                </script>
        </div>
​
    </div>
</div>
</div>
 
function checkWebsocketSupported() {
    if ('WebSocket' in window) {
        /* WebSocket is supported. You can proceed with your code */
    } else {
        /*
         * WebSockets are not supported. Try a fallback method like long-polling
         * etc
         */
        return alert("Websocket not supported by the browser");
    }
}
​
$("#weblogger_connect_form").submit(function(e) {
    //e.preventDefault();
​
    /* Take value for ip address and port Number and check validity */
    var serverAddress = document.getElementById("serv_addr").value;
    var portNo = document.getElementById("port_no").value;
    if (!ValidateIPaddress(serverAddress)) {
        return alert("You have entered an invalid IP address!");
    }
    if (isNaN(portNo)) {
        return alert("You have entered an invalid Port Number!");
    }
    $("#log_time").append('<div id="connection">' + new Date().getTime() + " Trying to Connect to " + serverAddress + ":" + portNo+'</div>');
    $("#log_event").append('<div id="connection">' + new Date().getTime() + " Trying to Connect to " + serverAddress + ":" + portNo+'</div>');
    /* Connect to websocket server */
    var connection = new WebSocket("ws://" + serverAddress + ":" + portNo , ['antheus-protocol']);
    /* If connection accepted this will happen */
    connection.onopen = function() {
        $("#log").append('<div id="connection">' + new Date().getTime() + " Connection Open ...</div>");
        console.log("Connection open!");
        document.getElementById("serv_addr").disabled = true;
        document.getElementById("port_no").disabled = true;
        document.getElementById("btnConnect").style.display = "none";
        document.getElementById("btnDisconnect").style.display = "inline";
        $(function(){
              $(".enableWhenConnect").attr("disabled", false);
            });
    };
    /* If connection refused or close by any other way */
    connection.onclose = function() {
        $("#log").append('<div id="connection">' + new Date().getTime() + " Connection Closed ...</div>");
        console.log("Connection closed");
        document.getElementById("serv_addr").disabled = false;
        document.getElementById("port_no").disabled = false;
        document.getElementById("btnConnect").style.display = "inline";
        document.getElementById("btnDisconnect").style.display = "none";
    };
    /* Error handling */
    connection.onerror = function(error) {
        console.log("Error detected: " + error);
    };
    /* Message from server */
    var server_message_object = new Array();
    connection.onmessage = function(e) {
        var server_message = e.data;
        var server_message_array = server_message.split("\n");
        var message_length = server_message_array.length;
        console.log(message_length);
​
        if(message_length <=4){
            console.log("message discarded");
            }
        else{
            for(var i=1; i < (message_length-1);i++){
            var temp_array = server_message_array[i].split(":");
            server_message_object[temp_array[0]] = temp_array[1];
            }
            var timeStampNow =  new Date().getTime();
​
            $("#log_time").append(
            "<div><label>" + timeStampNow
                    + "</label> " + server_message_object['Event-Name'] + '<input type="button" value="+" id="btnplus' +server_message_object['Event-Sequence'].trim()
                    +'" onclick="showDiv('+server_message_object['Event-Sequence'].trim()+')">'
                    + '<input type="button" class="hidden_weblogger" value="-" id="btnminus' +server_message_object['Event-Sequence'].trim()
                    +'" onclick="hideDiv('+server_message_object['Event-Sequence'].trim()+')">'
                    + '<div class="hidden_weblogger" id ="' + server_message_object['Event-Sequence'].trim()+'">' +print_r(server_message_object,true) + "</div>");
​
            if(document.getElementById(server_message_object['Event-Name'].trim())){
            $("#"+server_message_object['Event-Name'].trim()).append(
                    "<div><label>" + timeStampNow
                            + "</label> " + server_message_object['Event-Name'] + '<input type="button" value="+" id="btnplus' +server_message_object['Event-Sequence'].trim()
                            +'" onclick="showDiv('+server_message_object['Event-Sequence'].trim()+')">'
                            + '<input type="button" class="hidden_weblogger" value="-" id="btnminus' +server_message_object['Event-Sequence'].trim()
                            +'" onclick="hideDiv('+server_message_object['Event-Sequence'].trim()+')">'
                            + '<div class="hidden_weblogger" id ="' + server_message_object['Event-Sequence'].trim()+'">' +print_r(server_message_object,true) + "</div>");
            console.log('new event added');
            }else{
                $("#log_event").append(
                    '<div id="'+server_message_object['Event-Name'].trim()+'"></div>'
                        );
                console.log('new div created');
                $("#"+server_message_object['Event-Name'].trim()).append(
                        "<div><label>" + timeStampNow
                                + "</label> " + server_message_object['Event-Name'] + '<input type="button" value="+" id="btnplus' +server_message_object['Event-Sequence'].trim()
                                +'" onclick="showDiv('+server_message_object['Event-Sequence'].trim()+')">'
                                + '<input type="button" class="hidden_weblogger" value="-" id="btnminus' +server_message_object['Event-Sequence'].trim()
                                +'" onclick="hideDiv('+server_message_object['Event-Sequence'].trim()+')">'
                                + '<div class="hidden_weblogger" id ="' + server_message_object['Event-Sequence'].trim()+'">' +print_r(server_message_object,true) + "</div>");
​
                }
            }
    };
    /* if subscribe or unsubscribe click send event */
​
    $("#weblogger_log_form").submit(function(f) {
            f.preventDefault();
            //get value from multiselect
            var selected = multiselectValues("multiSelectLog");
            /* get currant subscription*/
            var subscribe = document.getElementById("current_subscription").innerHTML;
            if(subscribe == "none"){
                for (var i = 0; i < selected.length; i++) {
                    //connection.send("/subscribe selected[i]\n");
                }
             }
            else{
                for (var i = 0; i < selected.length; i++) {
                    if(subscribe.indexOf(selected[i]) == -1){
                        //connection.send("/subscribe selected[i]\n");
                        }
                }
                for (var i = 0; i < subscribe.length; i++) {
                    if(selected.indexOf(subscribe[i]) == -1){
                        //connection.send("/unsubscribe subscribe[i]\n");
                        }
                }
               }
​
            /* Set current subscription field */
            document.getElementById("current_subscription").innerHTML = selected.join(",");
​
            connection.send("/subscribe agentCallAction\n");
        });
​
    /* If Disconnect this will be done */
    document.getElementById('btnDisconnect').onclick = function() {
        connection.close();
        document.getElementById("serv_addr").disable = false;
        document.getElementById("port_no").disable = false;
        document.getElementById("btnConnect").style.display = "inline";
        document.getElementById("btnDisconnect").style.display = "none";
        document.getElementById("current_subscription").innerHTML = "None";
        $(function(){
              $(".enableWhenConnect").attr("disabled", true);
            });
    };
});
​
/* validate Ip adress */
function ValidateIPaddress(ipaddress) {
    if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
            .test(ipaddress)) {
        return (true);
    }
    return (false);
}
​
/* Get selected values from multiselect */
function multiselectValues(selectId) {
    var select = document.getElementById(selectId);
    var selected = [];
    for (var i = 0; i < select.length; i++) {
        if (select.options[i].selected)
            selected.push(select.options[i].value);
    }
    console.log("values selected :" + selected);
    return selected;
}
​
function changeOrdering() {
    var orderBy = document.querySelector('input[name="ordering"]:checked').value;
    if (orderBy == "time") {
        document.getElementById('log_event').style.display = "none";
        document.getElementById('log_time').style.display = "inline-block";
    }
    if (orderBy == "event") {
        document.getElementById('log_time').style.display = "none";
        document.getElementById('log_event').style.display = "inline-block";
    }
}
​
function print_r(array, return_val) {
      //  discuss at: http://phpjs.org/functions/print_r/
      //        http: //kevin.vanzonneveld.net
      // original by: Michael White (http://getsprink.com)
      // improved by: Ben Bryan
      // improved by: Brett Zamir (http://brett-zamir.me)
      // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
      //    input by: Brett Zamir (http://brett-zamir.me)
      //  depends on: echo
      //   example 1: print_r(1, true);
      //   returns 1: 1
​
      var output = '',
        pad_char = ' ',
        pad_val = 4,
        d = this.window.document,
        getFuncName = function(fn) {
          var name = (/\W*function\s+([\w\$]+)\s*\(/)
            .exec(fn);
          if (!name) {
            return '(Anonymous)';
          }
          return name[1];
        };
      repeat_char = function(len, pad_char) {
        var str = '';
        for (var i = 0; i < len; i++) {
          str += pad_char;
        }
        return str;
      };
      formatArray = function(obj, cur_depth, pad_val, pad_char) {
        if (cur_depth > 0) {
          cur_depth++;
        }
​
        var base_pad = repeat_char(pad_val * cur_depth, pad_char);
        var thick_pad = repeat_char(pad_val * (cur_depth + 1), pad_char);
        var str = '';
​
        if (typeof obj === 'object' && obj !== null && obj.constructor && getFuncName(obj.constructor) !==
          'PHPJS_Resource') {
          for (var key in obj) {
            if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
              str += thick_pad + '<div>[' + key + '] => ' + formatArray(obj[key], cur_depth + 1, pad_val, pad_char)+ '</div>\r\n';
            } else {
              str += thick_pad + '<div>[' + key + '] => ' + obj[key] + '</div>\r\n';
            }
          }
          str += base_pad + '\r\n';
        } else if (obj === null || obj === undefined) {
          str = '';
        } else { // for our "resource" class
          str = obj.toString();
        }
​
        return str;
      };
​
      output = formatArray(array, 0, pad_val, pad_char);
​
      if (return_val !== true) {
        if (d.body) {
          this.echo(output);
        } else {
          try {
            d = XULDocument; // We're in XUL, so appending as plain text won't work; trigger an error out of XUL
            this.echo('<pre xmlns="http://www.w3.org/1999/xhtml" style="white-space:pre;">' + output + '</pre>');
          } catch (e) {
            this.echo(output); // Outputting as plain text may work in some plain XML
          }
        }
        return true;
      }
      return output;
    }
​
    function showDiv(divid){
        document.getElementById('btnplus'+divid).style.display = "none";
        document.getElementById('btnminus'+divid).style.display = "inline";
        document.getElementById(divid).style.display = "inline";
​
​
        }
    function hideDiv(divid){
​
        document.getElementById('btnminus'+divid).style.display = "none";
        document.getElementById('btnplus'+divid).style.display = "inline";
        document.getElementById(divid).style.display = "none";
    }
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers