console.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <html>
  2. <head>
  3. <title>WsTTY</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  6. <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
  7. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  8. <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
  9. <script type="text/javascript" src="../../script/ao_module.js"></script>
  10. <style>
  11. body{
  12. background-color: rgba(20, 20, 20, 0.9);
  13. }
  14. .textarea{
  15. width: 100%;
  16. height: calc(100% - 24px);
  17. border-bottom: 1px solid #242424;
  18. overflow-y: auto;
  19. overflow-x: hidden;
  20. word-wrap: break-word;
  21. padding: 12px;
  22. color: white;
  23. font-family: monospace;
  24. }
  25. .commandinput{
  26. width: 100%;
  27. background-color:transparent;
  28. border: 0px solid transparent;
  29. padding: 3px;
  30. color: white;
  31. padding-left: 12px;
  32. padding-right: 12px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="textarea" onclick="$('.commandinput').focus();">
  38. </div>
  39. <input type="text" class="commandinput"></input>
  40. <div class="ui basic modal">
  41. <div class="ui icon header">
  42. <i class="yellow exclamation triangle icon"></i>
  43. Connection Closed
  44. </div>
  45. <div class="content">
  46. <p>Session has been terminated by the server side (either by permission denied or system failure). Please restart the WsTTY for a new session.</p>
  47. </div>
  48. <div class="actions">
  49. <div class="ui basic cancel inverted button">
  50. OK
  51. </div>
  52. <div class="ui ok inverted button" onclick="ao_module_close();">
  53. <i class="remove icon"></i>
  54. Close
  55. </div>
  56. </div>
  57. </div>
  58. <script>
  59. var ShellWs;
  60. var commandHistory = [];
  61. var historyViewCounter = 0;
  62. var CtrlDown = false;
  63. $('.ui.modal').modal();
  64. $(document).ready(function(){
  65. $(".commandinput").focus();
  66. //Connect to WebSocket
  67. let protocol = "wss://";
  68. if (location.protocol !== 'https:') {
  69. protocol = "ws://";
  70. }
  71. writeToScreen("[info] Conencting to arozos WsTTY service...")
  72. //Create WebSocket object
  73. ShellWs = new WebSocket(protocol + window.location.hostname + ":" + window.location.port + "/wstty/tty/");
  74. //Hook events
  75. ShellWs.onopen = function(e) {
  76. writeToScreen("[info] Connection opened")
  77. };
  78. ShellWs.onmessage = function(event) {
  79. writeToScreen(event.data)
  80. };
  81. ShellWs.onclose = function(event) {
  82. writeToScreen("[info] Connection Closed")
  83. $('.ui.modal').modal("show");
  84. };
  85. ShellWs.onerror = function(error) {
  86. console.log(error);
  87. };
  88. });
  89. $(document).keydown(function(event) {
  90. if (event.which == "17"){
  91. CtrlDown = true;
  92. }else if (event.which == 67 && CtrlDown == true){
  93. //Signkill.
  94. if (ShellWs != undefined){
  95. ShellWs.send("\x003")
  96. }
  97. }
  98. });
  99. $(document).keyup(function() {
  100. CtrlDown = false;
  101. });
  102. $(".commandinput").on("keydown", function(e){
  103. if (e.keyCode == 13){
  104. //Enter pressed.
  105. var commandToSend = $(".commandinput").val();
  106. //Handle client side commands
  107. if (commandToSend == "clear"){
  108. $(".textarea").html("");
  109. }else{
  110. if (ShellWs !== undefined){
  111. ShellWs.send(commandToSend)
  112. }
  113. }
  114. commandHistory.push(commandToSend);
  115. historyViewCounter = 0;
  116. $(".commandinput").val("");
  117. }else if (e.keyCode == 38){
  118. if (historyViewCounter == 0){
  119. historyViewCounter = commandHistory.length - 1;
  120. }else if (historyViewCounter > 1){
  121. historyViewCounter--;
  122. }
  123. $(".commandinput").val(commandHistory[historyViewCounter]);
  124. }
  125. });
  126. function writeToScreen(newContent){
  127. newContent = newContent.trim();
  128. newContent = newContent.split("<").join(`&lt;`);
  129. newContent = newContent.split(">").join(`&gt;`);
  130. newContent = newContent.split("\n").join("<br>");
  131. newContent = newContent.split(" ").join(`&nbsp`);
  132. $(".textarea").html($(".textarea").html() + newContent + "<br>")
  133. $(".textarea")[0].scrollTop = $(".textarea")[0].scrollHeight;
  134. }
  135. </script>
  136. </body>
  137. </html>