Error after receiving web socket connection

After a successful web socket connection, I get a TypeError:

centrifuge.js?4f09:1144 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'client')
    at Centrifuge._connectResponse (centrifuge.js?4f09:1144:1)
    at eval (centrifuge.js?4f09:721:1)

1. Error - https://i.imgur.com/Hwbd8bq.png
2. Success connected in network - https://i.imgur.com/AR4fq1q.png , https://i.imgur.com/KiMZG9k.png
3. Line error - https://i.imgur.com/uev8aot.png

code is on the client:

useEffect(() => {
    const centrifuge = new Centrifuge('ws://localhost:8001/connection/websocket', {
      debug: true,
      getToken: async (ctx) => {
        const response = await WebSocketApi.jwt(ctx)

        cookies.set(COOKIES.TOKEN_JWT, response.data.accessToken)

        return response.data.accessToken
      },
    })
    
    // const sub = centrifuge.newSubscription('channel');

    centrifuge.on('connected', function (ctx) {
      console.log('Connected:', ctx)
    })

    centrifuge.on('connecting', function (ctx) {
      console.log('Connecting:', ctx)
    })

    centrifuge.on('disconnected', function (ctx) {
      console.log('Disconnected:', ctx)
    })

    centrifuge.on('error', function (ctx) {
      console.log('Error:', ctx)
    })

    // sub.on('publication', function(ctx) {
    //     console.log('Publication:', ctx.data);
    // });
    //
    // sub.subscribe();

    centrifuge.connect()

    return () => centrifuge.disconnect()
  }, [dispatch])

docker-compose:

centrifugo:
    image: centrifugo/centrifugo:4.0.1
    volumes:
      - ./api/docker/common/centrifugo/config.json:/centrifugo/config.json
    command: centrifugo -c config.json --admin
    environment:
      CENTRIFUGO_SECRET: centrifugo_secret
      CENTRIFUGO_ADMIN_PASSWORD: centrifugo_admin_password
      CENTRIFUGO_ADMIN_SECRET: centrifugo_admin_secret
      CENTRIFUGO_API_KEY: jPE0aEYwqO5nwXH2omiEQB2A5cIXjcijcjGUuJ2k4jji8DVNNA2IonePfUWDmO1s
      CENTRIFUGO_TOKEN_HMAC_SECRET_KEY: jPE0aEYwqO5nwXH2omiEQB2A5cIXjcijcjGUuJ2k4jji8DVNNA2IonePfUWDmO1s
    ports:
      - 8001:8001
    ulimits:
      nofile:
        soft: 65535
        hard: 65535
    networks:
      - traefik-public
      - default
    labels:
      - traefik.enable=true
      - traefik.docker.network=traefik-public
      - traefik.http.routers.centrifugo.rule=Host(`centrifugo.localhost`)
      - traefik.http.routers.centrifugo.entryPoints=http
      - traefik.http.services.centrifugo.loadBalancer.server.port=80

config.json:

{
    "port": 8001,
    "engine": "memory",
    "api_key": "secret",
    "allowed_origins": [
        "http://api.localhost",
        "http://localhost",
        "*"
    ],
    "use_client_protocol_v1_by_default": true,
    "skip_user_check_in_subscription_token": true,
    "proxy_connect_endpoint": "http://api/api/v1/centrifugo/connect",
    "proxy_http_headers": [
        "Origin",
        "User-Agent",
        "Authorization",
        "Cookie",
        "X-Real-Ip",
        "X-Forwarded-For",
        "X-Request-Id"
    ],
    "namespaces": [
        {
            "name": "personal",
            "allow_user_limited_channels": true,
            "allow_subscribe_for_client": true
        },
        {
            "name": "ticket_buying",
            "allow_user_limited_channels": true,
            "allow_subscribe_for_client": true
        },
        {
            "name": "raffle",
            "allow_user_limited_channels": true,
            "allow_subscribe_for_client": true
        },
        {
            "name": "advice_blog",
            "allow_user_limited_channels": true,
            "allow_subscribe_for_client": true
        },
        {
            "name": "transaction",
            "allow_user_limited_channels": true,
            "allow_subscribe_for_client": true
        }
    ],
    "allow_user_limited_channels": true,
    "allow_subscribe_for_client": true
}

proxy_connect_endpoint response:

{"result":{"user":"d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4","channels":["personal.d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4","ticket_buying.d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4","transaction.d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4","raffle.d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4","advice_blog.d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4","transaction.d2f7cdd5-7128-4b80-9e9e-ae4c7e5f4fe4"]}}

Versions:

• centrifuge-js:3.0.1
• centrifugo/centrifugo:4.0.1
• react:18.2.0
• next:12.2.5

As I understood, the centrifugo itself accepts the response from the server and sends it to the client, but for some reason it does not work for the client, please tell me what I am doing wrong

[FZambia]

Welcome, hope all working now! Join our community rooms btw (most active in Telegram)

[FZambia]

You mean subs? Yes, subs are not appended to ConnectedContext - https://github.com/centrifugal/centrifuge-js/blob/5267665b2d24816049f4d2909229aaf91886d544/src/types.ts#L131

Though if you have code like this:

centrifuge.on('subscribed', function (ctx) {
      console.log('Subscribed on server-side channel:', ctx)
})

– then it will be called for each channel in subs. See https://centrifugal.dev/docs/transports/client_api#server-side-subscriptions