Giter Site home page Giter Site logo

access from webserver about gwsocket HOT 9 CLOSED

allinurl avatar allinurl commented on May 13, 2024
access from webserver

from gwsocket.

Comments (9)

allinurl avatar allinurl commented on May 13, 2024

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 :)

from gwsocket.

ultratip avatar ultratip commented on May 13, 2024

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

from gwsocket.

ultratip avatar ultratip commented on May 13, 2024

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

image
not sure where I am making mistake/wrong assumption

many thanks

-Duro

from gwsocket.

allinurl avatar allinurl commented on May 13, 2024

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');

from gwsocket.

allinurl avatar allinurl commented on May 13, 2024

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

from gwsocket.

ultratip avatar ultratip commented on May 13, 2024

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>

from gwsocket.

ultratip avatar ultratip commented on May 13, 2024

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

from gwsocket.

ultratip avatar ultratip commented on May 13, 2024

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

from gwsocket.

allinurl avatar allinurl commented on May 13, 2024

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]));
    };

from gwsocket.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.