{"id":4215,"date":"2023-11-04T23:14:09","date_gmt":"2023-11-04T23:14:09","guid":{"rendered":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/"},"modified":"2023-11-05T05:47:55","modified_gmt":"2023-11-05T05:47:55","slug":"building-real-time-applications-with-websockets-and-socket-io","status":"publish","type":"post","link":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/","title":{"rendered":"Building Real-time Applications with WebSockets and Socket.io"},"content":{"rendered":"<p>WebSockets are a protocol that allows for real-time, two-way communication between a client and a server. Socket.io is a JavaScript library that simplifies building real-time applications with WebSockets. In this tutorial, we&#8217;ll explore how to build a real-time chat application with WebSockets and Socket.io.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before we begin, make sure you have the following installed on your machine:<\/p>\n<ul>\n<li>Node.js (version 6 or higher)<\/li>\n<li>npm (version 3 or higher)<\/li>\n<\/ul>\n<h2>Setting up the project<\/h2>\n<p>First, let&#8217;s create a new directory for our project and initialize it as a Node.js project:<\/p>\n<pre><code>mkdir real-time-chat\ncd real-time-chat\nnpm init -y\n<\/code><\/pre>\n<p>Next, let&#8217;s install the necessary dependencies:<\/p>\n<pre><code>npm install express socket.io\n<\/code><\/pre>\n<h2>Building the server<\/h2>\n<p>Let&#8217;s start by building the server. Create a new file called <code>server.js<\/code> in the root of the project and add the following code:<\/p>\n<pre><code class=\"language-javascript\">const express = require('express');\nconst http = require('http');\nconst socketIO = require('socket.io');\n\nconst app = express();\nconst server = http.Server(app);\nconst io = socketIO(server);\n\nconst PORT = process.env.PORT || 3000;\n\napp.get('\/', (req, res) =&gt; {\n  res.sendFile(__dirname + '\/index.html');\n});\n\nio.on('connection', (socket) =&gt; {\n  console.log('a user connected');\n\n  socket.on('disconnect', () =&gt; {\n    console.log('user disconnected');\n  });\n});\n\nserver.listen(PORT, () =&gt; {\n  console.log(`listening on *:${PORT}`);\n});\n<\/code><\/pre>\n<p>This code creates an Express app, sets up a server with the <code>http<\/code> module, and initializes Socket.IO on the server. The app responds to requests on the root URL by serving up an <code>index.html<\/code> file, and Socket.IO listens for new connections and disconnect events.<\/p>\n<h2>Building the client<\/h2>\n<p>Now let&#8217;s create the front-end of our chat application. Create a file called <code>index.html<\/code> in the root of the project and add the following code:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;title&gt;Real-time Chat&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;ul id=\"messages\"&gt;&lt;\/ul&gt;\n  &lt;form action=\"\"&gt;\n    &lt;input id=\"message-input\" autocomplete=\"off\" \/&gt;\n    &lt;button&gt;Send&lt;\/button&gt;\n  &lt;\/form&gt;\n\n  &lt;script src=\"\/socket.io\/socket.io.js\"&gt;&lt;\/script&gt;\n  &lt;script&gt;\n    const socket = io();\n\n    const messageList = document.querySelector('#messages');\n    const messageInput = document.querySelector('#message-input');\n    const form = document.querySelector('form');\n\n    form.addEventListener('submit', (e) =&gt; {\n      e.preventDefault();\n      const message = messageInput.value.trim();\n      if (message) {\n        socket.emit('chat message', message);\n        messageInput.value = '';\n      }\n    });\n\n    socket.on('chat message', (message) =&gt; {\n      const li = document.createElement('li');\n      li.innerText = message;\n      messageList.appendChild(li);\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>This code sets up the HTML structure of the chat application, including a form for sending messages and a list for displaying them. It also includes a script tag that loads the Socket.IO client library and sets up the necessary event listeners for sending and receiving messages.<\/p>\n<h2>Testing the application<\/h2>\n<p>Now that we have our server and client code, let&#8217;s test the application. Start the server by running <code>node server.js<\/code> in the terminal, then navigate to `http:\/\/localhost:3000` in your browser.<\/p>\n<p>You should see the chat interface displayed in the browser window. Open multiple browser tabs or windows to simulate multiple users, and try sending messages to see them appear in real time.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, we explored how to build a real-time chat application with WebSockets and Socket.IO. By building a server that listens for new connections and sending messages using the <code>emit()<\/code> method, and a client that listens for messages and sends them using the <code>on()<\/code> and <code>emit()<\/code> methods, we were able to build a real-time chat application with just a few lines of code.<\/p>\n<p>Socket.IO also includes support for rooms, namespaces, and other advanced features that allow for building more complex real-time applications. With Socket.IO and WebSockets, the possibilities for real-time communication on the web are endless.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebSockets are a protocol that allows for real-time, two-way communication between a client and a server. Socket.io is a JavaScript library that simplifies building real-time applications with WebSockets. In this tutorial, we&#8217;ll explore how to build a real-time chat application with WebSockets and Socket.io. Prerequisites Before we begin, make sure <a href=\"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[1724,1723,1725,1727,1726,1641,49,1728,1729,1642],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building Real-time Applications with WebSockets and Socket.io - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Real-time Applications with WebSockets and Socket.io\" \/>\n<meta property=\"og:description\" content=\"WebSockets are a protocol that allows for real-time, two-way communication between a client and a server. Socket.io is a JavaScript library that simplifies building real-time applications with WebSockets. In this tutorial, we&#8217;ll explore how to build a real-time chat application with WebSockets and Socket.io. Prerequisites Before we begin, make sure Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:55+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"Building Real-time Applications with WebSockets and Socket.io\",\n\t            \"datePublished\": \"2023-11-04T23:14:09+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:47:55+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\"\n\t            },\n\t            \"wordCount\": 416,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"Building Applications\\\"\",\n\t                \"\\\"Real-time Applications\\\"\",\n\t                \"\\\"Real-time Web Development\\\"\",\n\t                \"\\\"Socket Libraries\\\"\",\n\t                \"\\\"Socket Programming\\\"\",\n\t                \"\\\"Socket.io\\\"\",\n\t                \"\\\"Web development\\\"\",\n\t                \"\\\"WebSockets Overview\\\"\",\n\t                \"\\\"WebSockets Tutorial\\\"]\",\n\t                \"\\\"websockets\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\",\n\t            \"name\": \"Building Real-time Applications with WebSockets and Socket.io - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:14:09+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:47:55+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Building Real-time Applications with WebSockets and Socket.io\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building Real-time Applications with WebSockets and Socket.io - Pantherax Blogs","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":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/","og_locale":"en_US","og_type":"article","og_title":"Building Real-time Applications with WebSockets and Socket.io","og_description":"WebSockets are a protocol that allows for real-time, two-way communication between a client and a server. Socket.io is a JavaScript library that simplifies building real-time applications with WebSockets. In this tutorial, we&#8217;ll explore how to build a real-time chat application with WebSockets and Socket.io. Prerequisites Before we begin, make sure Continue Reading","og_url":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:09+00:00","article_modified_time":"2023-11-05T05:47:55+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Building Real-time Applications with WebSockets and Socket.io","datePublished":"2023-11-04T23:14:09+00:00","dateModified":"2023-11-05T05:47:55+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/"},"wordCount":416,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Building Applications\"","\"Real-time Applications\"","\"Real-time Web Development\"","\"Socket Libraries\"","\"Socket Programming\"","\"Socket.io\"","\"Web development\"","\"WebSockets Overview\"","\"WebSockets Tutorial\"]","\"websockets\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/","url":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/","name":"Building Real-time Applications with WebSockets and Socket.io - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:09+00:00","dateModified":"2023-11-05T05:47:55+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/building-real-time-applications-with-websockets-and-socket-io\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Building Real-time Applications with WebSockets and Socket.io"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4215"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4215"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4215\/revisions"}],"predecessor-version":[{"id":4311,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4215\/revisions\/4311"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4215"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}