https://socket.io/assets/js/93fc56f9.abfee73a.js

1"use strict";(self.webpackChunksample_website=self.webpackChunksample_website||[]).push([[7096],{3905:(e,r,t)=>{t.d(r,{Zo:()=>d,kt:()=>g});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function s(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=n.createContext({}),c=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):a(a({},r),e)),t},d=function(e){var r=c(e.components);return n.createElement(l.Provider,{value:r},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},v=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),u=c(t),v=o,g=u["".concat(l,".").concat(v)]||u[v]||p[v]||i;return t?n.createElement(g,a(a({ref:r},d),{},{components:t})):n.createElement(g,a({ref:r},d))}));function g(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var i=t.length,a=new Array(i);a[0]=v;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s[u]="string"==typeof e?e:o,a[1]=s;for(var c=2;c<i;c++)a[c]=t[c];return n.createElement.apply(null,a)}return n.createElement.apply(null,t)}v.displayName="MDXCreateElement"},7967:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=t(3117),o=(t(7294),t(3905));const i={title:"Application structure",sidebar_position:9,slug:"/server-application-structure/"},a=void 0,s={unversionedId:"categories/Server/server-structure",id:"version-3.x/categories/Server/server-structure",title:"Ap

1plication structure",description:"Registering event handlers",source:"@site/versioned_docs/version-3.x/categories/02-Server/server-structure.md",sourceDirName:"categories/02-Server",slug:"/server-application-structure/",permalink:"/docs/v3/server-application-structure/",draft:!1,editUrl:"https://github.com/socketio/socket.io-website/edit/main/versioned_docs/version-3.x/categories/02-Server/server-structure.md",tags:[],version:"3.x",lastUpdatedAt:1784117104,formattedLastUpdatedAt:"Jul 15, 2026",sidebarPosition:9,frontMatter:{title:"Application structure",sidebar_position:9,slug:"/server-application-structure/"},sidebar:"version-3.x/sidebar",previous:{title:"Handling CORS",permalink:"/docs/v3/handling-cors/"},next:{title:"Installation",permalink:"/docs/v3/client-installation/"}},l={},c=[{value:"Registering event handlers",id:"registering-event-handlers",level:2},{value:"Each file registers its own event handlers",id:"each-file-registers-its-own-event-handlers",level:3},{value:"All event handlers are registered in the <code>index.js</code> file",id:"all-event-handlers-are-registered-in-the-indexjs-file",level:3}],d={toc:c},u="wrapper";function p(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},d,t,{components:r,mdxType:"MDXLayout"}),(0,o.kt)("h2",{id:"registering-event-handlers"},"Registering event handlers"),(0,o.kt)("p",null,"You will find below two suggestions on how to register your event handlers."),(0,o.kt)("p",null,"Please note that these are merely suggestions and not strict guidelines that you must follow. Please adapt it to your own liking!"),(0,o.kt)("h3",{id:"each-file-registers-its-own-event-handlers"},"Each file registers its own event handlers"),(0,o.kt)("p",null,"Here, the entrypoint is kept tidy, but the event listeners may be less discoverable (though strong naming convention/ctrl+f will help)."),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"index.js")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'const httpServer = require("http").createServer();\nconst io = require("socket.io")(httpServer);\n\nconst registerOrderHandlers = require("./orderHandler");\nconst registerUserHandlers = require("./userHandler");\n\nconst onConnection = (socket) => {\n  registerOrderHandlers(io, socket);\n  registerUserHandlers(io, socket);\n}\n\nio.on("connection", onConnection);\n')),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"orderHandler.js")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'module.exports = (io, socket) => {\n  const createOrder = (payload) => {\n    // ...\n  }\n\n  const readOrder = (orderId, callback) => {\n    // ...\n  }\n\n  socket.on("order:create", createOrder);\n  socket.on("order:read", readOrder);\n}\n')),(0,o.kt)("h3",{id:"all-event-handlers-are-registered-in-the-indexjs-file"},"All event handlers are registered in the ",(0,o.kt)("inlineCode",{parentName:"h3"},"index.js")," file"),(0,o.kt)("p",null,"Here, each event name is located in the same place, which is great for discoverability, but could get out of hand in a medium/big application."),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"index.js")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'const httpServer = require("http").createServer();\nconst io = require("socket.io")(httpServer);\n\nconst { createOrder, readOrder } = require("./orderHandler")(io);\nconst { updatePassword } = require("./userHandler")(io);\n\nconst onConnection = (socket) => {\n  socket.on("order:create", createOrder);\n  socket.on("order:read", readOrder);\n\n  socket.on("user:update-password", updatePassword);\n}\n\nio.on("connection", onConnection);\n')),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"orderHandler.js")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"module.exports = (io) => {\n  const createOrder = function (payload) {\n    const socket = this; // hence the 'function' above, as an arrow function will not work\n    // ...\n  };\n\n  const readOrder = function (orderId, callback) {\n    // ...\n  };\n\n  return {\n    createOrder,\n    readOrder\n  }\n}\n")))}p.isMDXComponent=!0}}]);