https://socket.io/assets/js/3e36ad0c.d289cd1e.js

1"use strict";(self.webpackChunksample_website=self.webpackChunksample_website||[]).push([[6976],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=p(n),m=i,h=d["".concat(l,".").concat(m)]||d[m]||u[m]||o;return n?a.createElement(h,r(r({ref:t},c),{},{components:n})):a.createElement(h,r({ref:t},c))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,r=new Array(o);r[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[d]="string"==typeof e?e:i,r[1]=s;for(var p=2;p<o;p++)r[p]=n[p];return a.createElement.apply(null,r)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},3540:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var a=n(3117),i=(n(7294),n(3905));const o={title:"Admin UI",sidebar_position:3,slug:"/admin-ui/"},r=void 0,s={unversionedId:"categories/Advanced/admin-ui",id:"categories/Advanced/admin-ui",title:"Admin UI",description:"The Socket.IO admin UI can be used to have an overview of the state of your Socket.IO deployment.",source:"@site/docs/categories/06-Advanced/admin-ui.md",sourceDirName:"categories/06-Advanced",slug:"/admin-ui/",permalink:"/docs/v4/admin-ui/",draft:!1,editUrl:"https://github.com/socketio/socket.io-website/edit/main/docs/categories/06-Advanced/admin-ui.md",tags:[],version:"current",lastUpdatedAt:1784117104,formattedLastUpdatedAt:"Jul 15, 2026",sidebarPosition:3,frontMatter:{title:"Admin UI",sidebar_position:3,slug:"/admin-ui/"},sidebar:"sidebar",previous:{title:"Custom parser",permalink:"/docs/v4/custom-parser/"},next:{title:"Usage with PM2",permalink:"/docs/v4/pm2/"}},l={},p=[{value:"Current features",id:"current-features",level:2},{value:"Installation",id:"installation",level:2},{value:"Server-side",id:"server-side",level:3},{value:"Client-side",id:"client-side",level:3},{value:"Available options",id:"available-options",level:3},{value:"<code>auth</code>",id:"auth",level:4},{value:"<code>namespaceName</code>",id:"namespacename",level:4},{value:"<code>readonly</code>",id:"readonly",level:4},{value:"<code>serverId</code>",id:"serverid",level:4},{value:"<code>store</code>",id:"store",level:4},{value:"<code>mode</code>",id:"mode",level:4},{value:"How it works",id:"how-it-works",level:2},{value:"Latest releases",id:"latest-releases",level:2}],c={toc:p},d="wrapper";

1function u(e){let{components:t,...o}=e;return(0,i.kt)(d,(0,a.Z)({},c,o,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"The Socket.IO admin UI can be used to have an overview of the state of your Socket.IO deployment."),(0,i.kt)("p",null,"The source code can be found here: ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/socketio/socket.io-admin-ui/"},"https://github.com/socketio/socket.io-admin-ui/")),(0,i.kt)("p",null,"Link to the hosted version: ",(0,i.kt)("a",{parentName:"p",href:"https://admin.socket.io/"},"https://admin.socket.io/")),(0,i.kt)("h2",{id:"current-features"},"Current features"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"overview of the servers and the clients that are currently connected")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Screenshot of the dashboard",src:n(6633).Z,width:"1305",height:"704"})),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"details of each socket instance (active transport, handshake, rooms, ...)")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Screenshot of the page displaying the details of a socket",src:n(3762).Z,width:"1589",height:"702"})),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"details of each room")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Screenshot of the page displaying the details of a room",src:n(6804).Z,width:"1589",height:"704"})),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"details of every event emitted or received by the server")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Screenshot of the page displaying the list of events",src:n(7121).Z,width:"1438",height:"841"})),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"administrative operations (join, leave, disconnect)")),(0,i.kt)("p",null,"If you have any feedback / suggestions, do not hesitate!"),(0,i.kt)("h2",{id:"installation"},"Installation"),(0,i.kt)("h3",{id:"server-side"},"Server-side"),(0,i.kt)("p",null,"First, install the ",(0,i.kt)("inlineCode",{parentName:"p"},"@socket.io/admin-ui")," package:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"npm i @socket.io/admin-ui\n")),(0,i.kt)("p",null,"And then invoke the ",(0,i.kt)("inlineCode",{parentName:"p"},"instrument")," method on your Socket.IO server:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'const { createServer } = require("http");\nconst { Server } = require("socket.io");\nconst { instrument } = require("@socket.io/admin-ui");\n\nconst httpServer = createServer();\n\nconst io = new Server(httpServer, {\n  cors: {\n    origin: ["https://admin.socket.io"],\n    credentials: true\n  }\n});\n\ninstrument(io, {\n  auth: false,\n  mode: "development",\n});\n\nhttpServer.listen(3000);\n')),(0,i.kt)("p",null,"The module is compatible with:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Socket.IO v4 server"),(0,i.kt)("li",{parentName:"ul"},"Socket.IO v3 server (>= 3.1.0), but without the operations on rooms (join, leave, disconnection)")),(0,i.kt)("p",null,"Example with ",(0,i.kt)("a",{parentName:"p",href:"https://docs.nestjs.com/websockets/gateways"},"NestJS"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},'import { instrument } from "@socket.io/admin-ui";\n\n@WebSocketGateway()\nexport class MyGateway {\n    // ...\n    afterInit() {\n        instrument(this.server, {\n            auth: false,\n            mode: "development",\n        });\n    }\n}\n')),(0,i.kt)("h3",{id:"client-side"},"Client-side"),(0,i.kt)("p",null,"You can then head up to ",(0,i.kt)("a",{parentName:"p",href:"https://admin.socket.io"},"https://admin.socket.io"),", or host the files found in the ",(0,i.kt)("inlineCode",{parentName:"p"},"ui/dist")," folder ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/socketio/socket.io-admin-ui/tree/main/ui/dist"},"here"),"."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Important note"),": the website at ",(0,i.kt)("a",{parentName:"p",href:"https://admin.socket.io"},"https://admin.socket.io")," is totally static (hosted on ",(0,i.kt)("a",{parentName:"p",href:"https://vercel.com"},"Vercel"),"), we do not (and will never) store any information about yourself or your browser (no tracking, no anal

1ytics, ...). That being said, hosting the files yourself is totally fine."),(0,i.kt)("p",null,"You should see the following modal:"),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"login modal screenshot",src:n(168).Z,width:"357",height:"367"})),(0,i.kt)("p",null,"Please enter the URL of your server (for example, ",(0,i.kt)("inlineCode",{parentName:"p"},"http://localhost:3000")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"https://example.com"),") and the credentials, if applicable (see the ",(0,i.kt)("inlineCode",{parentName:"p"},"auth")," option ",(0,i.kt)("a",{parentName:"p",href:"#auth"},"below"),")."),(0,i.kt)("h3",{id:"available-options"},"Available options"),(0,i.kt)("h4",{id:"auth"},(0,i.kt)("inlineCode",{parentName:"h4"},"auth")),(0,i.kt)("p",null,"Default value: ",(0,i.kt)("inlineCode",{parentName:"p"},"-")),(0,i.kt)("p",null,"This option is mandatory. You can either disable authentication (please use with caution):"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"instrument(io, {\n  auth: false\n});\n")),(0,i.kt)("p",null,"Or use basic authentication:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'instrument(io, {\n  auth: {\n    type: "basic",\n    username: "admin",\n    password: "$2b$10$heqvAkYMez.Va6Et2uXInOnkCT6/uQj1brkrbyG3LpopDklcq7ZOS" // "changeit" encrypted with bcrypt\n  },\n});\n')),(0,i.kt)("admonition",{type:"caution"},(0,i.kt)("p",{parentName:"admonition"},"Please note that the ",(0,i.kt)("inlineCode",{parentName:"p"},"bcrypt")," package does not currently support hashes starting with the ",(0,i.kt)("inlineCode",{parentName:"p"},"$2y$")," prefix, which is used by some BCrypt implementations (for example ",(0,i.kt)("a",{parentName:"p",href:"https://bcrypt-generator.com/"},"https://bcrypt-generator.com/")," or ",(0,i.kt)("a",{parentName:"p",href:"https://www.bcrypt.fr/"},"https://www.bcrypt.fr/"),"). You can check the validity of the hash with:"),(0,i.kt)("pre",{parentName:"admonition"},(0,i.kt)("code",{parentName:"pre"},'$ node\n> require("bcryptjs").compareSync("<the password>", "<the hash>")\ntrue\n')),(0,i.kt)("p",{parentName:"admonition"},"You can generate a valid hash with:"),(0,i.kt)("pre",{parentName:"admonition"},(0,i.kt)("code",{parentName:"pre"},'$ node\n> require("bcryptjs").hashSync("changeit", 10)\n\'$2b$10$LQUE...\'\n')),(0,i.kt)("p",{parentName:"admonition"},"See also:"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/kelektiv/node.bcrypt.js/issues/849"},"https://github.com/kelektiv/node.bcrypt.js/issues/849")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://stackoverflow.com/a/36225192/5138796"},"https://stackoverflow.com/a/36225192/5138796")))),(0,i.kt)("h4",{id:"namespacename"},(0,i.kt)("inlineCode",{parentName:"h4"},"namespaceName")),(0,i.kt)("p",null,"Default value: ",(0,i.kt)("inlineCode",{parentName:"p"},"/admin")),(0,i.kt)("p",null,"The name of the namespace which will be created to handle the administrative tasks."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'instrument(io, {\n  namespaceName: "/custom"\n});\n')),(0,i.kt)("p",null,"This namespace is a classic Socket.IO namespace, you can access it with:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'const adminNamespace = io.of("/admin");\n')),(0,i.kt)("p",null,"More information ",(0,i.kt)("a",{parentName:"p",href:"/docs/v4/namespaces/"},"here"),"."),(0,i.kt)("h4",{id:"readonly"},(0,i.kt)("inlineCode",{parentName:"h4"},"readonly")),(0,i.kt)("p",null,"Default value: ",(0,i.kt)("inlineCode",{parentName:"p"},"false")),(0,i.kt)("p",null,"Whether to put the admin UI in read-only mode (no join, leave or disconnect allowed)."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"instrument(io, {\n  readonly: true\n});\n")),(0,i.kt)("h4",{id:"serverid"},(0,i.kt)("inlineCode",{parentName:"h4"},"serverId")),(0,i.kt)("p",null,"Default value: ",(0,i.kt)("inlineCode",{parentName:"p"},'require("os").hostname()')),(0,i.kt)("p",null,"The ID of the given server. If you have several Socket.IO servers on the same machine, you'll need to give them a distinct ID:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'instrument(io, {\n  serverId: `${require("os").hostname()}#${process.pid}`\n});\n')),(0,i.kt)("h4",{id:"store"},(0,i.kt)("inlineCode",{parentName:"h4"},"store")),(0,i.kt)("p",null,"Default value: ",(0,i.kt)("inlineCode",{parentName:"p"},"new InMemoryStore()")),(0,i.kt)("p",null,"The store is used to store the session IDs so the user do not have to retype the credentials upon reconnection."),(0,i.kt)("p",null,"If you use basic authentication in a multi-server setup, you should provide a custom store:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'const { instrument, RedisStore } = require("@socket.io/admin-ui");\n\ninstrument(io, {\n  store: new RedisStore(redisClient)\n});\n')),(0,i.kt)("h4",{id:"mode"},(0,i.kt)("inlineCode",{parentName:"h4"},"mode")),(0,i.kt)("p",null,"Default value: ",(0,i.kt)("inlineCode",{parentName:"p"},"development")),(0,i.kt)("p",null,"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."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'instrument(io, {\n  mode: "production"\n});\n')),(0,i.kt)("p",null,"The production mode can also be enabled with the NODE_ENV environment variable:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"NODE_ENV=production node index.js\n")),(0,i.kt)("h2",{id:"how-it-works"}

1,"How it works"),(0,i.kt)("p",null,"The source code can be found here: ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/socketio/socket.io-admin-ui/"},"https://github.com/socketio/socket.io-admin-ui/")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"instrument")," method simply:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"creates a ",(0,i.kt)("a",{parentName:"li",href:"/docs/v4/namespaces/"},"namespace")," and adds an authentication ",(0,i.kt)("a",{parentName:"li",href:"/docs/v4/middlewares/"},"middleware")," if applicable"),(0,i.kt)("li",{parentName:"ul"},"register listeners for the ",(0,i.kt)("inlineCode",{parentName:"li"},"connection")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"disconnect")," events for each existing namespaces to track the socket instances"),(0,i.kt)("li",{parentName:"ul"},"register a timer which will periodically send stats from the server to the UI"),(0,i.kt)("li",{parentName:"ul"},"register handlers for the ",(0,i.kt)("inlineCode",{parentName:"li"},"join"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"leave")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"_disconnect")," commands sent from the UI")),(0,i.kt)("h2",{id:"latest-releases"},"Latest releases"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"0.5.1")," (Oct 2022): ",(0,i.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-admin-ui/releases/tag/0.5.1"},"GitHub release")," / ",(0,i.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-admin-ui/compare/0.5.0...0.5.1"},"diff")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"0.5.0")," (Sep 2022): ",(0,i.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-admin-ui/releases/tag/0.5.0"},"GitHub release")," / ",(0,i.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-admin-ui/compare/0.4.0...0.5.0"},"diff")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"0.4.0")," (Jun 2022): ",(0,i.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-admin-ui/releases/tag/0.4.0"},"GitHub release")," / ",(0,i.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-admin-ui/compare/0.3.0...0.4.0"},"diff"))))}u.isMDXComponent=!0},6633:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/admin-ui-dashboard-8df87956c18a60717867ef800c1bc9c2.png"},7121:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/admin-ui-events-89ff24243c327109a8455375ccc78868.png"},168:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/admin-ui-login-modal-a8a4dea1ffc70eb0783445ad8c7bbb8d.png"},6804:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/admin-ui-room-details-012287cf23321c935d3fee19cca401c9.png"},3762:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/admin-ui-socket-details-38d032b6617a39a0769b93f8f3518e9d.png"}}]);