Node Red and Socket IO nothing coming to frontend

Question

I'm trying to send data from node red to react frontend by using socket. Below code giving me no error and I can see there are datas coming to node red by looking at debug screen. But noting coming to frontend side.

Node Red Flow:

[
    {
        "id": "83bd68a8f1ff5424",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "8ff7f5dc9cc8b36d",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "52964918590b507e",
        "type": "subflow",
        "name": "Subflow 1",
        "info": "",
        "category": "",
        "in": [],
        "out": [],
        "env": [
            {
                "name": "event-name",
                "type": "str",
                "value": "opcua"
            },
            {
                "name": "data-type",
                "type": "str",
                "value": ""
            }
        ],
        "meta": {},
        "color": "#DDAA99"
    },
    {
        "id": "c6afd3ef7edc10c0",
        "type": "socket.io-instance",
        "name": "socket.io server",
        "bindToNode": false,
        "port": "3000",
        "options": "{
  \"cors\": {
    \"origin\": \"*\",
    \"methods\": [\"GET\", \"POST\"]
  }
}"
    },
    {
        "id": "cb69dabc797703c2",
        "type": "binance-get-price",
        "z": "52964918590b507e",
        "name": "",
        "ticker": "${data-type}",
        "x": 600,
        "y": 160,
        "wires": [
            [
                "6d9eb35e73d66e12"
            ]
        ]
    },
    {
        "id": "b44c637f3081079b",
        "type": "inject",
        "z": "52964918590b507e",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "${event-name}",
        "payload": "",
        "payloadType": "date",
        "x": 340,
        "y": 160,
        "wires": [
            [
                "cb69dabc797703c2"
            ]
        ]
    },
    {
        "id": "6d9eb35e73d66e12",
        "type": "change",
        "z": "52964918590b507e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "$number(payload)",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 160,
        "wires": [
            [
                "5d2ef76b493aa7b1"
            ]
        ]
    },
    {
        "id": "5d2ef76b493aa7b1",
        "type": "function",
        "z": "52964918590b507e",
        "name": "",
        "func": "
return { payload: { name: msg.topic, value: msg.payload } }",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1000,
        "y": 160,
        "wires": [
            [
                "b865c5bbf6f5ad74"
            ]
        ]
    },
    {
        "id": "b865c5bbf6f5ad74",
        "type": "socket.io-emit",
        "z": "52964918590b507e",
        "name": "",
        "instance": "c6afd3ef7edc10c0",
        "event": "data",
        "namespace": "",
        "room": "",
        "x": 1160,
        "y": 160,
        "wires": []
    },
    {
        "id": "28ebf36c23208ad5",
        "type": "inject",
        "z": "8ff7f5dc9cc8b36d",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "ns=3;s=\"current_seconds\";datatype=Int32",
        "payload": "",
        "payloadType": "date",
        "x": 250,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "e27a80efb652855a",
        "type": "socket.io-on",
        "z": "8ff7f5dc9cc8b36d",
        "name": "",
        "instance": "c6afd3ef7edc10c0",
        "event": "connection",
        "namespace": "",
        "x": 295,
        "y": 960,
        "wires": [
            [
                "5a6f46e244b4a266"
            ]
        ],
        "l": false
    },
    {
        "id": "5a6f46e244b4a266",
        "type": "debug",
        "z": "8ff7f5dc9cc8b36d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 450,
        "y": 940,
        "wires": []
    },
    {
        "id": "5c548ac091bf4624",
        "type": "subflow:52964918590b507e",
        "z": "8ff7f5dc9cc8b36d",
        "name": "",
        "env": [
            {
                "name": "data-type",
                "value": "BTCUSDT",
                "type": "str"
            }
        ],
        "x": 520,
        "y": 140,
        "wires": []
    },
    {
        "id": "f209b4db4df0eb5e",
        "type": "subflow:52964918590b507e",
        "z": "8ff7f5dc9cc8b36d",
        "name": "",
        "env": [
            {
                "name": "event-name",
                "value": "emrecan",
                "type": "str"
            },
            {
                "name": "data-type",
                "value": "BTCTRY",
                "type": "str"
            }
        ],
        "x": 540,
        "y": 60,
        "wires": []
    }
]

React Part:

const socket = io('http://localhost:3000/socket.io');

const useSocket = () => {
  const [data, setData] = useState('');
  useEffect(() => {
    socket.on('data', (msg: string) => {
      console.log(msg);
    });

    // return () => {
    //   socket.off('data');
    // };
  }, []);

There is no error in console but also no console log too. Maybe issue with the connection url? Screenshots from network tab:

Patrick Tannoury · Answer

Have you tried to add a socket.connect() prior to your socket.on listener? That might be why you are not getting anything returned. Try this:

    import { io } from 'socket.io-client' // Import socket.io

    const socket = io.connect('http://localhost:3000/socket.io');
    
    const useSocket = () => {
      const [data, setData] = useState('');
      useEffect(() => {

        socket.on('data', (msg: string) => {
          console.log(msg);
        });
    
       return () => {

        socket.off('data');

       };

      }, [socket.connected]);

Jantoma21 · Answer

Found the solution: you need to change connection url like this: ws://localhost:3000

Note that my current socket io -v 4.5.2

Node Red and Socket IO nothing coming to frontend

2 Answers