Admin UI for Socket.IO

Related tags

socket.io-admin-ui
Overview

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 // needed for cookie-based sticky sessions, else you can ignore this line
  }
});

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

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

Issues
  • Login issue on multi-server setup (xhr post error, Session ID unknown)

    Login issue on multi-server setup (xhr post error, Session ID unknown)

    Hi! I have a problem logging into the admin panel when I have multiple servers in a load-balancing group.

    Му instrument configuration looks like:

    instrument(io, {
      readonly: true,
      auth: false,
      store: new RedisStore(redisClient)}
    })
    

    My socket.io configuration:

    {
        "allowEIO3": true,
        "transports": ["polling", "websocket"],
        "cors": {
            "origin": ["https://admin.socket.io"]
        }
    }
    

    When I try to connect to application with single server in load-balancing group everything works fine and I can see the connection metadata in Redis.

    But when I try to connect to application with multiple servers I get error xhr post error

    Request:

    POST /socket.io/?EIO=4&transport=polling&t=NayhWmL&sid=jlBhx1IfS1dZEpWOAANq HTTP/2
    Host: develop.myserver.app:3001
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0
    Accept: */*
    Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3
    Accept-Encoding: gzip, deflate, br
    Content-type: text/plain;charset=UTF-8
    Content-Length: 1
    Origin: https://admin.socket.io
    Connection: keep-alive
    Referer: https://admin.socket.io/
    TE: Trailers
    

    Response:

    HTTP/2 400 Bad Request
    date: Wed, 05 May 2021 13:18:29 GMT
    content-type: application/json
    set-cookie: AWSALB=/3ZFJ1ljYdZVVpueuztmZeLiyAzPiZ+m9iRf0L8SZLZw2Y44fUk6E5IThvk0+5Z+FurdStn9oIWXtqtGWB5ibYLcEU6OlqOWcMC75zpmSks+cT1WNg7YVcEHe; Expires=Wed, 12 May 2021 13:18:29 GMT; Path=/
    set-cookie: AWSALBCORS=/3ZFJ1ljYdZVVpueuztmZeLiyAzPiZ+m9iRf0L8SZw2Y44fUk6E5IThvk0+5Z+FurdStn9oIWXtqtGWB5ibYLcEU6OlqOWcMCh5W75zpmSks+cT1WNg7YVcEHe; Expires=Wed, 12 May 2021 13:18:29 GMT; Path=/; SameSite=None; Secure
    access-control-allow-origin: https://admin.socket.io
    vary: Origin
    X-Firefox-Spdy: h2
    

    Response body:

    {"code":1,"message":"Session ID unknown"}
    
    opened by Dissfall 6
  • Bengali  (বাংলা) translation

    Bengali (বাংলা) translation

    I am a local (বাংলা) Bengali speaker. Please add these translation files

    enhancement 
    opened by imithu 5
  • Use Nuxt

    Use Nuxt

    use nuxt (vue based framework) instead of vue

    opened by imithu 5
  • Error serialising sockets with session stores

    Error serialising sockets with session stores

    I have an application that shares an express session with socket.io. The session is backed by a redis store. The admin runs fine when the socket.io server starts but crashes when a client connects to the socket.io server.

    ../app/node_modules/notepack.io/lib/encode.js:256
          throw new Error('Could not encode');
          ^
    
    Error: Could not encode
        at _encode (../app/node_modules/notepack.io/lib/encode.js:256:13)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:162:19)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:246:17)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:246:17)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:246:17)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:246:17)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:246:17)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:162:19)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:246:17)
        at _encode (../app/node_modules/notepack.io/lib/encode.js:162:19)
        at Object.encode (../app/node_modules/notepack.io/lib/encode.js:261:41)
        at RedisAdapter.broadcast (../app/node_modules/socket.io-redis/dist/index.js:313:33)
        at BroadcastOperator.emit (../app/node_modules/socket.io/dist/broadcast-operator.js:113:22)
        at Namespace.emit (../app/node_modules/socket.io/dist/namespace.js:168:73)
        at Namespace.<anonymous> (../app/node_modules/@socket.io/admin-ui/dist/index.js:231:24)
        at Namespace.emit (events.js:315:20)
    

    From what I gathered, the crash happens because the socket serialisation in https://github.com/socketio/socket.io-admin-ui/blob/f45342266245fe3fa0049ea7ba556a9e071b056f/lib/index.ts#L349 contains redis related things in socket.handshake:

    {
    ...
    sessionStore: RedisStore {
         _events: [Object: null prototype] {
           disconnect: [Function: ondisconnect],
           connect: [Function: onconnect]
         },
         _eventsCount: 2,
         _maxListeners: undefined,
         prefix: 'sess:',
         scanCount: 100,
         serializer: Object [JSON] {},
         client: RedisClient {
    ...
    }
    

    I'm not quite sure where that sessionStore is added to socket.handshake but maybe socket.io-admin could filter the handshake object based on its interface in https://github.com/socketio/socket.io/blob/b84ed1e41c9053792caf58974c5de9395bfd509f/lib/socket.ts#L64?

    opened by liemnotliam 4
  • added transports option on client connection

    added transports option on client connection

    hi, my socket.io server transport option is "websocket" so i can not connect on admin-ui

    i added the 2 option to connection params

    opened by AtillaPehlivan 3
  • Make socket manager path configurable on connection form

    Make socket manager path configurable on connection form

    Hello,

    Small feature request to make the socket path configurable on the connection form.

    At the moment, 'path' option is not being used and so the socket connection path defaults to '/socket.io'. This makes the tool unusable for anyone not using the default path.

    I have linked to the line of code where the socket is instantiated: https://github.com/socketio/socket.io-admin-ui/blob/eab7bfab64db96ad1ba4b6fb2aea5a3293805a7c/ui/src/App.vue#L93

    Thank you!

    opened by georgedbarr 3
  • Admin UI doesen't seem to work with auth

    Admin UI doesen't seem to work with auth

    If i try to set auth to false it all works as a charm but as soon as i set up auth it stop working. In particoulpar:

    • If i try to connect to https://myserver.com/admin with the correct credentials it gives me "Invalid credetials"
    • If i try to connect to https://myserver.com with the correct credentials it let me in but i have no data in the admin ui

    I've also tried to specify the namespace of /admin with the auth being set but it still gives me invalid credentials.

    I'm using NEXT.js setting up the handler for next in an express server (in the same place i've also set up socket.io.

    opened by paoloricciuti 3
  • Add zh-CN locale

    Add zh-CN locale

    opened by Yuhhang 2
  • Bengali (বাংলা) translation

    Bengali (বাংলা) translation

    I am a local (বাংলা) Bengali speaker. Please add this translation file and code.

    Thank you

    opened by imithu 2
  • Show user's real IP in client tab

    Show user's real IP in client tab

    Updated handshake address to show user's real IP when using Cloudflare and web server like NGINX

    opened by DharmarajX24 2
  • Kills the performance of Socket.io Server

    Kills the performance of Socket.io Server

    My socket server can handle 10K connection easily.

    But when i configured the admin ui ,with namespaceName as "/", socket server can handle max 1K connection and connections starts disconnecting. instrument(io, { auth: false, namespaceName:'/ });

    Have tested it multiple times.

    But if i keep the namespaceName to 'admin' or 'someThingButNot/', it works fine.

    instrument(io, { auth: false, namespaceName:'adminBro' });

    opened by vishwassingh47 1
  • Page unresponsive on 10K Socket Connections

    Page unresponsive on 10K Socket Connections

    Page is not responsive when when large number of sockets are connected (~10K).

    Have tested in 2 scenarios:

    1. Start SocketIO server,Open Admin UI Page, now add load 10K socket connections in realtime, 10K connections are instantly connected on the server but Admin UI Page couldn't keep up with the real count.It then became unresponsive as it is with flooded with realtime docket data.

    2. Start SocketIO server,add load 10K socket connections,now open Admin UI,it will take long to connect and then page became unresponsive.

    Screenshot from 2021-07-07 00-05-10

    opened by vishwassingh47 2
  • xhr poll error when connecting with deployed server

    xhr poll error when connecting with deployed server

    when i try to connect my server from localhost it works and connects with admin UI but when i deployed it on some shared hosting its working fine with the android and react js apps but not connecting with the ADMIN UI of socket it shows the xhr poll error when i want to connect

    opened by MBEDevelopmentTeam 3
  • [Question] Why not Vue 3?

    [Question] Why not Vue 3?

    As the heading suggests, this is more of a question than an issue.

    Why not use vue 3? Is because of Vuetify(since it doesnt have a vue 3 integration yet)?

    question 
    opened by AnoRebel 3
  • logout feature

    logout feature

    add logout feature which will clear the browser local storage


    Thank you

    enhancement 
    opened by imithu 5
  • Detailed Logs in Admin UI

    Detailed Logs in Admin UI

    Hello @darrachequesne

    Thank you for taking the time in improving our experience with Socket.IO. I wanted to ask if there is any chance we can see the detailed logs (both access and error) of our server in Admin UI?

    enhancement 
    opened by fahadpf 2
Releases(0.1.2)
😻 Socket.io implementation for Vuejs and Vuex

Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements Demo Chat Application

Metin Seylan 3.6k Jul 23, 2021
Admin UI for Socket.IO

Admin UI for Socket.IO

Socket.IO 72 Jul 24, 2021
native websocket with vuex integration

vue-native-websocket · native websocket implementation for Vuejs 2 and Vuex Install yarn add vue-native-websocket # or npm install vue-native-websoc

Nathan 848 Jul 21, 2021
Simple websocket (socket.io) plugin for Vue.js

vue-websocket A socket.io plugin for Vue.js. This package does not support native websockets. At the time, we recommend using vue-native-websocket or

Icebob 524 Jul 21, 2021
Vue socket cluster wrapper

Socket cluster implementation for Vuejs 2 leveraging uws Socket cluster documentation Install npm install vue-socket-cluster --save Usage Configuratio

Nigel Tiany 15 Jul 25, 2021
A template combining TypeORM, Express, Socket.io, and NuxtJS with a custom server setup using ts-node. Includes a lot of features to help bootstrap and supercharge your application.

expressive-nuxt Features 99% TypeScript and uses ts-node <3 Database management with TypeORM API with ExpressJS User authenication and sessions Email

Micheal Pearce 23 Jul 19, 2021
Vue integration for the Laravel Echo library.

vue-echo Vue 2 integration for the Laravel Echo library. This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for

Kerstens Maxim 231 Apr 8, 2021