wstest.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <meta charset="UTF-8">
  7. <meta name="theme-color" content="#4b75ff">
  8. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  9. <script src="../script/jquery.min.js"></script>
  10. <script src="../script/ao_module.js"></script>
  11. <script src="../script/semantic/semantic.min.js"></script>
  12. <title>WebSocket Test</title>
  13. </head>
  14. <body>
  15. <br><br>
  16. <div class="ui container">
  17. <h3>WebSocket Testing Interface</h3>
  18. <div class="ui form">
  19. <div class="field">
  20. <label>Recv</label>
  21. <textarea id="incoming"></textarea>
  22. </div>
  23. <div class="field">
  24. <label>Send</label>
  25. <input type="text" id="sendMsg">
  26. </div>
  27. <div class="field">
  28. <button class="ui blue button" onclick="sendws();">Send</button>
  29. </div>
  30. </div>
  31. <br>
  32. <button class="ui button" onclick="openws();">Open Connection</button>
  33. </div>
  34. <script>
  35. var ws;
  36. $(window).ready(function(){
  37. $("#incoming").val("");
  38. });
  39. //Send WebSocket
  40. function sendws(){
  41. var value = $("#sendMsg").val();
  42. ws.send(value);
  43. log("✉️ " + value)
  44. $("#sendMsg").val("");
  45. }
  46. //Open WebSocket connection to test script
  47. function openws(){
  48. log("⏱️ Opening WebSocket...");
  49. let socket = new WebSocket(getWSEndpoint() + "/system/ajgi/interface?script=UnitTest/special/websocket.js");
  50. ws = socket;
  51. socket.onopen = function(e) {
  52. log("✔️ Socket Opened");
  53. };
  54. socket.onmessage = function(event) {
  55. log(`✔️ Received: ${event.data}`);
  56. };
  57. socket.onclose = function(event) {
  58. if (event.wasClean) {
  59. log(`📪 Connection Closed Cleanly code=${event.code} reason=${event.reason}`);
  60. } else {
  61. // e.g. server process killed or network down
  62. // event.code is usually 1006 in this case
  63. log(`❌ Connection Closed Unexpectedly`);
  64. }
  65. };
  66. socket.onerror = function(error) {
  67. log(`❌ ERROR! ${error.message}`);
  68. };
  69. }
  70. function log(content){
  71. $("#incoming").val($("#incoming").val() + content + "\n");
  72. $("#incoming").scrollTop($("#incoming")[0].scrollHeight);
  73. }
  74. function getWSEndpoint(){
  75. //Open opeartion in websocket
  76. let protocol = "wss://";
  77. if (location.protocol !== 'https:') {
  78. protocol = "ws://";
  79. }
  80. wsControlEndpoint = (protocol + window.location.hostname + ":" + window.location.port);
  81. return wsControlEndpoint;
  82. }
  83. </script>
  84. </body>
  85. </html>