websocket atleast connects!

backend/index.js

@@ -30,12 +30,17 @@ var app = express();
 
 const server = require('http').createServer(app);
 
-const io = require('socket.io')(server, {});
+const io = require('socket.io')(server, {
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"],
+  }
+});
 
 var Twitter = require('twitter-lite');
 
 
-io.origins('*:*');
+//io.origins('*:*');
 /*
 io.origins((origin, callback) => {
   //if (origin !== 'https://foo.example.com') {

backend/package.json

@@ -26,7 +26,7 @@
     "node-schedule": "1.2.4",
     "passport": "0.4.0",
     "passport-local": "1.0.0",
-    "socket.io": "2.1.1",
+    "socket.io": "^4.0.0",
     "twitter-lite": "1.1.0",
     "websocket": "^1.0.24",
     "ws": "^3.1.0"

frontend/package.json

@@ -25,7 +25,8 @@
     "react-scripts": "5.0.1",
     "redux-thunk": "2.4.2",
     "semantic-ui-css": "2.5.0",
-    "semantic-ui-react": "2.1.4"
+    "semantic-ui-react": "2.1.4",
+    "socket.io-client": "^4.5.4"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/Call/CallPlayer.js

@@ -26,10 +26,11 @@ import {
 import "./CallPlayer.css";
 //import setupSocket from '../socket/SetupSocket.js'
 import queryString from '../query-string';
+import io from 'socket.io-client';
+import { setDateFilter } from "./call-actions";
 
 
-
+const socket = io(process.env.REACT_APP_BACKEND_SERVER );
-
 
 
 // ----------------------------------------------------
@@ -63,6 +64,9 @@ function CallPlayer (props) {
     const [filterVisible, setFilterVisible] = useState(false);
     const [groupVisible, setGroupVisible] = useState(false);
     const [calendarVisible, setCalendarVisible] = useState(false);
+    const [isConnected, setIsConnected] = useState(socket.connected);
+
+
 
     const dispatch = useDispatch();
     
@@ -86,9 +90,6 @@ function CallPlayer (props) {
   const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened);
   const handleFilterToggle = () => setFilterVisible(!filterVisible);
   const handleCalendarToggle = () => setCalendarVisible(!calendarVisible);
-  const handleLiveToggle = () => {
-    dispatch(setLive(!live));
-  }
 
   const audioRef = false;
 
@@ -121,7 +122,7 @@ function CallPlayer (props) {
   }
 
 
-const getFilter = () => {
+const getFilterDescription = () => {
   
     var filter = { type: 'all', code: "", filterStarred: false };
 
@@ -142,44 +143,85 @@ const getFilter = () => {
     filter.filterStarred = filterStarred
     return filter;
 }
-  /*
+
-  const endSocket = () => {
+
-    this.socket.removeAllListeners("new message");
+  const addCall = (data) =>{
-    this.socket.removeAllListeners("reconnect");
+    const message = JSON.parse(data)
+    switch (message.type) {
+      case 'calls':
+        /*const refs = this.refs.current;
+        callActions.addCall(message);
+        const newCall = callsById[callsAllIds[0]];
+        if (!isPlaying && autoPlay) {
+          this.playCall({ call: newCall });
+          if (this.currentCallRef.current) {
+            this.currentCallRef.current.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            });
           }
-  setupSocket() {
+        }*/
-    this.socket.on('new message', this.addCall);
+        console.log("Got: " + message);
-    this.socket.on('reconnect', (attempts) => {
+        break
+      default:
+        break
+    }
+  }
+
+  useEffect(() => {
+    socket.on('connect', () => {
+      setIsConnected(true);
+    });
+
+    socket.on('disconnect', () => {
+      setIsConnected(false);
+    });
+
+    socket.on('reconnect', (attempts) => {
       console.log("Socket Reconnected after attempts: " + attempts); // true
+
       if (live) {
-        var filter = this.getFilter();
+        this.startSocket();
-        this.startSocket(shortName, filter.type, filter.code, filter.filterStarred);
       }
     })
-  }
+
-  startSocket(shortName, filterType = "", filterCode = "", filterStarred = false) {
+    socket.on("new message", addCall);
-    this.socket.emit("start", {
+
-      filterCode: filterCode,
+    return () => {
-      filterType: filterType,
+      socket.off('connect');
+      socket.off('disconnect');
+      socket.off('pong');
+    };
+  }, []);
+
+  const startSocket = () => {
+    const filter = getFilterDescription();
+    socket.emit("start", {
+      filterCode: filter.Code,
+      filterType: filter.Type,
       filterName: "OpenMHz",
-      filterStarred: filterStarred,
+      filterStarred: filter.Starred,
       shortName: shortName
     });
   }
-  stopSocket() {
+  const stopSocket = () => {
-    this.socket.emit("stop");
+    socket.emit("stop");
   }
-  handleLiveToggle() {
+  const handleLiveToggle = () => {
     if (!live) {
-      callActions.setDateFilter(false);
+      dispatch(setDateFilter(false));
-      callActions.setLive(false);
+      dispatch(setLive(true));
-      this.setState({ callUrl: "", callId: false });
+      setCallUrl("");
-      callActions.fetchCalls();
+      setCallId(false);
-      var filter = this.getFilter();
+
-      this.startSocket(shortName, filter.type, filter.code, filter.filterStarred);
+      dispatch(getCalls({}));
+      
+      this.startSocket();
     }
   }
-*/
+
+
+
 /*
   updateUri(props, state) {
     var search = "?"
@@ -396,11 +438,9 @@ const getFilter = () => {
     //talkgroupActions.fetchTalkgroups(shortName);
     //groupActions.fetchGroups(shortName);
     //systemActions.fetchSystems();
-    /*this.setupSocket();
 
-    if (filter.live) {
+
-      this.startSocket(shortName, filterType, filterCode, filter.filterStarred);
+   
-    }*/
     setStateFromUri();
     //console.log("Setting short name to: " + shortName)
     //dispatch(setShortName(shortName));
@@ -411,9 +451,14 @@ const getFilter = () => {
   }, []);
 
   useEffect(() => {
+     /*
+    this.updateUri(nextProps, nextState);*/
     dispatch(getCalls({}));
+    if (live) {
+      startSocket();
+    }
     //dispatch(getOlderCalls());
-  }, [shortName,filterGroupId,filterTalkgroups,filterType,filterStarred])
+  }, [shortName,filterGroupId,filterTalkgroups,filterType,filterDate,filterStarred])
 
 
 
@@ -432,33 +477,6 @@ const getFilter = () => {
     }
    },[groupsData] )
 
-   useEffect( () => {
-    /*var typeString = 'all';
-    var filterCode = '';
-    switch (nextProps.filterType) {
-
-      case 1:
-        typeString = 'group';
-        filterCode = nextProps.filterGroupId;
-        break;
-      case 2:
-        typeString = 'talkgroup';
-        filterCode = nextProps.filterTalkgroups;
-        break;
-      default:
-      case 0:
-        typeString = "all";
-        filterCode = '';
-        break;
-    }
-
-    this.updateUri(nextProps, nextState);
-    if (live) {
-      this.startSocket(shortName, typeString, filterCode, nextProps.filterStarred);
-    }*/
-   }, [filterType,filterTalkgroups,filterGroupId,filterStarred,filterDate])
-
-
    /*
   componentWillUpdate(nextProps, nextState) {
 

frontend/yarn.lock

@@ -2430,6 +2430,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -4371,7 +4376,7 @@ debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4691,6 +4696,22 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+engine.io-client@~6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.3.tgz#a8cbdab003162529db85e9de31575097f6d29458"
+  integrity sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.0.3:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.5.tgz#c6fa52e57d8d2dc68b24754348f779aa6e44f886"
+  integrity sha512-mjEyaa4zhuuRhaSLOdjEb57X0XPP9JEsnXI4E+ivhwT0GgzUogARx4MqoY1jQyB+4Bkz3BUOmzL7t9RMKmlG3g==
+
 enhanced-resolve@^5.10.0:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
@@ -9093,6 +9114,24 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
+socket.io-client@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.4.tgz#d3cde8a06a6250041ba7390f08d2468ccebc5ac9"
+  integrity sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.3"
+    socket.io-parser "~4.2.1"
+
+socket.io-parser@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -10304,6 +10343,11 @@ ws@^8.4.2:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
+ws@~8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -10314,6 +10358,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xtend@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"