commit
6dd76d0802
|
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/209/desktop-computer_1f5a5.png"/>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
let history = {items:[],position:0}
|
||||
|
||||
/////////////// Edit these values //////////////////////////////////////////////////////////
|
||||
// Address to your websocket. Kind of like an http address //
|
||||
let address = "wss://echo.websocket.org/" //
|
||||
// (array of) websocket subprotecol you want to negotiate. false to disable subprotecols //
|
||||
let subProtocol = false //
|
||||
// Retry connection after X ms. Set to false to disable. //
|
||||
let autoReconnect = 1000 //
|
||||
// pre-configured history items. You can use these as cheap-ass shortcuts //
|
||||
history.items = [] //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
let websocket
|
||||
history.position = history.items.length
|
||||
|
||||
$(function() {
|
||||
function startSocket() {
|
||||
$('h1').text(`${address} | ${subProtocol}`)
|
||||
window.WebSocket = window.WebSocket || window.MozWebSocket;
|
||||
websocket = (subProtocol == false) ? new WebSocket(address) : new WebSocket(address, subProtocol);
|
||||
websocket.onopen = function () {
|
||||
$('div').append(`[ws-term] Connection established.<br>`);
|
||||
$('h1').css('border-color', 'green');
|
||||
$("input").prop('disabled', false);
|
||||
};
|
||||
websocket.onerror, websocket.onclose = function () {
|
||||
$('h1').css('border-color', 'red');
|
||||
$("input").prop('disabled', true);
|
||||
|
||||
if(autoReconnect != false) {
|
||||
$('div').append(`[ws-term] Connection lost. Retrying in ${autoReconnect}ms... <br>`);
|
||||
setTimeout(() => {
|
||||
startSocket()
|
||||
return
|
||||
|
||||
},autoReconnect)
|
||||
return
|
||||
}
|
||||
};
|
||||
websocket.onmessage = function (message) {
|
||||
console.log(message.data);
|
||||
$('div').append(`${message.data} <br>`);
|
||||
$('div').scrollTop($('div')[0].scrollHeight);
|
||||
};
|
||||
}
|
||||
startSocket()
|
||||
$('button').click(function(e) {
|
||||
e.preventDefault();
|
||||
let cmdstring = $('input').val()
|
||||
$('div').append(`>> ${cmdstring} <br>`);
|
||||
websocket.send(cmdstring);
|
||||
if(history.position <= history.items.length || cmdstring != history.items[history.position]) history.items.push(cmdstring)
|
||||
history.position = history.items.length
|
||||
|
||||
$('input').val('');
|
||||
});
|
||||
$( "input" ).keydown(function( event ) {
|
||||
if ( event.which == 38 ) { // up arrow
|
||||
console.log(history.position)
|
||||
event.preventDefault();
|
||||
console.log("up")
|
||||
if(history.position > 0) {
|
||||
history.position--
|
||||
$( "input" ).val(history.items[history.position])
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if ( event.which == 40 ) { // down arrow
|
||||
event.preventDefault();
|
||||
console.log("down")
|
||||
if(history.position < history.items.length) {
|
||||
history.position++
|
||||
$( "input" ).val(history.items[history.position])
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
font-family: monospace;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100vh;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
background-color: rgb(32,32,32);
|
||||
color: rgb(220,220,220);
|
||||
padding:16px;
|
||||
margin:0;
|
||||
border-left: 5px solid #ccc;
|
||||
transition: border-color 0.5s ease-in-out;
|
||||
}
|
||||
div {
|
||||
border: 1px solid black;
|
||||
background: #464646;
|
||||
color: rgb(203,203,203);
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
padding: 5px;
|
||||
font-size: 1em;
|
||||
line-height: 150%;
|
||||
}
|
||||
div::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #333;
|
||||
border:0;
|
||||
border-top: 1px green;
|
||||
color: rgb(203,203,203);
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
border-top: 1px solid transparent;
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
}
|
||||
input:focus {
|
||||
border-top: 1px solid rgb(29,39,57);
|
||||
background: #2d2c2c;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>WebSockets test</h1>
|
||||
<div></div>
|
||||
<form>
|
||||
<input autofocus type="text" />
|
||||
<button style="display:none">Send</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue