Cuando se trata de NodeJS, se debe considerar la funcionalidad en tiempo real. En este contexto, «en tiempo real» se refiere al procesamiento de la comunicación desde el cliente hacia el servidor en tiempo real.
NodeJS es un código abierto ampliamente utilizado por miles de programadores en todo el mundo. NodeJS puede ejecutarse en muchos sistemas operativos diferentes, desde Windows hasta Linux y OS X, lo que también es una ventaja. NodeJS proporciona bibliotecas ricas en diferentes formas de Módulos de JavaScript que simplifican la programación y minimizan el tiempo de desarrollo.
Aquí presentaré la estructura de una aplicación de mensajería en tiempo real utilizando NodeJS combinado con Express y Socket.IO, que consta de dos partes: el lado del servidor y el lado del cliente.
1. Primero, crea una carpeta que contenga tu código fuente e instala módulos.
- Crea una carpeta que contenga tu código fuente.
mkdir NodeJs-Express-SocketIO-SendImage
- Ejecuta
[npm init]para inicializar el archivo de origen,package.json. Selecciona el archivo de código js comoindex.js.
cd NodeJs-Express-SocketIO-SendImage
npm init
Instala el módulo para utilizar en NodeJS. Los módulos son: express, ejs, socket.io.
npm install express ejs socketio
Ahora el contenido de su archivo package.json se ve así:
{
“name”: “NodeJs-Express-SocketIO-SendImage”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“ejs”: “^3.1.6”,
“express”: “^4.17.1”,
“socketio”: “^1.0.0”
}
}
Cree una carpeta pública para almacenar archivos js e imágenes después de cargarlos.
mkdir public
cd public
mkdir js
mkdir uploads
– Copie jquery.min.js a la carpeta public/js o puede obtenerlo desde cdn jquery
– Su directorio de códigos ahora se verá así:
2. NodeJS del lado del servidor
– En el archivo index.js:
var express = require (‘express’);
var app = express();
var fs = require(‘fs’);
app.use(express.static(__dirname + ‘/public’));
app.set(“view engine”, “ejs”);
app.set(‘views’, ‘views’);
var server = require(‘http’).Server(app);
var io = require(‘socket.io’)(server);
const port = process.env.PORT || 8080;
server.listen(port, () => console.log(`Listen on port ${port}…`));
io.on(‘connection’, function (socket) {
console.log(‘Connection ID: ‘ + socket.id);
socket.on(‘disconnect’, function () {
console.log(‘Disconect ID: ‘ + socket.id);
});
// The server listens to data from the client
socket.on(‘Client-sent-data’, function (data) {
// After listening to data, server emit this data to all clients
io.sockets.emit(‘Server-sent-data’, data);
});
// Handle image
socket.on(“sendImage”, function(data){
var guess = data.base64.match(/^data:image\/(png|jpeg);base64,/)[1];
var ext = “”;
switch(guess) {
case “png” : ext = “.png”; break;
case “jpeg” : ext = “.jpg”; break;
default : ext = “.bin”; break;
}
var savedFilename = “/uploads/” + randomString(10)+ext;
fs.writeFile(__dirname + “/public” + savedFilename, getBase64Image(data.base64), ‘base64’, function(err) {
if (err !== null)
console.log(err);
else
io.sockets.emit(“receiveImage”, {
path: savedFilename,
});
console.log(“Send image success!”);
});
});
})
app.get(‘/’, function(req, res) {
res.render(‘home’);
})
function randomString(length)
{
var text = “”;
var possible = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_”;
for( var i=0; i < length; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
function getBase64Image(imgData) {
return imgData.replace(/^data:image\/(png|jpeg|jpg);base64,/, “”);
}
3. NodeJS del lado del cliente
– Utilice ejs para mostrar contenido del lado del Cliente. En la carpeta de vistas, cree el archivo home.ejs.
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Express SocketIO – Chat message & send image</title>
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”socket.io/socket.io.js”></script>
<script type=”text/javascript”>
var socket = io(‘http://localhost:8080’);
// The client recevie the data from the server
socket.on(‘Server-sent-data’, function(data) {
$(‘#show-message’).append(‘<p>’ + data + ‘</p>’);
});
// The client send data to the server
$(document).ready(function () {
$(‘#send’).on(‘click’, function () {
var message = $(‘#message’).val();
socket.emit(“Client-sent-data”, message);
$(‘#message’).val(”);
document.getElementById(“message”).focus();
})
})
// Handle image
window.onload = function() {
document.getElementById(“file”).addEventListener(“change”, function(){
submitImage();
});
};
function submitImage(){
var selector = document.getElementById(“file”);
var img = document.getElementById(“preview”);
var reader = new FileReader();
reader.onload = function (e) {
// img.src = e.target.result;
// client send
socket.emit(“sendImage”, {base64:e.target.result});
}
reader.readAsDataURL(selector.files[0]);
}
// Client receive
socket.on(‘receiveImage’, function(data){
// document.getElementById(“showImage”).src = data.path;
var img = ‘<img id=”showImage” src=”‘ + data.path + ‘” width=”100″/>’;
$(‘#show-message’).append(img);
});
</script>
</head>
<body style=”width: 500px; margin: 0 auto;”>
<h2>Chat messages</h2>
<div id=”show-message”></div>
<div>
<p>
<textarea id=”message” rows=”5″ style=”width: 100%”></textarea>
</p>
<p>
Choose image:
<input id=”file” type=”file”>
<img id=”preview” width=”100″></img>
</p>
<button id=”send”>Send message</button>
</div>
</body>
</html>
Ejecuta en el navegador:
4. Ejecute la demostración NodeJS Express SocketIO, envíe un mensaje de chat y envíe una imagen
Ahora ejecuta el servidor web usando el comando: node index.js
node index.js
Abra dos navegadores para probar, escriba un mensaje y elija una imagen para enviar. Al enviar un mensaje y seleccionar una foto en una de las pantallas, también se muestra la pantalla de recepción
En su símbolo del sistema
Verificas en la carpeta pública/subidas, las imágenes se guardan.
Espero que comprendan los conceptos básicos de NodeJS, SocketIO y creen una aplicación sencilla en tiempo real.