You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
4.9 KiB
152 lines
4.9 KiB
5 years ago
|
<!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>
|