index.js 4.3 KB

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