Admin UI for Socket.IO
https://github.com/socketio/socket.io-admin-ui.git
First, install the @socket.io/admin-ui package:
npm i @socket.io/admin-ui
And then invoke the instrument method on your Socket.IO server:
const { createServer } = require("http");
const { Server } = require("socket.io");
const { instrument } = require("@socket.io/admin-ui");
const httpServer = createServer();
const io = new Server(httpServer, {
cors: {
origin: ["https://admin.socket.io"],
credentials: true
}
});
instrument(io, {
auth: false
});
httpServer.listen(3000);
The module is compatible with:
You can then head up to https://admin.socket.io, or host the files found in the ui/dist folder.
Important note: the website at https://admin.socket.io is totally static (hosted on Vercel), we do not (and will never) store any information about yourself or your browser (no tracking, no analytics, ...). That being said, hosting the files yourself is totally fine.
You should see the following modal:
Please enter the URL of your server (for example, http://localhost:3000 or https://example.com) and the credentials, if applicable (see the auth option below).
authDefault value: -
This option is mandatory. You can either disable authentication (please use with caution):
instrument(io, {
auth: false
});
Or use basic authentication:
instrument(io, {
auth: {
type: "basic",
username: "admin",
password: "$2b$10$heqvAkYMez.Va6Et2uXInOnkCT6/uQj1brkrbyG3LpopDklcq7ZOS" // "changeit" encrypted with bcrypt
},
});
WARNING! Please note that the bcrypt package does not currently support hashes starting with the $2y$ prefix, which is used by some BCrypt implementations (for example https://bcrypt-generator.com/ or https://www.bcrypt.fr/). You can check the validity of the hash with:
$ node
> require("bcrypt").compareSync("<the password>", "<the hash>")
true
You can generate a valid hash with:
$ node
> require("bcrypt").hashSync("changeit", 10)
'$2b$10$LQUE...'
See also:
namespaceNameDefault value: /admin
The name of the namespace which will be created to handle the administrative tasks.
instrument(io, {
namespaceName: "/custom"
});
This namespace is a classic Socket.IO namespace, you can access it with:
const adminNamespace = io.of("/admin");
More information here.
readonlyDefault value: false
Whether to put the admin UI in read-only mode (no join, leave or disconnect allowed).
instrument(io, {
readonly: true
});
serverIdDefault value: require("os").hostname()
The ID of the given server. If you have several Socket.IO servers on the same machine, please give them a distinct ID:
instrument(io, {
serverId: `${require("os").hostname()}#${process.pid}`
});
storeDefault value: new InMemoryStore()
The store is used to store the session IDs so the user do not have to retype the credentials upon reconnection.
If you use basic authentication in a multi-server setup, you should provide a custom store:
const { instrument, RedisStore } = require("@socket.io/admin-ui");
instrument(io, {
store: new RedisStore(redisClient)
});
modeDefault value: development
In production mode, the server won't send all details about the socket instances and the rooms, thus reducing the memory footprint of the instrumentation.
instrument(io, {
mode: "production"
});
The production mode can also be enabled with the NODE_ENV environment variable:
NODE_ENV=production node index.js
You can check the details of the implementation in the lib/index.ts file.
The instrument method simply:
connection and disconnect event for each existing namespaces to track socket instancesjoin, leave and _disconnect commands sent from the UIMIT