{"id":35255,"date":"2025-02-17T18:58:22","date_gmt":"2025-02-17T13:28:22","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=35255"},"modified":"2025-12-30T18:06:27","modified_gmt":"2025-12-30T12:36:27","slug":"websockets-server-nodejs-socketio-tutorial","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial","title":{"rendered":"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)"},"content":{"rendered":"<p>WebSockets are an essential technology for real-time applications, enabling seamless two-way communication between clients and servers. Whether you&#8217;re building a chat app, live notification system, or multiplayer game, WebSockets allow data to flow instantly between users.<br>In this tutorial, we&#8217;ll walk you through setting up a WebSocket server with Socket.io in a Node.js environment using TypeScript. Socket.io is one of the most popular libraries for real-time web applications and provides an easy way to handle WebSockets.<br>In this tutorial, we&#8217;ll cover two main examples :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Basic Example<\/strong>: Broadcasting messages to all clients.<\/li>\n\n\n\n<li><strong>Advanced Example<\/strong>: Implementing chat rooms (groups) for specific communication.<\/li>\n<\/ul>\n\n\n\n<p>This repository contains the code for the tutorial: <a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/angular-signals-architecture-best-practices\">Angular Signals<\/a> Guide: Architectural Patterns and Best Practices for Using Signals in Angular Applications by Mobisoft, Web Application Development Company, Houston<\/p>\n\n\n\n<p>The code for this tutorial is available in this <a href=\"https:\/\/github.com\/mobisoftinfotech\/websocket-node-js-socket-io-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Github repository<\/strong><\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Introduction to WebSockets and Socket.io<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1200\" height=\"807\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/websocket-vs-http-comparison-real-time.png\" alt=\"WebSocket vs HTTP comparison for real-time data transfer\" class=\"wp-image-35280\" title=\"WebSocket vs HTTP: Which is Best for Real-Time Communication?\"><\/noscript><img decoding=\"async\" width=\"1200\" height=\"807\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20807%22%3E%3C%2Fsvg%3E\" alt=\"WebSocket vs HTTP comparison for real-time data transfer\" class=\"wp-image-35280 lazyload\" title=\"WebSocket vs HTTP: Which is Best for Real-Time Communication?\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/websocket-vs-http-comparison-real-time.png\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>What are WebSockets?<\/strong><\/h4>\n\n\n\n<p>WebSockets enable two-way communication between the client and server over a single, long-lived connection. Unlike traditional HTTP requests, which are request-response-based, WebSockets allow data to be sent between the client and server at any time. This makes WebSockets perfect for real-time applications like chat apps, live notifications, gaming platforms, and more.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Why Socket.io?<\/strong><\/h4>\n\n\n\n<p>Socket.io is a powerful library that makes working with real-time communication in Node.js applications much easier. It simplifies the process of connecting users and allowing them to communicate instantly, using WebSockets or other protocols as needed.<br>Key benefits include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WebSocket Abstraction<\/strong>: Easily manage WebSocket connections without the complexity.<\/li>\n\n\n\n<li><strong>Fallback Support<\/strong>: Automatically switches to long polling if WebSockets aren\u2019t available.<\/li>\n\n\n\n<li><strong>Room Management<\/strong>: Create rooms for users to join, enabling group-specific communication.<\/li>\n\n\n\n<li><strong>Automatic Reconnection<\/strong>: Socket.io automatically reconnects if the connection is lost.<\/li>\n<\/ul>\n\n\n\n<p>In this tutorial, we\u2019ll use <strong>Socket.io<\/strong> to implement both basic and advanced functionalities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Setting up the Project<\/strong><\/h3>\n\n\n\n<p>Let\u2019s start by setting up the project environment using Node.js, Express, and Socket.io.<\/p>\n\n\n\n<p><strong>Prerequisites<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js installed (if you don\u2019t have it, download it from <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>here<\/strong><\/a>).<\/li>\n\n\n\n<li>Basic knowledge of Node.js, TypeScript, and npm.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1: Initialize the Project<\/strong><\/h4>\n\n\n\n<p>Create a new directory for your project:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">mkdir node-socketio-project<\/code><\/span><\/pre>\n\n\n<p>Move into the project directory:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">cd node-socketio-project<\/code><\/span><\/pre>\n\n\n<p>Initialize the node project:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm init -y<\/code><\/span><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 2: Install Dependencies<\/strong><\/h4>\n\n\n\n<p>Install the core dependencies for the Express framework and Socket.IO:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">express<\/span> <span class=\"hljs-selector-tag\">socket<\/span><span class=\"hljs-selector-class\">.io<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Install <strong>TypeScript<\/strong> and necessary type definitions:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">--save-dev<\/span> <span class=\"hljs-selector-tag\">typescript<\/span> <span class=\"hljs-selector-tag\">ts-node<\/span> <span class=\"hljs-keyword\">@types<\/span>\/express<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>TypeScript Configuration<\/strong><\/h4>\n\n\n\n<p>Generate a TypeScript configuration file by running:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx tsc --init<\/code><\/span><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Basic Example: Emit Messages to All Clients<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1: Set Up Basic Express Server with Socket.io<\/strong><\/h4>\n\n\n\n<p>Create the <code>src\/index.ts<\/code> file and set up a basic WebSocket server using Express and Socket.io. This server will broadcast messages to all connected clients using Socket.io.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> express <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"express\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> http <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"http\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { Server } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"socket.io\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { handleMessage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/controllers\/socket-controller\"<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> app = express()\n\n<span class=\"hljs-keyword\">const<\/span> server = http.createServer(app)\n\n<span class=\"hljs-keyword\">const<\/span> io = <span class=\"hljs-keyword\">new<\/span> Server(server) <span class=\"hljs-comment\">\/\/ Initialize Socket.io on the server<\/span>\n\napp.use(express.static(<span class=\"hljs-string\">\"public\"<\/span>))\n\napp.get(<span class=\"hljs-string\">\"\/\"<\/span>, (req, res) =&gt; {\n\n&nbsp;&nbsp;res.sendFile(__dirname + <span class=\"hljs-string\">\"\/public\/index.html\"<\/span>)\n\n})\n\n<span class=\"hljs-comment\">\/\/Handle new connections from clients<\/span>\n\nio.on(<span class=\"hljs-string\">\"connection\"<\/span>, (socket) =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"A new client connected\"<\/span>)\n\n&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Handle messages from the client<\/span>\n\n&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"message\"<\/span>, (msg) =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;handleMessage(socket, msg)\n\n&nbsp;&nbsp;})\n\n&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"disconnect\"<\/span>, () =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Client disconnected\"<\/span>)\n\n&nbsp;&nbsp;})\n\n})\n\n<span class=\"hljs-keyword\">const<\/span> PORT = process.env.PORT || <span class=\"hljs-number\">3000<\/span>\n\nserver.listen(PORT, () =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Server is running on port <span class=\"hljs-subst\">${PORT}<\/span>`<\/span>)\n\n})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Explanation:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This code sets up an <strong>Express<\/strong> server and integrates it with <strong>Socket.io<\/strong>.&nbsp;<\/li>\n\n\n\n<li>It listens for incoming <strong>WebSocket<\/strong> connections and provides an endpoint (\/) to serve the <code>index.html<\/code> file.&nbsp;<\/li>\n\n\n\n<li>When a client connects, the server listens for messages from that client and invokes the <code>handleMessage <\/code>function.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 2: Create the Socket Controller<\/strong><\/h4>\n\n\n\n<p>In <code>src\/controllers\/socket-controller.ts<\/code>, define the logic for handling messages:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { Socket } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'socket.io'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> handleMessage = <span class=\"hljs-function\">(<span class=\"hljs-params\">socket: Socket, message: string<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Message from client:'<\/span>, message)\n\n&nbsp;&nbsp;socket.broadcast.emit(<span class=\"hljs-string\">'message'<\/span>, message)\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Explanation:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This controller handles the messages that clients send to the server.&nbsp;<\/li>\n\n\n\n<li>It logs the received message and broadcasts it to all other connected clients using <code>socket.broadcast.emit()<\/code>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Advanced Example: Chat Rooms (Groups)<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1: Update Socket Controller to Handle Rooms<\/strong><\/h4>\n\n\n\n<p>In <code>src\/controllers\/socket-controller.ts<\/code>, modify the code to add room functionality:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { Socket } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'socket.io'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> handleMessage = <span class=\"hljs-function\">(<span class=\"hljs-params\">socket: Socket, message: string<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Message from client:'<\/span>, message)\n\n&nbsp;&nbsp;socket.broadcast.emit(<span class=\"hljs-string\">'message'<\/span>, message)\n\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> joinRoom = <span class=\"hljs-function\">(<span class=\"hljs-params\">socket: Socket, room: string<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;socket.join(room)\n\n&nbsp;&nbsp;socket.emit(<span class=\"hljs-string\">'joinMessageToRoom'<\/span>, <span class=\"hljs-string\">`You have joined the room: <span class=\"hljs-subst\">${room}<\/span>`<\/span>)\n\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> sendMessageToRoom = <span class=\"hljs-function\">(<span class=\"hljs-params\">socket: Socket, room: string, message: string<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;socket.to(room).emit(<span class=\"hljs-string\">'sendMessageToRoom'<\/span>,room, message)\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Explanation:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In addition to broadcasting messages globally, this controller introduces functions for joining specific rooms and sending messages to clients within a room.<\/li>\n\n\n\n<li><code>joinRoom <\/code>allows a client to join a room.<\/li>\n\n\n\n<li><code>sendMessageToRoom <\/code>broadcasts a message only to clients in that room.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 2: Update Server Logic to Handle Room Messages<\/strong><\/h4>\n\n\n\n<p>In <code>src\/index.ts<\/code>, add the logic to handle room-related events:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> express <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"express\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> http <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"http\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { Server } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"socket.io\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> {\n\n&nbsp;&nbsp;handleMessage,\n\n&nbsp;&nbsp;joinRoom,\n\n&nbsp;&nbsp;sendMessageToRoom,\n\n} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/controllers\/socket-controller\"<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> app = express()\n\n<span class=\"hljs-keyword\">const<\/span> server = http.createServer(app)\n\n<span class=\"hljs-keyword\">const<\/span> io = <span class=\"hljs-keyword\">new<\/span> Server(server) <span class=\"hljs-comment\">\/\/ Initialize Socket.io on the server<\/span>\n\napp.use(express.static(<span class=\"hljs-string\">\"public\"<\/span>))\n\napp.get(<span class=\"hljs-string\">\"\/\"<\/span>, (req, res) =&gt; {\n\n&nbsp;&nbsp;res.sendFile(__dirname + <span class=\"hljs-string\">\"\/public\/index.html\"<\/span>)\n\n})\n\nio.on(<span class=\"hljs-string\">\"connection\"<\/span>, (socket) =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"A new client connected\"<\/span>)\n\n&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"message\"<\/span>, (msg) =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;handleMessage(socket, msg)\n\n&nbsp;&nbsp;})\n\n&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"joinRoom\"<\/span>, (roomName: string) =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;joinRoom(socket, roomName)\n\n&nbsp;&nbsp;})\n\n&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"sendMessageToRoom\"<\/span>, (roomName: string, <span class=\"hljs-attr\">message<\/span>: string) =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;sendMessageToRoom(socket, roomName, message)\n\n&nbsp;&nbsp;})\n\n&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"disconnect\"<\/span>, () =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Client disconnected\"<\/span>)\n\n&nbsp;&nbsp;})\n\n})\n\n<span class=\"hljs-keyword\">const<\/span> PORT = process.env.PORT || <span class=\"hljs-number\">3000<\/span>\n\nserver.listen(PORT, () =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Server is running on port <span class=\"hljs-subst\">${PORT}<\/span>`<\/span>)\n\n})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/nodejs-development-company?utm_source=blog_cta&#038;utm_campaign=websockets-server-nodejs-socketio-tutorial-cta\"><noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta01-unlock-nodejs-development-business.png\" alt=\"Unlock expert Node.js development for your business with professional developers\" class=\"wp-image-35283\" title=\"Unlock Expert Node.js Development for Your Business\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20150%22%3E%3C%2Fsvg%3E\" alt=\"Unlock expert Node.js development for your business with professional developers\" class=\"wp-image-35283 lazyload\" title=\"Unlock Expert Node.js Development for Your Business\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta01-unlock-nodejs-development-business.png\"><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Client-Side Code and Interaction<\/strong><\/h3>\n\n\n\n<p>In <code>src\/public\/index.html<\/code>, allow users to interact with both broadcast messages and chat rooms functionalities. Socket.io listens for incoming messages on the client-side and displays them appropriately.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Socket.io Chat Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/socket.io\/socket.io.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> socket = io();\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">let<\/span> currentRoom = <span class=\"hljs-string\">''<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Receive messages from all clients<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"message\"<\/span>, msg =&gt; displayMessage(<span class=\"hljs-string\">\"Received: \"<\/span> + msg, <span class=\"hljs-string\">\"broadcastMessages\"<\/span>));\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Receive messages for a specific room<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"sendMessageToRoom\"<\/span>, (room, msg) =&gt; displayMessage(<span class=\"hljs-string\">`Received(<span class=\"hljs-subst\">${room}<\/span>): `<\/span> + msg, <span class=\"hljs-string\">\"roomMessages\"<\/span>));\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Notify when the user joins a room<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"joinMessageToRoom\"<\/span>, msg =&gt; displayMessage(<span class=\"hljs-string\">\"You: \"<\/span> + msg, <span class=\"hljs-string\">\"roomMessages\"<\/span>));\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Function to send message to all clients<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sendMessage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> message = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"message\"<\/span>).value;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.emit(<span class=\"hljs-string\">\"message\"<\/span>, message);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displayMessage(<span class=\"hljs-string\">`You: <span class=\"hljs-subst\">${message}<\/span>`<\/span>, <span class=\"hljs-string\">\"broadcastMessages\"<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"message\"<\/span>).value = <span class=\"hljs-string\">''<\/span>; <span class=\"hljs-comment\">\/\/Clear the input<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Join the room and update the current room<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">joinRoom<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> room = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"room\"<\/span>).value;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">if<\/span> (room === currentRoom) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class=\"hljs-string\">\"You already joined the same room!\"<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <span class=\"hljs-keyword\">else<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.emit(<span class=\"hljs-string\">\"joinRoom\"<\/span>, room);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentRoom = room;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Send message to a specific room<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sendMessageToRoom<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> room = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"room\"<\/span>).value;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> message = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"messageRoom\"<\/span>).value;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.emit(<span class=\"hljs-string\">\"sendMessageToRoom\"<\/span>, room, message);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displayMessage(<span class=\"hljs-string\">`You (<span class=\"hljs-subst\">${room}<\/span>): <span class=\"hljs-subst\">${message}<\/span>`<\/span>, <span class=\"hljs-string\">\"roomMessages\"<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"messageRoom\"<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/Function to display messages in the specified section<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">displayMessage<\/span>(<span class=\"hljs-params\">message, sectionId<\/span>) <\/span>{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> div = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"div\"<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.innerHTML = message;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">document<\/span>.getElementById(sectionId).appendChild(div);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-selector-class\">.section<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ccc<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-selector-class\">.section<\/span> <span class=\"hljs-selector-tag\">h3<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">0<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-selector-class\">.messages<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">10px<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">200px<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Broadcast Message to All Clients<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"message\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter message\"<\/span> \/&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"sendMessage()\"<\/span>&gt;<\/span>Send Message<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"broadcastMessages\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"messages\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section\"<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Chat Room<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"room\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter room name\"<\/span> \/&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"joinRoom()\"<\/span>&gt;<\/span>Join Room<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"messageRoom\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter message\"<\/span> \/&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"sendMessageToRoom()\"<\/span>&gt;<\/span>Send Message to Room<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"roomMessages\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"messages\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n&nbsp;&nbsp;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation<\/strong>:<\/p>\n\n\n\n<p>Above code mainly consists of two main features:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Broadcast Messaging<\/strong>: Users can send messages to all connected clients, and their messages are displayed with a &#8220;You&#8221; label.<\/li>\n\n\n\n<li><strong>Room Messaging<\/strong>: Users can join specific rooms and send messages to those rooms. Messages are displayed with the room&#8217;s name.<\/li>\n<\/ol>\n\n\n\n<p>JavaScript handles message sending and receiving, dynamically updating the page with messages from the user and the server. The <code>socket.emit()<\/code> function is used for sending messages, while <code>socket.on()<\/code> listens for incoming messages<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Auto Reconnection with Socket.io<\/strong><\/h3>\n\n\n\n<p>Socket.io automatically reconnects the client if the connection to the server is lost. This feature helps keep the app running smoothly without interruptions, even if there are network issues or the server restarts.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>How It Works:<\/strong><\/h4>\n\n\n\n<p>When the connection is lost, Socket.io will try to reconnect automatically. You can customize the reconnection attempts and delays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Customizing Auto Reconnection<\/strong><\/h3>\n\n\n\n<p>You can change how Socket.io reconnects, like how many times it should try or how long it should wait between tries. Here&#8217;s a simple way to set it up: (Add this code in <code>src\/public\/index.html<\/code> file)<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> socket = io({\n\n&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">reconnection<\/span>: <span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-comment\">\/\/Enable reconnection<\/span>\n\n&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">reconnectionAttempts<\/span>: <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-comment\">\/\/Try 5 times to reconnect<\/span>\n\n&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">reconnectionDelay<\/span>: <span class=\"hljs-number\">1000<\/span>, <span class=\"hljs-comment\">\/\/Wait 1 second between attempts<\/span>\n\n&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">reconnectionDelayMax<\/span>: <span class=\"hljs-number\">5000<\/span>, <span class=\"hljs-comment\">\/\/Maximum wait time is 5 seconds<\/span>\n\n&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">timeout<\/span>: <span class=\"hljs-number\">20000<\/span>, <span class=\"hljs-comment\">\/\/Timeout for the initial connection<\/span>\n\n&nbsp;});\n\n&nbsp;&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"connect\"<\/span>, () =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Connected to server\"<\/span>);\n\n&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&nbsp;socket.on(<span class=\"hljs-string\">\"disconnect\"<\/span>, (reason) =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Disconnected from server: <span class=\"hljs-subst\">${reason}<\/span>`<\/span>);\n\n&nbsp;&nbsp;&nbsp;});&nbsp;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Expected Output and Testing<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1675\" height=\"766\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/result-websocket-nodejs-socketio.png\" alt=\"Results of WebSocket server implementation with Node.js and Socket.io\" class=\"wp-image-35289\" title=\"WebSocket Server Implementation Results\"><\/noscript><img decoding=\"async\" width=\"1675\" height=\"766\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201675%20766%22%3E%3C%2Fsvg%3E\" alt=\"Results of WebSocket server implementation with Node.js and Socket.io\" class=\"wp-image-35289 lazyload\" title=\"WebSocket Server Implementation Results\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/result-websocket-nodejs-socketio.png\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1: Run the Server<\/strong><\/h4>\n\n\n\n<p>To run the server, use the following command:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx ts-node src\/index.ts<\/code><\/span><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 2: Open the Client in Your Browser<\/strong><\/h4>\n\n\n\n<p>Once the server is running, open your browser and go to <code>http:\/\/localhost:3000\/<\/code>. You should see two sections:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Broadcast Message<\/strong>: Type a message and click the button. It will be broadcast to all connected clients using WebSocket.<\/li>\n\n\n\n<li><strong>Chat Room<\/strong>: Type a room name, click &#8220;Join Room&#8221;, and send a message. Only users in the same room will see the message.<\/li>\n<\/ul>\n\n\n\n<p>You can also use multiple tabs to test the functionality. Open different tabs in your browser to simulate multiple users and see how messages are broadcast or sent within rooms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In this tutorial, we\u2019ve learned how to set up a WebSocket server in Node.js using Socket.IO. We covered two examples: broadcasting messages to all clients and implementing chat rooms for specific communication. This setup is perfect for real-time applications where data needs to be updated instantly, such as chat applications, games, or stock tracking. With Socket.IO&#8217;s versatility and the power of WebSockets, you can create highly interactive and responsive applications.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/hire-node-js-developers?utm_source=blog_cta&#038;utm_campaign=websockets-server-nodejs-socketio-tutorial-cta2\"><noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta02-hire-skilled-nodejs-developers-project.png\" alt=\"Hire skilled Node.js developers for your next project to build real-time applications\" class=\"wp-image-35284\" title=\"Hire Skilled Node.js Developers for Your Next Project\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20150%22%3E%3C%2Fsvg%3E\" alt=\"Hire skilled Node.js developers for your next project to build real-time applications\" class=\"wp-image-35284 lazyload\" title=\"Hire Skilled Node.js Developers for Your Next Project\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta02-hire-skilled-nodejs-developers-project.png\"><\/a><\/figure>\n\n\n<div class=\"related-posts-section\"><h2>Related Posts<\/h2><ul class=\"related-posts-list\"><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/mobisoft-infotech-pvt-ltd-india-along-with-smarty-ears-empowering-special-kids-with-speech-therapy-ios-apps-at-macworld-2011\">Mobisoft Infotech Pvt Ltd India along with Smarty-Ears empowering special kids with speech therapy iOS apps at Macworld 2011.<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/payers-in-healthcare-market-trends-2022\">Keeping Up with Payers in Healthcare and their Market Trends in 2022<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/mobile-app-development-process-deployment-launch\">Mobile App Development Process \u2013 Step 6 Deployment and Launch<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/it-support-levels-0-to-4\">An In-Depth Analysis of IT Support Levels &#8211; Level 0 to Level 4<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/hyperlocal-on-demand-delivery-model-effects-and-benefits\">Hyperlocal On-demand Delivery Model Decoded: Its Disruptive Effects and Benefits<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/telemedicine-primary-care-services-covid19\">Telemedicine Primary Care Services Creating New Milestones in the 2nd Year of COVID-19<\/a><\/li><\/ul><\/div>\n\n\n<div class=\"modern-author-card\">\n    <div class=\"author-card-content\">\n        <div class=\"author-info-section\">\n            <div class=\"author-avatar\">\n                <noscript><img decoding=\"async\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/author-nilesh-patil-nodejs.png\" alt=\"Nilesh Patil\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Nilesh Patil\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/author-nilesh-patil-nodejs.png\" class=\" lazyload\">\n            <\/div>\n            <div class=\"author-details\">\n                <h3 class=\"author-name\">Nilesh Patil<\/h3>\n                <p class=\"author-title\">Senior Software Engineer<\/p>\n                <a href=\"javascript:void(0);\" class=\"read-more-link read-more-btn\" onclick=\"toggleAuthorBio(this); return false;\">Read more <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"expand\" class=\"read-more-arrow down-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"expand\" class=\"read-more-arrow down-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <div class=\"author-bio-expanded\">\n                    <p>Nilesh Patil is a Senior Software Engineer at <a href=\"https:\/\/mobisoftinfotech.com\/\">Mobisoft Infotech<\/a> with 4.5 years of experience specializing in backend development using Node.js. He is dedicated to building scalable, efficient, and reliable applications that help businesses thrive. Passionate about clean code and problem-solving, Nilesh stays up-to-date with industry advancements and ensures the success of every project he works on through strong technical expertise.<\/p>\n                    <div class=\"author-social-links\"><div class=\"social-icon\"><a href=\"https:\/\/www.linkedin.com\/in\/nilesh-patil-25190a183\" target=\"_blank\" rel=\"nofollow noopener\"><i class=\"icon-sprite linkedin\"><\/i><\/a><\/div><\/div>\n                    <a href=\"javascript:void(0);\" class=\"read-more-link read-less-btn\" onclick=\"toggleAuthorBio(this); return false;\" style=\"display: none;\">Read less <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"collapse\" class=\"read-more-arrow up-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"collapse\" class=\"read-more-arrow up-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"share-section\">\n            <span class=\"share-label\">Share Article<\/span>\n            <div class=\"social-share-buttons\">\n                <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fwebsockets-server-nodejs-socketio-tutorial\" target=\"_blank\" class=\"share-btn facebook-share\"><i class=\"fa fa-facebook-f\"><\/i><\/a>\n                <a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fwebsockets-server-nodejs-socketio-tutorial\" target=\"_blank\" class=\"share-btn linkedin-share\"><i class=\"fa fa-linkedin\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Organization\",\n  \"name\": \"Mobisoft Infotech\",\n  \"url\": \"https:\/\/mobisoftinfotech.com\/\",\n  \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/MI_Logo.svg\",\n  \"sameAs\": [\n    \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n    \"https:\/\/twitter.com\/MobisoftInfo\",\n    \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n    \"https:\/\/www.youtube.com\/channel\/UCtwuTXKUXFX7k0NSYhsMeTg\",\n    \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n    \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n    \"https:\/\/github.com\/MobisoftInfotech\"\n  ],\n  \"contactPoint\": [\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+1-855-572-2777\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"US\",\n      \"availableLanguage\": [\"English\"]\n    },\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+91-858-600-8627\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"IN\",\n      \"availableLanguage\": [\"English\"]\n    }\n  ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\"\n  },\n  \"headline\": \"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)\",\n  \"description\": \"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.\",\n  \"image\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Nilesh Patil\",\n    \"description\": \"Nilesh Patil is a Senior Software Engineer at Mobisoft Infotech with 4.5 years of experience specializing in backend development using Node.js. He is dedicated to building scalable, efficient, and reliable applications that help businesses thrive. Passionate about clean code and problem-solving, Nilesh stays up-to-date with industry advancements and ensures the success of every project he works on through strong technical expertise.\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Mobisoft Infotech\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n      \"width\": 600,\n      \"height\": 60\n    }\n  },\n  \"datePublished\": \"2025-02-17\",\n  \"dateModified\": \"2025-02-17\"\n}\n<\/script>\n<script type=\"application\/ld+json\">\n    [\n    {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta01-unlock-nodejs-development-business.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\n            \"name\": \"Unlock Expert Node.js Development for Your Business\",\n            \"caption\": \"Unlock expert Node.js development services for better business growth and scalability.\",\n            \"description\": \"Hire experienced Node.js developers to enhance your real-time applications with advanced Node.js solutions.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta01-unlock-nodejs-development-business.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta02-hire-skilled-nodejs-developers-project.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\n            \"name\": \"Hire Skilled Node.js Developers for Your Next Project\",\n            \"caption\": \"Find top Node.js developers for your next project and build scalable, high-performance applications.\",\n            \"description\": \"Expert Node.js developers are ready to build robust, scalable solutions for your real-time application needs\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/inline-cta02-hire-skilled-nodejs-developers-project.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/result-websocket-nodejs-socketio.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\n            \"name\": \"WebSocket Server Implementation Results\",\n            \"caption\": \"Discover the results and benefits of using WebSocket with Node.js and Socket.io for real-time communication.\",\n            \"description\": \"Explore the performance and reliability of WebSocket server results when implemented in Node.js with Socket.io.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/result-websocket-nodejs-socketio.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/websocket-vs-http-comparison-real-time.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\n            \"name\": \"WebSocket vs HTTP: Which is Best for Real-Time Communication?\",\n            \"caption\": \"Learn the differences between WebSocket and HTTP for real-time data transfer in applications.\",\n            \"description\": \"WebSocket provides full-duplex communication while HTTP is request-response-based. Understand the key differences for your next project.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/websocket-vs-http-comparison-real-time.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\n            \"name\": \"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)\",\n            \"caption\": \"Master WebSocket server development in Node.js using Socket.io and TypeScript with this comprehensive tutorial.\",\n            \"description\": \"Learn how to build real-time applications using WebSocket in Node.js, Socket.io, and TypeScript. Complete step-by-step guide for developers.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/author-nilesh-patil-nodejs.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\n            \"name\": \"Author Nilesh Patil, Expert in Node.js and Real-Time Applications\",\n            \"caption\": \"Nilesh Patil, experienced Node.js developer and real-time application expert.\",\n            \"description\": \"Nilesh Patil specializes in Node.js development, real-time systems, and WebSocket implementations with Socket.io.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/author-nilesh-patil-nodejs.png\"\n        }\n        ]\n    <\/script>\n<style>\n@media only screen and (max-width:767px){.post-content li:before {\n    content: '';\n    width: 9px;\n    height: 9px;\n    background-color: #0d265c;\n    border-radius: 50%;\n    position: absolute;\n    left: 0px;\n    top: 12px;\n}\n.post-content li {\n    padding-left: 25px;\n}\n.post-content p, .post-content li{text-align: left;}}\n.number-list{\n    border-radius: 5px;\n    background-color: #4960e3;\n    font-size: 25px;\n    font-weight: bold;\n    line-height: 1.96;\n    color: #ffffff;\n    padding: 5px 12px;\n    margin-right:4px;\n}\n<\/style>\n\n\n","protected":false},"excerpt":{"rendered":"<p>WebSockets are an essential technology for real-time applications, enabling seamless two-way communication between clients and servers. Whether you&#8217;re building a chat app, live notification system, or multiplayer game, WebSockets allow data to flow instantly between users.In this tutorial, we&#8217;ll walk you through setting up a WebSocket server with Socket.io in a Node.js environment using TypeScript. [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":35276,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[286],"tags":[4700,4694,4698,4696,4690,4689,4688,4691,4699,4697,4687,4695,4693,4686,4692],"class_list":["post-35255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-node-js-real-time","tag-node-js-websocket","tag-node-js-websocket-client","tag-node-js-websocket-example","tag-node-js-websocket-tutorial","tag-socket-io-broadcasting","tag-socket-io-node-js-tutorial","tag-socket-io-node-js-typescript","tag-socket-io-performance","tag-socket-io-server","tag-socket-io-tutorial","tag-socket-io-with-react","tag-websocket-tutorial","tag-websocket-vs-http","tag-websockets-with-node-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WebSockets Server in Node.js with Socket.io Tutorial<\/title>\n<meta name=\"description\" content=\"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebSockets Server in Node.js with Socket.io Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-17T13:28:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-30T12:36:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/og-WebSockets-Server-in-Nodejs-with-Socketio.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nilesh Patil\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MobisoftInfo\" \/>\n<meta name=\"twitter:site\" content=\"@MobisoftInfo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nilesh Patil\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\"},\"author\":{\"name\":\"Nilesh Patil\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/42fd607f9a6246f2fac3ea59354d71d9\"},\"headline\":\"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)\",\"datePublished\":\"2025-02-17T13:28:22+00:00\",\"dateModified\":\"2025-12-30T12:36:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\"},\"wordCount\":1015,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\",\"keywords\":[\"node.js real-time\",\"node.js websocket\",\"node.js websocket client\",\"node.js websocket example\",\"node.js websocket tutorial\",\"socket.io broadcasting\",\"socket.io node.js tutorial\",\"socket.io node.js typescript\",\"socket.io performance\",\"socket.io server\",\"socket.io tutorial\",\"socket.io with react\",\"websocket tutorial\",\"websocket vs http\",\"websockets with node.js\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\",\"name\":\"WebSockets Server in Node.js with Socket.io Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\",\"datePublished\":\"2025-02-17T13:28:22+00:00\",\"dateModified\":\"2025-12-30T12:36:27+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/42fd607f9a6246f2fac3ea59354d71d9\"},\"description\":\"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.\",\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png\",\"width\":855,\"height\":392,\"caption\":\"WebSocket server in Node.js with Socket.io tutorial using TypeScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/42fd607f9a6246f2fac3ea59354d71d9\",\"name\":\"Nilesh Patil\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/068155949527f0276d84233f76185fe69f31053f6ad5c48f5123488381399dcf?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/068155949527f0276d84233f76185fe69f31053f6ad5c48f5123488381399dcf?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/068155949527f0276d84233f76185fe69f31053f6ad5c48f5123488381399dcf?s=96&r=g\",\"caption\":\"Nilesh Patil\"},\"sameAs\":[\"http:\/\/www.mobisoftinfotech.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebSockets Server in Node.js with Socket.io Tutorial","description":"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial","og_locale":"en_US","og_type":"article","og_title":"WebSockets Server in Node.js with Socket.io Tutorial","og_description":"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.","og_url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial","og_site_name":"Mobisoft Infotech","article_published_time":"2025-02-17T13:28:22+00:00","article_modified_time":"2025-12-30T12:36:27+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/og-WebSockets-Server-in-Nodejs-with-Socketio.png","type":"image\/png"}],"author":"Nilesh Patil","twitter_card":"summary_large_image","twitter_creator":"@MobisoftInfo","twitter_site":"@MobisoftInfo","twitter_misc":{"Written by":"Nilesh Patil","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial"},"author":{"name":"Nilesh Patil","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/42fd607f9a6246f2fac3ea59354d71d9"},"headline":"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)","datePublished":"2025-02-17T13:28:22+00:00","dateModified":"2025-12-30T12:36:27+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial"},"wordCount":1015,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png","keywords":["node.js real-time","node.js websocket","node.js websocket client","node.js websocket example","node.js websocket tutorial","socket.io broadcasting","socket.io node.js tutorial","socket.io node.js typescript","socket.io performance","socket.io server","socket.io tutorial","socket.io with react","websocket tutorial","websocket vs http","websockets with node.js"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial","url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial","name":"WebSockets Server in Node.js with Socket.io Tutorial","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png","datePublished":"2025-02-17T13:28:22+00:00","dateModified":"2025-12-30T12:36:27+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/42fd607f9a6246f2fac3ea59354d71d9"},"description":"Learn how to set up a WebSocket server in Node.js with Socket.io and TypeScript. A complete tutorial with examples for real-time communication.","breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/banner-websockets-server-nodejs-socketio-typescript.png","width":855,"height":392,"caption":"WebSocket server in Node.js with Socket.io tutorial using TypeScript"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/websockets-server-nodejs-socketio-tutorial#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"WebSockets Server in Node.js with Socket.io: A Complete Tutorial (Using TypeScript)"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/42fd607f9a6246f2fac3ea59354d71d9","name":"Nilesh Patil","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/068155949527f0276d84233f76185fe69f31053f6ad5c48f5123488381399dcf?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/068155949527f0276d84233f76185fe69f31053f6ad5c48f5123488381399dcf?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/068155949527f0276d84233f76185fe69f31053f6ad5c48f5123488381399dcf?s=96&r=g","caption":"Nilesh Patil"},"sameAs":["http:\/\/www.mobisoftinfotech.com"]}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/35255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=35255"}],"version-history":[{"count":38,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/35255\/revisions"}],"predecessor-version":[{"id":46315,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/35255\/revisions\/46315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/35276"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=35255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=35255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=35255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}