Skip to content
Related Articles

Related Articles

Improve Article
How to emit an event when a checkbox is clicked using Socket.IO?
  • Last Updated : 14 Apr, 2021

Problem Statement: Task is to perform an action by emitting an event from the backend whenever a particular checkbox is clicked in the frontend. This needs to be done using Socket.IO and Node.js

Prerequisite:

  1. Node.js : It is an open-source JavaScript Back-End technology.
  2. Express.js : It is a node.js server framework.
  3. Socket.io : It helps us to create a real-time bi-direction event-based communication between the server and the client.

Now we need to install the required packages for our project.

  • Installing the modules.

    npm install express socket.io

Project structure:



Step 1: Create a server file named server.js.

server.js




// Importing express module
const express = require('express'); 
const app = express(); 
  
    
// Calling the public folder
app.use(express.static("public")); 
    
// Handling get request
app.get("/" , (req,res)=>{
  res.send("GeeksforGeeks); 
});
    
// Listing the server 
app.listen(4000 , ()=>{
    console.log("Server running on port 4000");
)

Output: Now, If you open the local host i.e. localhost:4000 You will see the output i.e. — GeeksforGeeks.

Step 2: Now, Lets implement the socket into our server file i.e. server.js

Syntax:

const io = require('socket.io')(server);

server.js






// Importing express module
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
  
// Calling the public folder
app.use(express.static('public'))
  
// Handling get request
app.get("/" , (req,res)=>{
    res.render("index");
});
  
  
// Listening to the server
server.listen(4000 , ()=>{
    console.log("server is running");
})

Step 3: Now let’s create a basic Html file i.e. index.html and a JavaScript file i.e. index.js into our public folder.

Step 4 : Now let’s add socket.io into our front-end. Add this script into your html file.

<script src="socket.io/socket.io.js" defer></script>

Step 5 : Now let’s create check box functionality. In this we have created a simple check box, When we check the checkbox it will emit one socket event which listens by the server and then the server emits an acknowledged event which will be listened to by the client-side and after receiving that event it will alert the acknowledgment.

index.html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <script src="socket.io/socket.io.js" defer></script>
    <script src="index.js" defer></script>
</head>
<body>
    <center>
    <h1>GeeksforGeeks</h1>
    <p><input id="check" type="checkbox" 
              onchange="changed()"/>
        Click me
    </p>
  
    </center>
</body>
</html>

index.js




// Socket Intialized
const socket = io('/');
  
function changed()
{
   // Getting current state of checkbox.
   var a = document.getElementById('check').checked;
   if(a)
   {
         // Emiting the event.
      socket.emit("checkedTrue");  
    }
}
  
//Listening on the event.
socket.on("acknowledged" , ()=>{
    alert("Action acknowledged by the server");
});

server.js




// Importing express module
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
  
// Calling the public folder
app.use(express.static('public'))
  
// Handling get request
app.get("/" , (req,res)=>{
    res.render("index");
});
  
// Socket
io.on("connection" , (socket)=>{
    socket.on("checkedTrue" , ()=>{
        socket.emit("acknowledged")
    })
})
  
// Listening the server
server.listen(4000 , ()=>{
    console.log("server is running");
})

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :