Realtime Chat Application Socket.io

Tanmay Sinha

3 years ago

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:

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

Author
Recent Posts

Tanmay Sinha

Founder & CEO at Mr Programmer

Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users!

We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.

We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.

If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

Related posts: