修复Flask-SocketIO和gunicorn更新之后lepv与lepd通信失败的问题

app/run.py

@@ -1,3 +1,6 @@
+from gevent import monkey
+monkey.patch_all()
+
 from flask import Flask, render_template
 from flask_socketio import SocketIO, emit
 from app.modules.lepd.LepDClient import LepDClient
@@ -9,7 +12,33 @@
 app.json_encoder = MyJSONEncoder
 
 socketio = SocketIO(app, ping_timeout=3600)
-
+deviceList = []
+
+#Add device to devices list
+@socketio.on('lepd.device.add')
+def add_lepd_device(device):
+    if device not in deviceList:
+        deviceList.append(device)
+
+    print('add_lepd_device: ' + device)
+    res = {}
+    res['device'] = device
+    emit('lepd.device.add.successed', res)
+
+#Rmove device form devices list
+@socketio.on('lepd.device.del')
+def del_lepd_device(device):
+    if device in deviceList:
+        deviceList.remove(device)
+
+    print('del_lepd_device: ' + device)
+
+#List device
+@socketio.on('lepd.device.list')
+def lsit_lepd_device():
+    res = {}
+    res['list'] = deviceList
+    emit('lepd.device.list.result', res)
 
 @socketio.on('lepd.ping')
 def ping_lepd_server(request):
@@ -87,4 +116,4 @@ def test():
     return render_template("test.html", languages=languages)
 
 if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=8889)
+    socketio.run(app, debug=True, host='0.0.0.0', port=8889)

app/templates/index.html

@@ -49,7 +49,24 @@
           <!--</ul>-->
         <!--</li>-->
 
-
+<!-- Monitor start -->
+        <li class="nav-item" data-toggle="tooltip" data-placement="right" title=" Devices">
+          <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseDevicesMenu" data-parent="#sideBarAccordion">
+            <i class="fa fa-fw fa-dashboard"></i>
+            <span class="nav-link-text">Devices</span>
+          </a>
+          <ul class="sidenav-second-level collapse" id="collapseDevicesMenu">
+                <div class="input-group">
+                    <input id='txt_server_to_watch' class="form-control" type="text" placeholder="127.0.0.1" value="127.0.0.1">
+                    <span class="input-group-btn">
+                      <button class="btn btn-primary" type="button" onclick="addDevices()">
+                        <i class="fa fa-play"></i>
+                      </button>
+                    </span>
+                  </div>
+          </ul>
+        </li>
+<!-- Monitor end-->
 
         <li class="nav-item" data-toggle="tooltip" data-placement="right" title="CPU">
           <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseCpuMenu" data-parent="#sideBarAccordion">
@@ -145,6 +162,7 @@
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <form class="form-inline my-2 my-lg-0 mr-lg-2">
+            <!--
             <div class="input-group">
               <input id='txt_server_to_watch' class="form-control" type="text" placeholder="www.rmlink.cn" value="www.rmlink.cn">
               <span class="input-group-btn">
@@ -153,6 +171,7 @@
                 </button>
               </span>
             </div>
+          -->
           </form>
         </li>
       </ul>
@@ -589,6 +608,7 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
          var socket = null;
          var socketConnected = false;
          var serverToWatch = null;
+         var serverList = [];
 
          $( document ).ready(function() {
 
@@ -603,11 +623,69 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
         });
     </script>
 
-    <!--triggered when the user specifies the LEPD server and click the start button.-->
     <script>
-      function startWatching() {
+      // initial devices list
+      console.log("Connecting Socket IO by: " + 'http://' + document.domain + ':' + location.port);
+      socket = io.connect('http://' + document.domain + ':' + location.port);
+
+      socket.on('lepd.device.list.result', function (res) {
+        if (res.list) {
+          res.list.forEach(function (v, index) {
+            socket.emit('lepd.device.add', v);
+          });
+        };
+      });
+
+      socket.on('lepd.device.add.successed', function(res) {
+        if (res.device) {
+          serverList.push(res.device);
+          addDevicesOnList(res.device);
+        };
+      });
+
+      socket.emit('lepd.device.list');
+    </script>
+
+    <script>
+      function addDevicesOnList(device) {
+        var li = document.createElement('li');
+        var a = document.createElement('a');
+
+        li.id = "DeviceList-" + device;
+        li.value = "device"
+        a.innerHTML = device;
+        a.onclick = function () {
+          console.log("start watch:" + device);
+          startWatching(device);
+        };
+        li.appendChild(a);
+
+        document.getElementById('collapseDevicesMenu').appendChild(li);
+      }
+    </script>
 
+    <script>
+      function addDevices() {
         var specifiedServer = $("#txt_server_to_watch").val();
+        console.log("Add devices:" + specifiedServer);
+
+        var listIndex = serverList.indexOf(specifiedServer);
+        if (listIndex >= 0) { // if specifiedServer is in list ,remove it
+          serverList.splice(listIndex, 1);
+          var menu = document.getElementById('collapseDevicesMenu');
+          var dev = document.getElementById('DeviceList-' + specifiedServer);
+          menu.removeChild(dev);
+          socket.emit('lepd.device.del', specifiedServer);
+          return;
+        }
+
+        socket.emit('lepd.device.add', specifiedServer);
+      }
+    </script>
+
+    <!--triggered when the user specifies the LEPD server and click the start button.-->
+    <script>
+      function startWatching(specifiedServer) {
 
         if ( !specifiedServer) {
           return;
@@ -617,10 +695,11 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
           return;
         }
 
-        serverToWatch = specifiedServer;
+        if (!socket) {
+          return;
+        }
 
-        console.log("Connecting Socket IO by: " + 'http://' + document.domain + ':' + location.port);
-        socket = io.connect('http://' + document.domain + ':' + location.port);
+        serverToWatch = specifiedServer;
 
         socket.on('connect', function() {
           console.log("socket connected");