nodejs socketio

-

 Socketio is a library based on websocket. It supports stateful protocol.


Cdn: <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>

Note: I have inserted socket.js inside the ‘public’ folder.


index.js

const express = require('express')

const app = express()

const port = 3000

const path = require('path')


// socketio integration

const { createServer } = require('node:http');

const server = createServer(app);

const { Server } = require('socket.io');

const io = new Server(server);



app.use('/public', express.static('public'))

app.get('/',function(req, res){

    res.sendFile(path.resolve(__dirname, 'templates/message.html'))

})


io.on('connection', (socket) => {

    console.log('a user connected');

    socket.on('disconnect', () => {

      console.log('user disconnected');

    });


    socket.on('chat_message', (msg) => {

        console.log('message: ' + msg);

        io.emit('chat_message', (msg));

      });

  });

  


  server.listen(port, () => {

    console.log('server running at ', port);

  });


templates/Message.html

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>message home</title>

</head>

<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: #333;

        border: none;

        padding: 0 1rem;

        margin: 0.25rem;

        border-radius: 3px;

        outline: none;

        color: #fff;

    }


    #messages {

        list-style-type: none;

        margin: 0;

        padding: 0;

    }


    #messages>li {

        padding: 0.5rem 1rem;

    }


    #messages>li:nth-child(odd) {

        background: #f1efef;

    }

</style>


<body>



    <ul id="messages"></ul>

    <form id="form" action="">

        <input id="input" autocomplete="off" /><button>Send</button>

    </form>



    <script src="../public/socket.js"></script>


    <script>

        const socket = io();

      

        const form = document.getElementById('form');

        const input = document.getElementById('input');

        const messages = document.getElementById('messages');

      

        form.addEventListener('submit', (e) => {

          e.preventDefault();

          if (input.value) {

            socket.emit('chat_message', input.value);

            input.value = '';

          }

          socket.emit('shimanta', 'is a hacker');

        });

      

        socket.on('chat_message', (msg) => {

          const item = document.createElement('li');

          item.textContent = msg;

          messages.appendChild(item);

          window.scrollTo(0, document.body.scrollHeight);

        });


      </script>


</body>


</html>


Code structure

Code structure


Output looks like

Popular posts from this blog

MCSL 216 MCA NEW Practical ~ common questions suggestions

-
Topic: JS VALIDATION   Q1. Design a form for booking room through a Hotel website. The form should have relevant fields (make suitable assumptions). Further, the form should have Submit and Reset button. Now, perform following: Marks: 20   Solution: <html>     <title>hotel form booking</title>     <body>         <br>         <h2>Hotel Form</h2>         <br>           <form id="booking_form">             <label for="p_name">Person Name</label> <br>             <input type="text" id="p_name" name="p_name">          ...
Read more

dev chaeatsheet

-
Image
dev cheatsheet link: https://docs.google.com/document/d/15gRGAB57iEFs_TGsqrk08_OZ36mX1yfsMKCYM6qX7gk/edit?usp=sharing Topic: WordPress Theme Dev We can develop our custom theme in wordpress. Let’s first understand the folder structure of wordpress.contact form Let me assure you, how can you make a proper structure of a wordpress project.  front-page.php: This template is used to display the front page of the site. It's often used for the site's homepage. index.php: This is the fallback template used when more specific templates are not available. It usually displays a list of posts. style.css: This file contains the styles for your theme. While it can include theme author details in comments, its primary purpose is to style the HTML elements of your theme. single.php: This template is used to display a single post's details.             404.php: handle 404 error page         ...
Read more

STRAPI

-
Image
  Strapi helps us to provide pre-made cms backend. In strapi everything is about content type.   Topic: Weird Things About STRAPI Topic: Document Save States When we want to store a post into strapi, that time it gives us 2 options: “publish”, “save”. When we create content as publish/save it creates 2 different records. First 2 are for “save” and the rest 2 are for “publish”. Good thing is when creating a new publish/save it delta the OLD one ID and create a NEW one. Topic: Content Type change in strapi We can add multiple fields into strapi content type. For changing the Column Type we need go in inside /src/your-content-type/schema.json /* OLD ONE */ "attributes": {     "title": {       "type": "string"     },     "description": {       "type": "text",   "length": 80     }, /* NEW ONE */ "description": {    ...
Read more