index.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. let connectError = 0;
  2. // 站点工况(websocket实时推送)
  3. (function() {
  4. var websocket;
  5. var isOpen = false;
  6. function initWebSocket() {
  7. try {
  8. if (typeof MozWebSocket == 'function')
  9. WebSocket = MozWebSocket;
  10. var address = $('#ip').val() + ':' + $('#sort').val()
  11. var arrData = [];
  12. var wsUri = address;
  13. // var wsUri = "wss://iot.usky.cn:55120";
  14. websocket = new WebSocket(wsUri);
  15. websocket.onopen = function(evt) {
  16. if (websocket.readyState == 1) {
  17. $('.data-view').append('<div class="send-status">Websocket连接 (' + wsUri + ') 已建立,正在等待数据...</div>')
  18. scrollBottom();
  19. }
  20. var json = {};
  21. json.agentid = 'admin';
  22. (function() {})()
  23. websocket.send(JSON.stringify(json));
  24. };
  25. websocket.onclose = function(evt) {
  26. if (connectError == 0) {
  27. console.log("DisConnected.");
  28. $('.data-view').append('<div class="send-status">和服务器断开连接!</div>')
  29. scrollBottom();
  30. (function() {})()
  31. // initWebSocket();
  32. }
  33. };
  34. websocket.onmessage = function(evt) {
  35. var siteData = eval('(' + evt.data + ')');
  36. console.log('siteData')
  37. console.log(siteData)
  38. //返回值渲染
  39. // if (siteData.time && aa) {
  40. if (siteData.time) {
  41. $('.data-view').append('<div class="receive-time">[' + siteData.time + ' 收到]</div>');
  42. $('.data-view').append('<pre class="receive-request">' + JSON.stringify(siteData, null, 2) + '</pre>')
  43. scrollBottom();
  44. }
  45. };
  46. websocket.onerror = function(evt) {
  47. connectError = 1;
  48. // isOpen = true;
  49. console.log("Error==:", evt.data);
  50. (function() {
  51. alert('连接失败,无效的地址');
  52. })()
  53. };
  54. } catch (exception) {
  55. alert('无效的地址!')
  56. connectError = 1;
  57. console.log("Exception:", exception);
  58. (function() {})()
  59. }
  60. }
  61. //打开websocket
  62. $('.openWebsocket').on('click', function() {
  63. if (!isOpen) {
  64. isOpen = true;
  65. initWebSocket();
  66. $('.openWebsocket').css({ 'cursor': 'not-allowed', 'opacity': '.5' })
  67. $('.closeWebsocket').css({ 'cursor': 'pointer', 'opacity': '1' })
  68. }
  69. })
  70. //关闭websocket
  71. $('.closeWebsocket').on('click', function() {
  72. isOpen = false;
  73. websocket.close();
  74. $('.closeWebsocket').css({ 'cursor': 'not-allowed', 'opacity': '.5' })
  75. $('.openWebsocket').css({ 'cursor': 'pointer', 'opacity': '1' })
  76. })
  77. //站点工况点击
  78. $('.siteCondition').on('click', function() {
  79. if (isOpen) {
  80. var stationId = $('#stationId').val()
  81. var stationName = $('#stationName').val()
  82. var json = {};
  83. json.CMD = 'getStationInfo';
  84. json.StationID = stationId;
  85. json.StationName = stationName;
  86. //发送时间和请求参数页面渲染
  87. $('.data-view').append('<pre class="send-time">[' + time() + '发出]</pre>');
  88. $('.data-view').append('<pre class="send-request">' + JSON.stringify(json, null, 2) + '</pre>')
  89. scrollBottom();
  90. websocket.send(JSON.stringify(json));
  91. } else {
  92. alert('请先打开websocket连接!')
  93. return
  94. }
  95. })
  96. //站点详情点击
  97. $('.siteDetail').on('click', function() {
  98. if (isOpen) {
  99. var stationId = $('#stationId').val()
  100. var json = {};
  101. json.CMD = 'getStationDetail';
  102. json.StationID = stationId;
  103. //发送时间和请求参数页面渲染
  104. $('.data-view').append('<pre class="send-time">[' + time() + '发出]</pre>');
  105. $('.data-view').append('<pre class="send-request">' + JSON.stringify(json, null, 2) + '</pre>')
  106. scrollBottom();
  107. websocket.send(JSON.stringify(json));
  108. } else {
  109. alert('请先打开websocket连接!')
  110. return
  111. }
  112. })
  113. })()