Traffic and Connections Graphs empty

[cristiano-linvix]

Hello, thank you very much for your attention!

I'm facing a problem with the dashboard that inform the metrics about the server. I'm using express to expose the socket.io server.

File where you configure the socket instance

import getenv from "getenv";

import { Server } from "socket.io";
import { instrument } from "@socket.io/admin-ui";
import { createAdapter } from "@socket.io/redis-streams-adapter";

import { createClient } from "redis";

import { getRedisConfigs } from "@database/redis";

// create server
const io = new Server({
    cors: {
        origin: "*",
        methods: ["GET", "POST"],
        allowedHeaders: [],
        // credentials: true
    },
    connectionStateRecovery: {
        // the backup duration of the sessions and the packets
        maxDisconnectionDuration: 2 * 60 * 1000,
        // whether to skip middlewares upon successful recovery
        skipMiddlewares: true,
    },
    pingInterval: 5000,
    pingTimeout: 10000,
});

// configure redis
const redisClient = createClient({
    ...getRedisConfigs(),
});

// connect on redis
// !only with redis 4.x
Promise.all([redisClient.connect()]).then(() => {
    // register redis on socket
    io.adapter(createAdapter(redisClient));

    // web admin UI
    instrument(io, {
        mode: getenv.string("WEBADMIN_MODE", "development") as any,
        auth: {
            type: "basic",
            username: "admin",
            password: getenv.string("WEBADMIN_PASS", ""),
        },
    });
});

export default io;

Versions:

  "redis": "4.6.7",
  "socket.io": "4.7.1",
  "@socket.io/admin-ui": "0.5.1",
  "@socket.io/redis-streams-adapter": "0.1.0",

I already tried using the "@socket.io/redis-adapter": "8.2.1" adapter but had the same problem. I'm using redis because in production I have 3 instances.

[cristiano-linvix]

Hello, any suggestion?

[cristiano-linvix]

I identified that the problem occurs when using a project with express and http.

If I connect to port 3000, the statuses work normally.

If I connect to port 3001, the statuses don't work!

index.js

import express from "express";
import http from "http";

import { Server } from "socket.io"; import { createClient } from "redis"; import { createAdapter as createAdapterStream } from "@socket.io/redis-streams-adapter"; import { instrument } from "@socket.io/admin-ui";

const app = express(); const httpServer = http.createServer(app);

const io = new Server({ cors: { origin: ["https://admin.socket.io", "http://localhost"], credentials: true, }, connectionStateRecovery: { // the backup duration of the sessions and the packets maxDisconnectionDuration: 2 60 1000, // whether to skip middlewares upon successful recovery skipMiddlewares: true, }, pingInterval: 5000, pingTimeout: 10000, });

const redisClient = createClient({ socket: { host: "localhost", port: 6379 } });

Promise.all([redisClient.connect()]).then(() => { io.adapter(createAdapterStream(redisClient));

instrument(io, { auth: false, }); });

io.attach(httpServer);

io.listen(3000);

httpServer.listen(3001);

> package.json

```json
{
  "name": "cluster-redis",
  "version": "0.0.1",
  "description": "Sample server to be used with the Socket.IO Admin UI",
  "private": true,
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js"
  },
  "author": "Damien Arrachequesne <damien.arrachequesne@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "@socket.io/admin-ui": "^0.5.1",
    "@socket.io/redis-adapter": "^8.2.1",
    "@socket.io/redis-streams-adapter": "^0.1.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "http": "^0.0.1-security",
    "redis": "^4.6.10",
    "socket.io": "^4.7.2"
  }
}

[cristiano-linvix]

I discovered the problem, io.attach(httpServer) needs to be added before the instrument.