Skip to content
Home » Realtime Chat Application Socket.io

Realtime Chat Application Socket.io

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

8 thoughts on “Realtime Chat Application Socket.io”

  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. 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

Your email address will not be published. Required fields are marked *

You cannot copy content of this page

Top 10 Programming Languages to Learn In 2023! 9 Best Extensions For Web Developers! | Chrome Extensions For Web Developers Web Development Roadmap Best Resources to Learn PYTHON FREE! Web Vs App Development- Which one is Better?