Report the number of connected clients

Author: Avnerus

client/data-tool/src/components/Search.js

@@ -9,6 +9,7 @@ import useSpinner from './useSpinner';
 
 export default function Search(props) {
   const socketSessionId = useSelector(state => state.socket ? state.socket.id : 0)
+  const numberPeople = useSelector(state => state.numberPeople);
   const { register, errors, handleSubmit } = useForm({ mode: "onBlur" });
   const [datasetSession, setDatasetSession] = useState(true);
   const [loading, showLoading, hideLoading] = useSpinner();
@@ -75,7 +76,7 @@ export default function Search(props) {
           <button className="search" name="search" type="submit" ref={register}>Search</button>
         </form>
       </div>
-      <p className='logo-people'>There are now <span className='logo-people number'>X</span> people together with you.</p>
+      <p className='logo-people'>There are now <span className='logo-people number'>{numberPeople - 1}</span> people together with you.</p>
       <ToastContainer position='top-left' delay={8000} />
     </div>
   )

client/data-tool/src/state.js

@@ -14,10 +14,18 @@ const reducer = (state = {
 }, action) => {
   switch (action.type) {
 
-    case 'SET_SOCKET': {
-        console.log("Setting socket", action.socket);
-        return {...state, socket: action.socket}
-    }
+  case 'SET_SOCKET': {
+      console.log("Setting socket", action.socket);
+      action.socket.off('connected-clients');
+      action.socket.on('connected-clients', (data) => {
+        console.log('Conneted clients:', data);
+        store.dispatch({
+          type: 'NUMBER_PEOPLE',
+          value: data.value
+        })
+      });
+      return {...state, socket: action.socket}
+  }
 	case 'SET_SESSION': {
 		console.log("Setting session", action.session);
 		return {...state, session: action.session}
@@ -49,6 +57,12 @@ const reducer = (state = {
       cropImages: [...state.cropImages, action.cropImages]
     }
   }
+  case 'NUMBER_PEOPLE': {
+    return {
+      ...state,
+      numberPeople: action.value
+    }
+  }
   case 'SAVE_VALUE_SLIDER': {
     return {
       ...state,

server/server.py

@@ -209,6 +209,8 @@ def run(self):
                 print("Failed")
                 pass
 
+connected_clients = 0
+
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'mysecret'
 socketio = SocketIO(app, cors_allowed_origins="*")
@@ -233,6 +235,7 @@ def run(self):
 )
 poser.start()
 
+
 @app.route('/sessions/<path:filepath>')
 def data(filepath):
     return send_from_directory('sessions', filepath)
@@ -327,14 +330,24 @@ def catch_all(path):
 
 @socketio.on('connect')
 def on_connect():
-    print("Client connected {}".format(request.sid))
-    join_room(request.sid)
+    global connected_clients
+    connected_clients = connected_clients + 1 
+    print("Client connected {}. Total: {}".format(request.sid, connected_clients))
+    emit('connected-clients',{'value': connected_clients },broadcast=True, namespace='/')
+    #join_room(request.sid)
     # if(request.method=='POST'):
     #  some_json=request.get_json()
     #  return jsonify({"key":some_json})
     # else:
     #     return jsonify({"GET":"GET"})
 
+@socketio.on('disconnect')
+def on_disconnect():
+    global connected_clients
+    connected_clients = connected_clients - 1
+    print("Client disconnected {}. Total: {}".format(request.sid, connected_clients))
+    emit('connected-clients',{'value': connected_clients },broadcast=True, namespace='/')
+
 if __name__ == '__main__':
 
 	#print("Generating samples")

yarn.lock

@@ -3386,9 +3386,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001111:
-  version "1.0.30001114"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001114.tgz#2e88119afb332ead5eaa330e332e951b1c4bfea9"
-  integrity sha512-ml/zTsfNBM+T1+mjglWRPgVsu2L76GAaADKX5f4t0pbhttEp0WMawJsHDYlFkVZkoA+89uvBRrVrEE4oqenzXQ==
+  version "1.0.30001252"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz"
+  integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==
 
 capture-exit@^2.0.0:
   version "2.0.0"