test.htm 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <title>ZBUS Monitor</title>
  6. <script type="text/javascript" src="hos-client.js"></script>
  7. <style>
  8. table {
  9. font-family: "Helvetica Neue", Helvetica, sans-serif
  10. }
  11. caption {
  12. text-align: left;
  13. color: silver;
  14. font-weight: bold;
  15. text-transform: uppercase;
  16. padding: 5px;
  17. }
  18. thead {
  19. background: SteelBlue;
  20. color: white;
  21. }
  22. th, td {
  23. padding: 5px 10px;
  24. }
  25. tbody tr:nth-child(even) {
  26. background: WhiteSmoke;
  27. }
  28. tbody tr td:nth-child(2) {
  29. text-align: center;
  30. }
  31. tbody tr td:nth-child(3), tbody tr td:nth-child(4) {
  32. text-align: right;
  33. font-family: monospace;
  34. }
  35. tfoot {
  36. background: SeaGreen;
  37. color: white;
  38. text-align: right;
  39. }
  40. tfoot tr th:last-child {
  41. font-family: monospace;
  42. }
  43. #slogan {
  44. text-align: center;
  45. font: bold 24px arial, sans-serif;
  46. margin: 30px 30px;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <h2 id="slogan" align="center">
  52. ZBUS = MQ + RPC <label id="broker" style="color: orange;"></label>
  53. </h2>
  54. <script type="text/javascript">
  55. var broker = new Broker("ws://localhost:15555/");
  56. function cbConsumer(){
  57. var c = new Consumer(broker, "MyMQ");
  58. c.createMq(function(data){
  59. c.take(function(res){
  60. var ta = document.getElementById('responseText');
  61. if(ta.value){
  62. ta.value = ta.value + "\n\n";
  63. }
  64. ta.value = ta.value + res;
  65. ta.scrollTop = ta.scrollHeight;
  66. });
  67. });
  68. }
  69. broker.connect(cbConsumer);
  70. </script>
  71. <div align="center">
  72. <h3>Output</h3>
  73. <textarea id="responseText" style="width: 900px; height: 400px;"></textarea>
  74. </div>
  75. </body>
  76. </html>