使用 Socket.IO 单击复选框时如何发出事件？

问题陈述：任务是通过在前端单击特定复选框时从后端发出事件来执行操作。这需要使用 Socket.IO 和 Node.js 来完成

先决条件：

1. Node.js ：它是一种开源的 JavaScript 后端技术。
2. Express.js ：它是一个 node.js 服务器框架。
3. Socket.io ：它帮助我们在服务器和客户端之间创建基于事件的实时双向通信。

现在我们需要为我们的项目安装所需的包。

• 安装模块。

  npm install express socket.io

项目结构：

第 1 步：创建一个名为 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");
)

输出：现在，如果您打开本地主机，即 localhost:4000，您将看到输出，即 — GeeksforGeeks 。

第 2 步：现在，让我们将套接字实现到我们的服务器文件中，即 server.js

句法：

const io = require('socket.io')(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");
})

第 3 步：现在让我们在公共文件夹中创建一个基本的 Html 文件（即 index.html）和一个 JavaScript 文件（即 index.js）。

第 4 步：现在让我们将 socket.io 添加到我们的前端。将此脚本添加到您的 html 文件中。

第 5 步：现在让我们创建复选框功能。在此我们创建了一个简单的复选框，当我们选中该复选框时，它将发出一个由服务器侦听的套接字事件，然后服务器发出一个确认的事件，该事件将被客户端侦听，并在接收到该事件后它将提醒确认。

索引.html

    
    
    
    
    


    
    GeeksforGeeks
    
        Click me
    
  
    

index.js

// Socket Initialized
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");
});

服务器.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");
})

输出：