如何使用Socket.IO在复选框被点击时触发事件

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

先决条件：

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

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

安装模块。

npm install express socket.io

项目结构：

如何使用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 .

如何使用Socket.IO在复选框被点击时触发事件

步骤2： 现在，让我们将socket实现到我们的服务端文件server.js中。

语法：

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

步骤3: 现在让我们在我们的public文件夹中创建一个基本的Html文件，即index.html，和一个JavaScript文件，即index.js。

步骤4: 现在让我们将socket.io添加到我们的前端页面。在你的html文件中添加这个脚本。

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

步骤5： 现在让我们来创建复选框功能。在这个例子中，我们创建了一个简单的复选框。当我们选中复选框时，它会触发一个socket事件，服务器会监听这个事件，然后服务器会发出一个确认事件，客户端会监听这个事件并在接收到该事件后弹出确认框。

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

索引.js

// Socket Initialized 
const socket = io('/'); 
  
function changed() 
{ 
   // Getting current state of checkbox. 
   var a = document.getElementById('check').checked; 
   if(a) 
   { 
         // Emitting 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"); 
})