npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@moonrailgun/socket.io-admin-ui

v0.2.1

Published

Admin UI for Socket.IO

Downloads

3

Readme

Socket.IO Admin UI

dashboard screenshot

Table of contents

How to use

Server-side

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:

  • Socket.IO v4 server
  • Socket.IO v3 server (>= 3.1.0), but without the operations on rooms (join, leave, disconnection)

Client-side

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:

login modal screenshot

Please enter the URL of your server, including the namespace (for example, http://localhost:3000/admin or https://example.com/admin) and the credentials, if applicable (see the auth option below).

Available options

auth

Default 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:

  • https://github.com/kelektiv/node.bcrypt.js/issues/849
  • https://stackoverflow.com/a/36225192/5138796

namespaceName

Default 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.

readonly

Default value: false

Whether to put the admin UI in read-only mode (no join, leave or disconnect allowed).

instrument(io, {
  readonly: true
});

serverId

Default 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}`
});

store

Default 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)
});

How it works

You can check the details of the implementation in the lib/index.ts file.

The instrument method simply:

  • creates a namespace and adds an authentication middleware if applicable
  • register listeners for the connection and disconnect event for each existing namespaces to track socket instances
  • register a timer which will periodically send stats from the server to the UI
  • register handlers for the join, leave and _disconnect commands sent from the UI

License

MIT