Admin UI for Socket.IO

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

Comments
  • "Error: Could not encode" when set mode "development"

    I notice I only have dashboard and servers menu after login

    I think this is because start my nodejs using "NODE_ENV=production node index.js" so I set mode code specifically in code

    instrument(io, {
      auth: {
         ...
      },
      mode: "development"
    });
    

    But then server crash with error

    Error: Could not encode
     at _encode (/home/express/node_modules/notepack.io/lib/encode.js:256:13)
     at _encode (/home/express/node_modules/notepack.io/lib/encode.js:162:19)
     at _encode (/home/express/node_modules/notepack.io/lib/encode.js:162:19)
     at _encode (/home/express/node_modules/notepack.io/lib/encode.js:246:17)
     at _encode (/home/express/node_modules/notepack.io/lib/encode.js:162:19)
     at Object.encode (/home/express/node_modules/notepack.io/lib/encode.js:261:41)
     at RedisAdapter.broadcast (/home/express/node_modules/socket.io-redis/dist/index.js:313:33)
     at BroadcastOperator.emit (/home/express/node_modules/socket.io/dist/broadcast-operator.js:109:22)
     at Namespace.emit (/home/express/node_modules/socket.io/dist/namespace.js:170:73)
     at Socket.<anonymous> (/home/express/node_modules/@socket.io/admin-ui/dist/index.js:284:36)
    

    I searched this error and found someone else also hit this error

    https://bestofvue.com/repo/socketio-socket-io-admin-ui-vuejs-web-sockets (at "7. Error serialising sockets with session stores")

    bug 
    opened by qiulang 9
  • 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 9
  • 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 7
  • 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 5
  • Feature request - callback for authentication

    Feature request - callback for authentication

    Hi

    I have embedded the ui in my app which features a role-based authentication (roles "user" and "admin"). As there are more then one user which should have the ability to connect to the ui, is there a callback or similar i can use for authentication?

    I thought about connecting the ui to my userRole so that only users with userRole.admin can connect (if they authenticate correctly).

    Best, Thomas

    question 
    opened by Thomas-1985 4
  • Admin UI Not Showing All Servers

    Admin UI Not Showing All Servers

    Hello there,

    I have implemented my Socket.io server using multiple nodes. My script starts 4 Socket.io servers at a time, and all these servers are connected via the MongoDB adapter. An Nginx server works as a reverse proxy between my servers and the users, and my clients are connecting to my server using the WebSocket transport because the Nginx sticky sessions never worked for me for whatever reason. Due to the shortage of time, I skipped setting up the sticky sessions at that moment and proceeded with only WebSocket transport.

    One other thing worth mentioning here is that my local development server, and the production server, both are connected to the same capped collection of MongoDB for listening to the adapter events.

    Now the problem is, whenever I try to connect Admin UI with my Socket.io server, it connects successfully. But it only shows me stats for that one specific instance of Socket.io server with which Admin UI is connected. To my surprise, I see my local development (Socket.io) server, when it is running locally, listed in the list of servers. Although I connect my Admin UI specifically with the URL of my production app URL.

    Can you please help me figure out what is happening here? Why my all production servers are not being listed in Admin UI, and why am I seeing my local dev server in the list of production servers?

    question 
    opened by heyFahad 4
  • Retrieve

    Retrieve "socket.data" from sockets

    https://github.com/socketio/socket.io-admin-ui/blob/main/lib/index.ts#L338-L366

    Why is data not included? All custom data are added to socket.data since v4 I believe.

    enhancement 
    opened by y4my4my4m 4
  • 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
  • Cannot read property 'on' of undefined

    Cannot read property 'on' of undefined

    I'am trying to get admin-ui to work, but I always get this error from the node_module, when inserting:

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

    Any ideas to fix this?

    [INFO] 17:33:57 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.1, typescript ver. 4.7.4) TypeError: Cannot read property 'on' of undefined at registerEngineListeners (/Volumes/Privat/Code/projects/socketio-server/node_modules/@socket.io/admin-ui/dist/index.js:366:15) at instrument (/Volumes/Privat/Code/projects/socketio-server/node_modules/@socket.io/admin-ui/dist/index.js:424:5) at Object.<anonymous> (/Volumes/Privat/Code/projects/socketio-server/src/index.ts:48:11) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Module._compile (/Volumes/Privat/Code/projects/socketio-server/node_modules/source-map-support/source-map-support.js:568:25) at Module.m._compile (/private/var/folders/73/1v90d1r53836q4zfl33hpb400000gp/T/ts-node-dev-hook-5528744062605151.js:69:33) at Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at require.extensions..jsx.require.extensions..js (/private/var/folders/73/1v90d1r53836q4zfl33hpb400000gp/T/ts-node-dev-hook-5528744062605151.js:114:20) at require.extensions.<computed> (/private/var/folders/73/1v90d1r53836q4zfl33hpb400000gp/T/ts-node-dev-hook-5528744062605151.js:71:20) at Object.nodeDevHook [as .ts] (/Volumes/Privat/Code/projects/socketio-server/node_modules/ts-node-dev/lib/hook.js:63:13) [ERROR] 17:33:57 TypeError: Cannot read property 'on' of undefined

    bug 
    opened by luettgau 3
  • Admin UI not connecting with parser option ( socket.io-msgpack-parser )

    Admin UI not connecting with parser option ( socket.io-msgpack-parser )

    When the parser option is passed, the admin UI is not conneting.

    socket.io-msgpack-parser : 3.0.1 socket.io 4.2.0 socket.io-client 4.2.0 Trying to access admin UI through https://admin.socket.io/

    enhancement 
    opened by merndev 3
  • How to use it with redis Adapter?

    How to use it with redis Adapter?

    If we have multiple servers running on different ports and those attached with Redis Adapter, how can we show the combined view of all the servers at the same page in admin UI?

    documentation 
    opened by jayd36 3
  • Dashboard does not show all tabs and data

    Dashboard does not show all tabs and data

    image

    I googled and could not find any solution to my problem so please help me out.

    I am using strapi v4 inside the index.js bootstrap function I defined my sockets. They are working with no problems.

    I wanted to launch admin.socket.io to start implementing some more logic, but when connected to the admin dashboard I don't see much. only two tabs.

    index.js file

    "use strict";
    module.exports = {
      /**
       * An asynchronous register function that runs before
       * your application is initialized.
       *
       * This gives you an opportunity to extend code.
       */
      register(/*{ strapi }*/) { },
    
      /**
       * An asynchronous bootstrap function that runs before
       * your application gets started.
       *
       * This gives you an opportunity to set up your data model,
       * run jobs, or perform some special logic.
       */
      bootstrap({ strapi }) {
        const io = require("socket.io")(strapi.server.httpServer, {
          cors: {
            origin: ["https://admin.socket.io"],
            credentials: true
          },
        });
    
        const { instrument } = require('@socket.io/admin-ui');
    
        io.on("connection", function (socket) {
          console.log(`Connected ${socket.id}`);
        });
    
        strapi.io = io;
        instrument(io, { auth: false });
      },
    };
    
    opened by lt692 1
  • admin ui completely breaks my application

    admin ui completely breaks my application

    when initializing the admin ui, my application is unable to do anything. it can't even do console.log() when a user connects. I am sure the user connects and even the admin ui says that a user has connected. Furthermore, all functions do not work, the app can't seem to broadcast or callback, but the ui does say that the event was received

    Also I can't connect to any name spaces when I use the admin ui. I seriously have no idea why any of this happens

    question 
    opened by scaevitas 1
  • Feature Request - Receive and emit messages from the UI

    Feature Request - Receive and emit messages from the UI

    Hi

    Currently the admin-ui let us gather useful information about connected sockets, rooms for a targeted server…

    What do you envision as the next steps?

    I think this would be very useful if it we could display all messages received in a room and also offer the possibility to emit messages to it. This way it would allow to gather even more clues about what's happening during a debug session and test various behaviors.

    Thanks a lot for this tool

    enhancement 
    opened by Delapouite 2
  • cors error

    cors error

    I want to connect client web page for socketIO and admin-ui to socketIO server. But the error appears.

    When I use this code below, the client web disconnects with cors error.

    const io = new Server(httpServer, { cors: { origin: "https://admin.socket.io", }, }); instrument(io, { auth: false, });

    Of course, I did like this, and "xhr poll error" happens on admin-ui.

    const io = new Server(httpServer, { cors: { origin: "*", // and I did ["https://admin.socket.io","*"] instead of this }, }); instrument(io, { auth: false, });

    does admin-ui supports only local environment?

    question 
    opened by GeonwooDev 6
  • [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 it because of Vuetify(since it doesnt have a vue 3 integration yet)?

    question 
    opened by AnoRebel 5
Releases(0.5.1)
😻 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.9k Jan 5, 2023
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 532 Dec 17, 2022
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 31 Dec 27, 2022
Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas.

?? Astro Chat ?? Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas. Contents Demo Tech Stack Features

Lu-Vuong Le 88 Jan 3, 2023
socket.io와 Vue.js로 구현한 채팅 서비스

개요 : socket.io와 Vue.js로 구현한 채팅 서비스 기간 : 2021.12.22 ~ 2021.12.23 회고 $ cd backend $ npm install $ npm run start $ cd frontend $ npm install $ npm run se

YeonHee 35 Oct 14, 2022
Nodejs + Typescript + Socket.io

CALDAV ?? Required: ?? Nodejs LTS, Python 2.7 or Python 3.x, Docker, MtSQL or the same If you get errors, please read the report file .doc, there will

null 2 May 2, 2022
Colubrina - a simple open source chat platform written in Vue, Vuetify, NodeJS, and Socket.io.

Colubrina You can try a public instance of Colubrina at colubrina.troplo.com. This is currently beta software, and may not work as expected. Please fi

null 8 Nov 27, 2022
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
:v::zap: Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)

Vue-Socket.io-Extended Socket.io bindings for Vue.js 2 and Vuex (inspired by Vue-Socket.io) ⚠️ The alpha version of v5 (with Vue 3 support) has been r

Max Lyashuk 629 Jan 4, 2023
Admin UI for Socket.IO

Socket.IO Admin UI Table of contents How to use Server-side Client-side Available options auth namespaceName readonly serverId store How it works Lice

Socket.IO 228 Dec 25, 2022
Admin UI for Socket.IO

Admin UI for Socket.IO

Socket.IO 228 Dec 25, 2022
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

BootstrapDash 310 Dec 25, 2022
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

null 21 Dec 26, 2022
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

Ones 80 Dec 16, 2022
Multiplayer online chess game use Vue , Nodejs, Webpack, Em6, Socket.io, Mongodb, Express

VueChess Users can create private or public games against other real-time player or against the computer by choosing color, time and type of starting,

Gustavo Crespo Sanchez 405 Dec 20, 2022
vue2.x + vue-router2.x+ vuex2.x + vux2.x + express + socket.io immediate chat room

socket.io immediate chat room 中文文档 online preview(username: blue, password: huimin) glance login page group chat page others list private chat page in

blue 43 Jan 22, 2022
😻 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.9k Jan 5, 2023
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 532 Dec 17, 2022
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