access from webserver - Githubissues

ultratip commented 8 years ago

Hey

all seems to work, except when i am trying to access from webserver I get empty page

in the video example you are using a /terminal.html page

i also tried to parse your home page to sse how you do it in the frame, but could not figure it out how

in MAN page you have an example of HTML snippet to communicate wit the server, which works, but not sure what command to send

whatever I type in there, is also sent and received as same string

otherwise I can compile and see the traffic coming to the gwsocket server (gwsocket access log)

could you please post an example of either

http requests directly to the gwsocket server - e.g. http://localhost:7890/someting/
example of HTML page that pulls in the output of remote gwsocket (ws://localhost:7890) in a frame or other means

I can already see the live goaccess feed in a browser coming, should be pretty cool !!!

many thanks

-Duro

allinurl commented 8 years ago

Good question. In the screencast, I created a file called terminal.html that opens up a WebSocket connection simply by calling the WebSocket() constructor. i.e.,

var connection = new WebSocket('ws://localhost:7890');

So here's a complete client-side example. First start gwsocket.

gwsocket --echo-mode

Then create an html file, e.g., echo.html.

<!DOCTYPE html>
<html lang="en">
<style>
pre {
    background: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}
#page-wrapper {
    border-top: 5px solid #69c773;
    margin: 1em auto;
    width: 950px;
}
</style>
<script>
window.onload = function() {
    function $(selector) {
        return document.querySelector(selector);
    }
    var socket = new WebSocket('ws://localhost:7890');
    socket.onopen = function(event) {
        $('#messages').innerHTML = 'Connected<br>';
    };
    socket.onmessage = function(event) {
        $('#messages').innerHTML += 'Received:<br>' + event.data + '<br>';
    };
    socket.onclose = function(event) {
        $('#messages').innerHTML = 'Disconnected ' + event.reason;
    };
    $('#submit').onclick = function(e) {
        socket.send($('input').value);
        $('#messages').innerHTML += 'Sent:<br>' + $('input').value + '<br>';
        $('input').value = '';
    };
};
</script>

<div id="page-wrapper">
    <pre id="messages">Connecting...</pre>
    <input id="message" required>
    <button id="submit">Send Message</button>
</div>

Then open the file in your browser (Ctrl+o should do it), it will connect to the server in echo-mode. BTW, you can find the same example here.

Now, If you are looking to have your full terminal output displayed in the browser, you need to load hterm.js. You can get a copy and the example here.

I'll update the man page so it's a bit more obvious :)

ultratip commented 8 years ago

I will try it, the way you described, but from what I understood gwsocket needs to be run on the remote server where I want to tail the logs (e.g)

then in my local PC, I thought I would connect my browser to the remote server, to bring the logs to my browser eventually I could run a local webserver or throw the local HTML file to local browser and inside the HTML I would have the code above where I would change var socket = new WebSocket('ws://REMOTESERVER:7890');

should this work ?

is there any complient browser required, I tried FF & CHROME and I and had

where do I reference http://gwsocket.io/hterm/hterm.js in the HTML ?

I am running my PC in windoes and though this setup is independent and local client PC only requires browser and possibly an HTML file

anyway, it will be cool once I get it working

good work

cheers

-Duro

ultratip commented 8 years ago

server side

window one: gwsocket --echo-mode OR just gwsocket window two: top > /tmp/wspipein.fifo window three: netstat

tcp  0 0 0.0.0.0:7890  0.0.0.0:*  LISTEN 30156/gwsocket

the transition files are create in /tmp run all as root my local pc side create your echo.html file - replace

var socket = new WebSocket('ws://http://REMOTESERVERIP:7890/');

browser - either run my local webserver to point to your echo.html or, just throw it to the browser from filesystem

not sure where I am making mistake/wrong assumption

many thanks

-Duro

allinurl commented 8 years ago

Seems like the problem might be with

new WebSocket('ws://http://REMOTESERVERIP:7890/');

You don't need to use the http:// nor the trailing /, so please try,

new WebSocket('ws://REMOTESERVERIP:7890');

allinurl commented 8 years ago

Also, please make sure you're not blocking port 7890 in your server.

ultratip commented 8 years ago

Perfect

works pretty well now

the damn "/" at the end was causing an issue

mine minimalistic version of the HTML is (deos not include commands communication, just outputs your pipe to /tmp/wspipein.fifo - e.g. vmstat 1 > /tmp/wspipein.fifo)

<!DOCTYPE html>
<html lang="en">
<style>
pre {
    background: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}
#page-wrapper {
    border-top: 5px solid #69c773;
    margin: 1em auto;
    width: 950px;
}
</style>
<script>
 window.onload = function() {
     function $(selector) {
         return document.querySelector(selector);
     }
     var socket = new WebSocket("ws://192.168.19.21:7890");
     socket.onmessage = function(event) {
         $("#messages").innerHTML += "" + event.data;
     };
 };
 </script>

 <div id="page-wrapper">
    <pre id="messages"></pre>
</div>

 </HTML>

ultratip commented 8 years ago

Hey

many thanks for your help

the only issue, but that is more of an HTML issue is to hwo to keep the browser page small

this is piping lines tothe HTML via $("#messages").innerHTML += "" + event.data;

so if the output from the server is fast, browser could crash

I think it will be solved via refresh of the page regularily or size of the frame

in any ways

good job !

-Duro

ultratip commented 8 years ago

plus I am sure you have plans of sending data back via browser to your oprocess via /tmp/wspipeout.fifo to control the process

looking forward to the new version of goaccess using this

cheers

-Duro

allinurl commented 8 years ago

Glad to hear that worked. You can do kinda like what I do on the gwsocket.io site to not keep adding stuff to the browser...

    var socket = new WebSocket('ws://localhost:7890');

    function addMessage(msg) {
        // current messages 
        var msgs = $('.container .message');

        // keep the last 20 lines
        if (msgs.length == 20)
            msgs.first().remove();

        $('<div />', {
                'class': 'message'
            })
            .html(msg)
            .appendTo($('.wrapper'));
    }

    socket.onmessage = function(event) {
        var lines = event.data.split(/\n/);
        for (var i = 0; i < lines.length; ++i)
            $.trim(lines[i]) != '' && addMessage($.trim(lines[i]));
    };

allinurl / gwsocket

access from webserver #1