Skip to content
Home » Blogs » Realtime Chat Application Socket.io

Realtime Chat Application Socket.io3 min read

Realtime Chat App

Hey Programmer, Welcome to the Another Project Making Blog, I am Very Excited to announce that In this Blog We Will Be Creating a Realtime Chat Application Using Socket.io Which a Newbie Or Beginner Can Create.

If You Don’t Know What Does Realtime Chat App Is, In Simple Words It Means That Two or More Users Can Chat Together Like WhatsApp, Telegram, Instagram and Other Chat Apps. And Special Thanks To https://socket.io/ For This.

Video Tutorial Of this Post:

Also Read:

• Email Automation Using Python

• Password Validation Using JavaScript

• Typing Animation Using HTML & CSS

And This How Your App Will Look Like After Deploying the Project:

App Overview

Getting Started

First Of All What You Need is You Have to Install Node.js In your Computer, Then After Node.js Is Installed In Your Computer. After That You Need a Node.JS web framework Which Is express.

To Install express Just Type npm install express In Your Terminal or CMD Prompt After You Are Done with Installing Express In Your Computer. Then Create a File Named package.json And Put the Following Code Into It.

package.json

{
    "name": "socket-chat-example",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "dependencies": {
      "express": "^4.17.1",
      "socket.io": "^4.1.2"
    },
    "scripts": {
      "start": "node index.js"
    }
  }

After That We Need To Create a index.js File

index.js

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  socket.on('chat message', msg => {
    io.emit('chat message', msg);
  });
});

http.listen(port, () => {
  console.log(`Socket.IO server running at http://localhost:${port}/`);
});

And After All This We Need To Start Our Sever, So For that Just Type npm start

And Make Sure Before Starting Your App You Have The Installed the Following In your System:

Socket.io: – npm install socket.io

Express: – npm install express

And After All that Obviously You Need a HTML File, A Web Page Without HTML Is Not Complete And a Day Without Mr Programmer’s Blog Is Not Complete.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO Chat </title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: rgb(232, 248, 4); border: none; cursor: pointer; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: rgb(0, 0, 0); }

#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
    </style>

  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send Message</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>

    <script>
      var socket = io();

      var messages = document.getElementById('messages');
      var form = document.getElementById('form');
      var input = document.getElementById('input');

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', function(msg) {
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

So This Was It For this Blog See you In the Next One Till Then Keep Coding Keep Exploring!

DOWNLOAD SOURCE CODE

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

Random Quote GeneratorRandom Quote Generator JavaScript3 min read Password ValidationPassword Validation Using JavaScript3 min read Typing AnimationTyping Animation Using HTML & CSS3 min read Web ServerWeb Server In Node.js1 min read Most Popular Programming Language 2022Most Popular Programming Language 20223 min read Login Sign Up FormGlassmorphism Login Form Using HTML & CSS5 min read Facebook Post CloneCreate Facebook Post Clone Using HTML, CSS & JavaScript8 min read Python Qr Code ThumbnailQR Code Generator In Python1 min read
Tags:

8 thoughts on “Realtime Chat Application Socket.io3 min read”

  1. Pingback: Web Server In Node.js - Mr Programmer

  2. Pingback: Keylogger Using Python - Mr Programmer

  3. Pingback: Complete Web Development RoadMap 2022 | Web Development | - Mr Programmer

  4. Pingback: 10 Web Development Projects With Source Codes! - Mr Programmer

  5. Beauty Fashion

    I feel this is among the most vital information for me. And i’m satisfied reading your article. However wanna observation on some normal issues, The site style is wonderful, the articles is actually excellent : D. Just right task, cheers

Leave a Reply