Declaración del problema: la tarea es realizar una acción emitiendo un evento desde el backend cada vez que se hace clic en una casilla de verificación particular en el frontend. Esto debe hacerse usando Socket.IO y Node.js
Requisito previo:
- Node.js : es una tecnología JavaScript Back-End de código abierto.
- Express.js : es un marco de servidor de node.js.
- Socket.io : Nos ayuda a crear una comunicación bidireccional basada en eventos en tiempo real entre el servidor y el cliente.
Ahora necesitamos instalar los paquetes necesarios para nuestro proyecto.
-
Instalación de los módulos.
npm install express socket.io
Estructura del proyecto:
Paso 1: Cree un archivo de servidor llamado 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");
)
Salida: ahora, si abre el host local, es decir, localhost: 4000, verá la salida, es decir, GeeksforGeeks .
Paso 2: Ahora, implementemos el socket en nuestro archivo de servidor, es decir, server.js
Sintaxis:
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");
})
Paso 3: Ahora vamos a crear un archivo Html básico, es decir, index.html y un archivo JavaScript, es decir, index.js, en nuestra carpeta pública.
Paso 4: ahora agreguemos socket.io a nuestro front-end. Agregue este script en su archivo html.
<script src="socket.io/socket.io.js" defer></script>
Paso 5: ahora vamos a crear la función de casilla de verificación. En esto, hemos creado una casilla de verificación simple. Cuando marcamos la casilla de verificación, emitirá un evento de socket que escucha el servidor y luego el servidor emite un evento reconocido que será escuchado por el lado del cliente y después de recibir ese evento. alertará el reconocimiento.
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 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");
});
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");
})
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA