{"id":2366,"date":"2026-07-24T00:37:35","date_gmt":"2026-07-23T17:37:35","guid":{"rendered":"https:\/\/sumberlaba.com\/index.php\/2026\/07\/24\/how-to-build-a-real-time-chat-app-with-socket-io-a-step-by-step-guide\/"},"modified":"2026-07-24T00:37:35","modified_gmt":"2026-07-23T17:37:35","slug":"how-to-build-a-real-time-chat-app-with-socket-io-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/sumberlaba.com\/index.php\/2026\/07\/24\/how-to-build-a-real-time-chat-app-with-socket-io-a-step-by-step-guide\/","title":{"rendered":"How to Build a Real-Time Chat App with Socket.io: A Step-by-Step Guide"},"content":{"rendered":"

How to Build a Real-Time Chat App with Socket.io: A Step-by-Step Guide<\/h1>\n

Building a real-time chat application can seem daunting, but Socket.io simplifies the process by handling bidirectional communication between client and server. In this tutorial, you’ll learn how to set up a basic chat app using Node.js and Socket.io, enabling instant message delivery without page refreshes. We’ll focus on the core components: server setup, client connection, and real-time messaging.<\/p>\n

Before you begin, ensure you have Node.js installed on your machine. We’ll use Express to serve the HTML file and Socket.io for the WebSocket layer. Create a new project folder, run npm init -y<\/code>, then install both dependencies with npm install express socket.io<\/code>. This gives you everything needed to start coding.<\/p>\n

\"Article<\/p>\n

1. Set Up the Server<\/h2>\n

Create a file named server.js<\/code>. Import Express and Socket.io, then initialize them. Listen for connections and handle the connection<\/code> event. Inside the callback, listen for chat message<\/code> events and broadcast them to all connected clients using io.emit()<\/code>. Here’s a minimal server example:<\/p>\n

    \n
  • Import: const express = require('express'); const http = require('http'); const socketIo = require('socket.io');<\/code><\/li>\n
  • Create app and server: const app = express(); const server = http.createServer(app); const io = socketIo(server);<\/code><\/li>\n
  • Serve static files (like index.html<\/code>) with app.use(express.static('public'));<\/code><\/li>\n
  • Listen on port 3000: server.listen(3000, () => console.log('listening on *:3000'));<\/code><\/li>\n<\/ul>\n

    2. Create the Client HTML<\/h2>\n

    Inside a public<\/code> folder, create index.html<\/code>. Include the Socket.io client library via CDN: <script src=\"\/socket.io\/socket.io.js\"><\/script><\/code>. Add a simple form with an input field and a messages list. Use JavaScript to connect to the server and handle events: const socket = io();<\/code>.<\/p>\n

    To send a message, emit a chat message<\/code> event with the input value. To receive messages, listen for the same event on the client and append the data to the messages list.<\/p>\n

    3. Implement Real-Time Messaging<\/h2>\n

    On the server, inside the connection<\/code> callback, add a listener for chat message<\/code>:<\/p>\n

      \n
    • socket.on('chat message', (msg) => { io.emit('chat message', msg); });<\/code><\/li>\n<\/ul>\n

      On the client, after connecting, listen for the chat message<\/code> event:<\/p>\n

        \n
      • socket.on('chat message', (msg) => { const li = document.createElement('li'); li.textContent = msg; document.getElementById('messages').appendChild(li); });<\/code><\/li>\n<\/ul>\n

        When the form is submitted, prevent default behavior and emit the message: socket.emit('chat message', input.value); input.value = '';<\/code><\/p>\n

        That’s it! Run node server.js<\/code> and open http:\/\/localhost:3000<\/code> in multiple browser tabs. You’ll see messages appear instantly across all clients. This simple foundation can be extended with features like usernames, rooms, and typing indicators.<\/p>\n","protected":false},"excerpt":{"rendered":"

        How to Build a Real-Time Chat App with Socket.io: A Step-by-Step Guide Building a real-time chat application can seem daunting, but Socket.io simplifies the process by handling bidirectional communication between client and server. In this tutorial, you’ll learn how to set up a basic chat app using Node.js and Socket.io, enabling instant message delivery without … <\/p>\n","protected":false},"author":2716,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-2366","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/2366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/users\/2716"}],"replies":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/comments?post=2366"}],"version-history":[{"count":0,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/2366\/revisions"}],"wp:attachment":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media?parent=2366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/categories?post=2366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/tags?post=2366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}