access from webserver
ultratip opened this issue · 9 comments
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
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 :)
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
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
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');
Also, please make sure you're not blocking port 7890 in your server.
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>
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
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
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]));
};